JavaScript | Как вставить строку в строку?

JavaScript | Как вставить строку в строку?

Возможны всего 3 варианта, в какое место строки можно ВСТАВИТЬ другую строку:

    1. Вставить строку в начало
    2. Вставить строку в конец
    3. Вставить строку в середину

Предлагаю рассмотреть все три варианта вставки строк в строки. Начнём с самого простого

 

Как вставить строку в начало другой строки?

Есть две строки:

var s1 = "Java"
var s2 = "Script"

Мы хотим чтобы первая строка была в начале второй строки. Как это сделать? Есть два пути решения вопроса:

  1. Мы изменяем существующие значения переменных со строками
  2. Мы создаём новую переменную и не изменяем значения в старых переменных

Путь № 1 — изменяем существующие значения переменных со строками

Мы можем вставить первую строку в начало второй строки. При этом значение второй строки изменится навсегда. Мы будем использовать оператор знака плюс «+«. Когда мы работаем со строками, тогда знак плюс «+» выполняет функцию конкатенации (приклеивания), а не математического сложения. Наши строки слипнутся друг с другом.То есть одна последовательность символов соединится с другой последовательностью символов.

s2 = s1 + s2

Результат (вывод в консоль обновлённого значения переменной s2):

"JavaScript"
Вставили строку в начало другой строки - изменили значение - JavaScript
Вставили строку в начало другой строки — изменили значение — JavaScript

 

Путь № 2 — создаём новую переменную и не изменяем значения в старых переменных

Мы можем получить третью строку (новую), которая склеит две другие строки в нужном нам порядке:

var s3 = s1 + s2

Результат (вывод в консоль переменной s3):

"JavaScript"
Вставили строку в начало другой строки - не меняли значения - JavaScript
Вставили строку в начало другой строки — не меняли значения — JavaScript

Как вставить строку в конец другой строки?

Ситуация аналогична предыдущей. Только строки меняются местами в алгоритме.

Есть две строки:

var s1 = "Java"
var s2 = "Script"

Мы хотим чтобы вторая строка была в конце первой строки. Как это сделать?

 

Путь № 1

s1 = s1 + s2
Вставили строку в конец другой строки - изменили значение - JavaScript
Вставили строку в конец другой строки — изменили значение — JavaScript

или

s1 += s2
Вставили строку в конец другой строки - изменили значение - короткая запись JavaScript
Вставили строку в конец другой строки — изменили значение — короткая запись JavaScript

 

Путь № 2

Мы можем получить третью строку (новую), которая склеит две другие строки в нужном нам порядке:

var s3 = s1 + s2

Результат (вывод в консоль переменной s3):

"JavaScript"
Вставили строку в начало другой строки - не меняли значения - JavaScript
Вставили строку в начало другой строки — не меняли значения — JavaScript

 

Как вставить строку в середину другой строки?

Это самый интересный вариант добавления одной строки в другую строку. Он возможен только при помощи обратных кавычек «, которые дают строке возможность интеграции в неё переменных JavaScript. Переменные помещаются внутрь фигурных скобок, специальной экранирующей конструкции ${}

var str1 = 'новая тема'
var str2 = `Сегодня ${str1} по JavaScript.`

Давайте посмотрим на результат работы вычисления значения второй строки:

Вставили строку в середину другой строки - вычислили значение - JavaScript
Вставили строку в середину другой строки — вычислили значение — JavaScript

В переменной str2 сейчас находится строковое значение «Сегодня новая тема по JavaScript.»

Мы один раз вычислили значение переменной str2, когда объявили её. Если мы сейчас изменим значение переменной str1 и просто обратимся ко второй, то вторая строка будет с тем же содержимым, что была в первом объявлении.

Обратились - не вызвали - JavaScript
Обратились — не вызвали — JavaScript

 

Итог

Строки вставляют в другие строки для того, чтобы создавать уникальные строковые значения.  Например, когда нужно проставлять текущие даты в документах или когда нужно подставлять ФИО человека.

Задача вставки строк в строки обычно используется в функциях алгоритмов генерации строк. Самым ярким примером можно выделить генерацию HTML-разметки из массивов или объектов JavaScript.

 

Информационные ссылки

JavaScript | Строки (String)

Стандарт ECMAScript — Раздел «22.1 String Objects» — https://tc39.es/ecma262/#sec-string-objects

Стандарт ECMAScript — Раздел «13.8.1 The Addition Operator ( + )» — https://tc39.es/ecma262/#sec-addition-operator-plus