Шаблонные строки

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

const firstName = "Анна";
const age = 25;
console.log("Меня зовут " + firstName + ", мой возраст: " + age + ".");

Есть способ проще — шаблонная строка (по-английски template literal). Это текст, записанный между обратными кавычками ` вместо обычных. В него можно вставить значение с помощью ${...}:

const firstName = "Анна";
const age = 25;
console.log(`Меня зовут ${firstName}, мой возраст: ${age}.`);

Оба примера выводят:

Меня зовут Анна, мой возраст: 25.

JavaScript заменяет каждое ${...} значением, которое лежит внутри. Пробелы входят в текст, так что сразу видно, где они. Внутрь ${...} можно даже поместить вычисление:

const price = 120;
console.log(`Стоимость двух билетов: ${price * 2}`);

Это выведет:

Стоимость двух билетов: 240

Это работает только с обратными кавычками. В обычных кавычках ${...} — просто текст, и он выводится как есть:

const day = "понедельник";
console.log("Сегодня ${day}.");

Это выведет:

Сегодня ${day}.

Шаблонная строка — такая же строка, как любая другая, поэтому её можно сохранить в переменной.