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

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

В JavaScript три вида кавычек. Двойные и одинарные — близнецы: обе делают обычную строку, и разница между ними только в том, какую кавычку внутри не придётся экранировать. Третья, обратная кавычка `, — другой зверь. Строка в обратных кавычках называется шаблонной и умеет два трюка: подставлять значения в текст и переносить строки без спецсимволов.

Самое заметное отличие видно сразу: внутри шаблонной строки конструкция ${...} вычисляется, а в обычной остаётся просто набором символов.

js

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

Сначала предположите, что выведет код

Кавычки	Подстановка ${...}	Перенос строки внутри
Двойные и одинарные	нет, остаётся текстом	нет, нужен \n
Обратные (шаблонные)	да, вычисляется	да, просто перенос

Обратная кавычка живёт слева от единицы — там же, где на русской раскладке «ё». В русской раскладке она не набирается, нужно переключиться на английскую. Клавишу стоит запомнить: шаблонные строки встречаются едва ли не в каждом файле.

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

Сравните со склейкой плюсами. Результат тот же, но в склейке пробелы приходится держать в голове: потерял один — и слова слиплись.

js

const user = "Аня";
const city = "Перми";
console.log("Привет, " + user + "! Как погода в " + city + "?");
console.log(`Привет, ${user}! Как погода в ${city}?`);

Сначала предположите, что выведет код

Приведение к строке происходит автоматически — и не всегда так, как хочется. Массив склеится через запятую, а обычный объект превратится в [object Object]. Это не ошибка шаблона, это общее правило приведения типов, просто здесь оно особенно заметно.

js

const items = ["чай", "мёд"];
console.log(`Список: ${items}`);
console.log(`Объект: ${{ a: 1 }}`);

Сначала предположите, что выведет код

В фигурных скобках живёт не «имя переменной», а выражение — всё, что имеет значение: арифметика, обращение к свойству, вызов функции, тернарный оператор, ещё одна шаблонная строка.

js

const price = 250;
const count = 3;
const promo = false;
console.log(`Итого: ${price * count} руб.`);
console.log(`Доставка: ${promo ? "бесплатно" : "150 руб."}`);

Сначала предположите, что выведет код

А вот инструкции — if, for, объявление переменной — туда не поместятся: у них нет значения, которое можно вставить в текст. Условие в шаблоне пишут тернарным оператором, как выше. И помните: подстановка вычисляется в момент создания строки, а не тогда, когда строку выведут.

js

const word = "шаблон";
console.log(`${word.toUpperCase()} длиной ${word.length}`);

Сначала предположите, что выведет код

В обычной строке перенос приходится изображать спецсимволом \n, а длинный текст — собирать из кусков. В шаблонной строке перенос пишется переносом: нажали Enter — он попал в текст. Получается ровно та же строка, просто записанная по-человечески.

js

const oldWay = "Первая\nВторая";
const newWay = `Первая
Вторая`;
console.log(oldWay === newWay);
console.log(newWay);

Сначала предположите, что выведет код

Шаблон сохраняет всё, что стоит между кавычками, — в том числе пробелы, которыми вы красиво выровняли код внутри функции. Строка получится с лишними отступами, и в вёрстке или в письме это будет видно.

js

function wrap(x) {
  return `итого:
    ${x}`;
}
console.log(wrap(7).includes("    7"));

Сначала предположите, что выведет код

Раз внутри ${...} допустимо любое выражение, туда можно положить ещё одну шаблонную строку. Кавычки считаются парами, поэтому вложение читается однозначно — хотя глазами первые пару раз непривычно.

js

const n = 0;
console.log(`Корзина: ${n ? `${n} шт.` : `пусто`}`);

Сначала предположите, что выведет код

js

const items = ["чай", "мёд"];
console.log(`Купить:
${items.map((item) => `- ${item}`).join("\n")}`);

Сначала предположите, что выведет код

Два уровня — нормально, три — уже ребус. Если внутри подстановки начинается логика, вынесите её в переменную или отдельную функцию: шаблон должен оставаться похожим на текст, иначе он теряет единственное своё преимущество перед склейкой.

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

js

function tag(strings, ...values) {
  return `кусков: ${strings.length}, подстановок: ${values.length}`;
}
console.log(tag`У ${5} яблок и ${2} груши`);

Сначала предположите, что выведет код

Кусков всегда на один больше, чем подстановок, — крайние могут быть пустыми. На тегах строят экранирование HTML, локализацию, подсветку SQL. В повседневном коде вы будете их скорее читать, чем писать, но один встроенный тег пригодится сразу.

Обычный шаблон обрабатывает escape-последовательности: \n становится переносом строки, \t — табуляцией. Тег String.raw отдаёт текст без этой обработки — удобно для путей Windows и регулярных выражений.

js

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

Сначала предположите, что выведет код

Обратные кавычки создают шаблонную строку: она подставляет значения и хранит переносы строк.
Внутри ${...} допустимо любое выражение — арифметика, вызов, тернарник; инструкции вроде if — нет.
Результат подстановки приводится к строке автоматически: массив станет списком через запятую, объект — [object Object].
Перенос строки пишется переносом, но вместе с ним в строку попадают и отступы, которыми выровнен код.
Имя функции перед кавычкой превращает шаблон в тегированный: функция получает куски текста и значения по отдельности.

1/3Что выведет console.log("Сумма: ${2 + 2}") — с обычными двойными кавычками?

2/3Какое выражение нельзя написать внутри ${...}?

3/3Тег вызван так: tag`${1}${2}`. Сколько элементов будет в первом аргументе — массиве статических кусков?

Собрать фразу шаблоном

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

js

const user = "Игорь";
const age = 30;
console.log("Меня зовут " + user + ", мне " + age + " лет.");

Сначала предположите, что выведет код

Все плюсы и краевые пробелы исчезают, текст пишется как текст:

jsлистинг · не запускается

const user = "Игорь";
const age = 30;
console.log(`Меня зовут ${user}, мне ${age} лет.`); // Меня зовут Игорь, мне 30 лет.

const user = "Игорь";
const age = 30;
console.log(`Меня зовут ${user}, мне ${age} лет.`); // Меня зовут Игорь, мне 30 лет.

Обратите внимание на пробелы: в шаблоне они стоят там же, где в готовой фразе, и видны глазами. В склейке их легко потерять — и получить «Меня зовутИгорь».

Ценник с условием

Напишите функцию card(title, price), которая возвращает строку вида «Чай — 250 руб.», а при нулевой цене — «Вода — бесплатно». Условие поместите прямо в подстановку, без if.

js

function card(title, price) {
  // ваш код
}
console.log(card("Чай", 250)); // Чай — 250 руб.
console.log(card("Вода", 0)); // Вода — бесплатно

Сначала предположите, что выведет код

Внутри подстановки — тернарный оператор, а в его ветке — ещё один шаблон:

jsлистинг · не запускается

function card(title, price) {
  return `${title} — ${price ? `${price} руб.` : `бесплатно`}`;
}
console.log(card("Чай", 250)); // Чай — 250 руб.
console.log(card("Вода", 0)); // Вода — бесплатно

function card(title, price) {
  return `${title} — ${price ? `${price} руб.` : `бесплатно`}`;
}
console.log(card("Чай", 250)); // Чай — 250 руб.
console.log(card("Вода", 0)); // Вода — бесплатно

Ноль здесь работает как ложное значение, поэтому проверки price ? достаточно. Если же ценой может быть null или undefined, а ноль надо показывать как «0 руб.», условие пишут явно: price > 0.

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

Видеоразбор темы за 5–7 минут

Обратные кавычкитретий вид кавычек в JavaScript

Подстановка ${...}значение выражения прямо в тексте

Внутри — выражение, а не только имяарифметика, вызовы и тернарный оператор

Многострочность без \nперенос строки пишется переносом строки

Вложенные шаблонышаблон внутри подстановки другого шаблона

Тегированные шаблоныфункция перед обратной кавычкой

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Собрать фразу шаблоном

Ценник с условием