Вставка строки в определенное место другой в JavaScript

Быстрый ответ

Для вставки строки в определённое место другой строки, в JavaScript используется метод substring:

const swiftInsert = (original, index, insert) => original.substring(0, index) + insert + original.substring(index);

console.log(swiftInsert("Привет, Мир", 7, " великолепный")); // Вывод: "Привет, великолепный Мир"

Функция swiftInsert вставляет строку insert в исходную строку original в позицию index.

Реализация пользовательского метода splice для строк

Поскольку в JavaScript строки не имеют встроенного метода splice, можно добавить его в прототип String:

String.prototype.splice = function(start, newSubStr) {
    return this.slice(0, start) + newSubStr + this.slice(start);
};

console.log("Привет, Мир".splice(7, " великолепный")); // Вывод: "Привет, великолепный Мир"

Таким образом, для строк становится доступен метод splice, который вставляет подстроку newSubStr в позицию, определенную параметром start, аналогично работе с массивами.

Обработка отрицательных индексов

Замена метода splice позволяет использовать отрицательные индексы для вставки:

String.prototype.splice = function(start, newSubStr) {
    if (start < 0) {
        start = this.length + start;
        start = Math.max(start, 0); // Переход в область отрицательных значений не предусмотрен
    }
    return this.slice(0, start) + newSubStr + this.slice(start);
};

console.log("Привет, Мир".splice(-4, " великолепный"));

Таким образом, метод splice теперь может обрабатывать отрицательные индексы, что обеспечивает корректное расположение при вставке в строку.

Шаблонные литералы для выполнения множественных вставок

Для выполнения нескольких вставок с целью поддержания чистоты и читаемости кода уместно использовать шаблонные литералы:

const multiInsert = (str, ...insertInstructions) => {
    return insertInstructions.reduce((current, [position, insert]) => {
        return current.splice(position, insert);
    }, str);
};

console.log(multiInsert("Привет, Мир", [7, " великолепный"], [14, " место"])); // Вывод: "Привет, великолепный Мир, место"

Функция multiInsert позволяет выполнять несколько вставок одновременно, при этом динамически корректируя индексы с учетом изменений в строке.

Проверка данных перед вставкой

Важно всегда проверять индекс и строки на корректность перед вставкой, чтобы избежать ошибок:

// Добавьте это внутри `splice` или другой функции вставки
index = Number(index);
if (!Number.isInteger(index) || index < 0 || index > str.length) {
    throw new Error('Индекс должен быть целым числом в пределах длины строки, иначе возникнут проблемы.');
}

Это поможет избежать нежелательных последствий и позволит сохранить ваш код безопасным.

Визуализация символов строки

Для наглядности представьте строку как поезд (🚂), где каждый вагон — это символ:

Исходная строка: 🚂🅰️🅱️🅲️🅳️🅴️

Ваша цель — вставить 'Х' на позицию 3:

Результат вставки: 🚂🅰️🅱️🆇🅲️🅳️🅴️

Пассажиры радуются новому удобству на своем пути.

Поиск и вставка

Функция insertAfter() с помощью indexOf() находит ключевое слово и вставляет строку непосредственно после него:

const insertAfter = (str, keyword, insert) => {
    const index = str.indexOf(keyword);
    if (index !== -1) {
        return str.splice(index + keyword.length, insert);
    }
    return str; // Если ключевое слово не найдено, возвращается исходная строка
};

console.log(insertAfter("Привет, Мир", "Привет,", " великолепный")); // Вывод: "Привет, великолепный Мир"

Стилизация вывода для большей наглядности

Стилизуйте вывод в консоль для большей наглядности, когда отлаживаете код или создаете учебные материалы:

console.log(`%c${swiftInsert("Привет, Мир", 7, " великолепный")}`, 'color: purple; font-weight: bold;');

Теперь ваш скромный console.log выглядит как настоящий стильный показ моды, полный цвета и выразительности.

Полезные материалы

1. String.prototype.slice() – JavaScript | MDN
2. Шаблонные строки (шаблонные литералы) – JavaScript | MDN
3. String.prototype.substring() – JavaScript | MDN
4. Строки – Современный учебник JavaScript
5. javascript – Как вставить элемент в массив по определённому индексу? – Stack Overflow