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

Представьте бланк письма, где текст уже напечатан, а в пропуски вписывают имя и сумму: «Здравствуйте, ___! К оплате ___.» Текст пишут один раз, а меняются только вставки.

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

const name = "Ann";
const age = 30;

console.log("Hi, " + name + ". You are " + age + ".");
console.log(`Hi, ${name}. You are ${age}.`);
// Hi, Ann. You are 30.
// Hi, Ann. You are 30.

Обе команды console.log печатают одно и то же. Во второй команде текст записан в обратных кавычках — это шаблонная строка. Она и есть бланк: текст в ней пишут целиком, а значения вставляют прямо на нужное место.

Обратная кавычка на большинстве клавиатур стоит на клавише слева от 1, в английской раскладке.

Строку без вставок в курсе по-прежнему пишут в двойных кавычках, а обратные берут, когда в текст подставляют значения.

Подстановка ${}

Запись ${…} внутри шаблонной строки называют подстановкой. Встретив её, JavaScript делает три шага:

1. Вычисляет выражение в фигурных скобках.
2. Превращает результат в строку.
3. Вставляет эту строку в текст на место ${…}.

Выражение может быть любым:

• имя переменной;
• арифметика;
• сравнение;
• вызов функции.

Подстановок в одной строке может быть сколько угодно. Давайте посмотрим на три из них:

const price = 5;
const count = 3;
console.log(`Total: ${price * count}`); // Total: 15
console.log(`Many: ${count > 2}`); // Many: true
console.log(`Upper: ${name.toUpperCase()}`); // Upper: ANN

1. ${price * count} сначала умножает 5 на 3, и в текст попадает 15.
2. ${count > 2} вставляет результат сравнения — true.
3. ${name.toUpperCase()} вызывает метод у строки "Ann" из первого примера, и в текст попадает ANN.

Здесь аналогия с бланком перестаёт работать. В пропуск бланка вписывают готовый текст, а в ${} пишут выражение, и JavaScript сначала его вычисляет.

Какое значение попадает в текст

Значение превращается в строку так же, как через String:

• число 15 даёт "15";
• true даёт "true";
• объявленная переменная, в которой нет значения, вставится словом undefined;
• null вставится словом null.

Результат шаблонной строки — обычная строка типа string.

Знак $ без фигурной скобки после него — обычный символ: `Price: $5` печатает Price: $5. Двойные и одинарные кавычки внутри обратных тоже остаются обычными символами, поэтому `Say "hi"` — корректная строка.

Несколько строк

Шаблонная строка может занимать несколько строк кода. Перенос строки остаётся в тексте, и console.log печатает его как перенос:

const lines = `first
second`;
console.log(lines);
// first
// second

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

В двойных или одинарных кавычках перенос посреди строки — синтаксическая ошибка. Node.js и Chrome называют её SyntaxError: Invalid or unexpected token.

На собеседовании новичка часто спрашивают, чем обратные кавычки отличаются от обычных. Ответ состоит из трёх частей:

• в обратных кавычках работают подстановки ${};
• перенос строки можно писать прямо в тексте;
• результат — та же строка типа string.

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

Подстановку написали в обычных двойных кавычках:

const user = "Ann";
console.log("Hello, ${user}"); // ✗

Ошибки нет: программа печатает Hello, ${user}. Знаки $, { и } остались в тексте как есть. Подстановка работает только между обратными кавычками, а в двойных и одинарных ${ — обычные символы. Замените кавычки: `Hello, ${user}` печатает Hello, Ann.

Главное

• Шаблонная строка пишется в обратных кавычках, а ${выражение} вставляет в текст значение выражения.
• Значение подстановки превращается в строку, как через String, и результат — обычная строка.
• Перенос строки внутри обратных кавычек попадает в текст, а в обычных кавычках это синтаксическая ошибка.
• В двойных и одинарных кавычках ${…} остаётся обычными символами.