JavaScript | Как вставить переменную в строку?

У нас есть строка:

var stroka = "Привет! Как твои дела?"

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

В JavaScript существует 3 способа объявления строк:

Через двойные кавычки — "
Через одинарные кавычки — '
Через обратные кавычки — `

Когда мы объявляем строку через обратные кавычки (``), тогда у нас появляется возможность добавлять в строку переменные при помощи экранирующей конструкции ${}.

${}

Символ доллара $ будет восприниматься анализатором кода JavaScript, как «управляющий символ вставки переменной» только тогда, когда после него будет установлена открывающая фигурная скобка {.

После открывающей фигурной скобки { должна последовать наша переменная со строковым значением. После того как мы напишем нашу переменную, тогда нужно будет установить закрывающую фигурную скобку }.

Вся эта конструкция прописывается внутри нужной нам строки, где требуется вставка другой строки.

Пример вставки одной строки из одной переменной

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

var efim = "Ефим"

Теперь мы хотим подставить значение переменной efim в переменную stroka. Допустим мы хотим приветствовать пользователя по имени на нашем сайте, чтобы он понимал, что его любят и ждут. Делается это так:

var stroka = `Привет ${efim}! Как твои дела?`

Смотрим вывод в консоль браузера:

Добавили переменную в строку - JavaScript — Добавили переменную в строку — JavaScript

Видео

Пример вставки двух строк из двух переменных

У нас есть строки с дополнительными данными:

var v1 = "красные"

var v2 = "яблоки"

У нас есть «шаблонная» строка для вставки:

var s1 = "Водитель Вася привёз"

Вставку переменных в этом шаблоне мы можем сделать двумя способами

Способ № 1 — создание двух конструкций вставки в шаблонной строке

var s1 = `Водитель Вася привёз ${v1} ${v2}`

В этом случае внутри шаблонной строки мы создали две конструкции вставки. В каждую конструкцию мы поместили разные переменные.

В результате в переменной s1 будет храниться строка.

"Водитель Вася привёз красные яблоки"

Две конструкции вставки для двух переменных - JavaScript — Две конструкции вставки для двух переменных — JavaScript

Обратите внимание! Между конструкциями вставки существует пробел. В итоговой строке этот пробел будет также учтён.

Способ № 2 — создание одной конструкции вставки в шаблонной строке

Поведение переменных внутри блока вставки точно такое же, как если бы мы писали выражение в коде программы. Действуют все правила синтаксиса JavaScript. Что это значит?

Мы не можем через пробел перечислить нужные нам переменные для вставки. Это вызовет синтаксическую ошибку.

var s2 = `Водитель Вася привёз ${v1 v2}`

Синтаксическая ошибка при перечислении переменных через пробел - JavaScript — Синтаксическая ошибка при перечислении переменных через пробел — JavaScript

Мы не можем через запятую перечислить имена переменных для вставки, т. к. это приведёт к вставке только последней введённой переменной в блок вставки.

var s2 = `Водитель Вася привёз ${v1, v2}`

Перечисление переменных через запятую в блоке вставки строки - JavaScript — Перечисление переменных через запятую в блоке вставки строки — JavaScript

Чтобы решить задачу, мы можем воспользоваться конкатенацией строк внутри блока вставки. Это склеит две строки без разделителя в виде пробела.

var s2 = `Водитель Вася привёз ${v1 + v2}`

Склеили строки внутри блока вставки без пробела - JavaScript — Склеили строки внутри блока вставки без пробела — JavaScript

Но тогда нужно дополнять конструкцию. Мы можем внутри блока вставки объявить ещё одну строку литеральным способом.

var s2 = `Водитель Вася привёз ${v1 + " " + v2}`

Объявили строку внутри блока вставки строк - JavaScript — Объявили строку внутри блока вставки строк — JavaScript

И вот на этом этапе должны появиться вопросы. Например, а можно ли в блоке вставки создать ещё один блок вставки?

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

JavaScript | Строки (String)

Стандарт ECMAScript — Раздел «12.8.6 Template Literal Lexical Components» — Лексические компоненты шаблонного литерала — https://tc39.es/ecma262/#sec-template-literal-lexical-components