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

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

Подстановка значения

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

const name = 'Анна';
 
console.log(`Привет, ${name}!`); // Привет, Анна!

Без шаблона пришлось бы склеивать части плюсом: 'Привет, ' + name + '!'. Чем больше частей, тем труднее читать такой код.

Выражения

В ${...} можно записать любое выражение — вычисление, вызов функции или метода:

const price = 12;
const count = 3;
 
console.log(`Итого: ${price * count} €`); // Итого: 36 €
console.log(`Имя: ${'олег'.toUpperCase()}`); // Имя: ОЛЕГ

Выражение — это любой кусок кода, который даёт значение.

Многострочный текст

Перенос строки внутри обратных кавычек сохраняется в результате. Обычные кавычки так не умеют — в них перенос пришлось бы записывать как \n:

const message = `Заказ принят.
Ожидайте доставку.`;
 
console.log(message);
// Заказ принят.
// Ожидайте доставку.

Условие внутри шаблона

Тернарный оператор условие ? да : нет подставляет один из двух вариантов текста. Это удобно для коротких развилок:

const count = 1;
 
console.log(`В корзине ${count} ${count === 1 ? 'товар' : 'товара'}`); // В корзине 1 товар

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

Шаблон из массива

Внутри ${...} можно вызвать map() и join() — так из массива собирают список или кусок разметки:

const items = ['чай', 'кофе'];
 
const list = items.map((item) => `- ${item}`).join('\n');
 
console.log(list);
// - чай
// - кофе

Теговые шаблоны

Если перед шаблоном написать имя функции, она получит части текста и подставляемые значения отдельно. Такие теговые шаблоны используют библиотеки, например для безопасной сборки запросов. Встроенный тег String.raw оставляет обратные слеши как есть:

console.log(String.raw`C:\new\table`); // C:\new\table

Частая ошибка

Подстановка ${...} работает только в обратных кавычках. В одинарных или двойных кавычках она остаётся обычным текстом:

const name = 'Анна';
 
console.log('Привет, ${name}'); // Привет, ${name}
console.log(`Привет, ${name}`); // Привет, Анна