Вебсправочник
Справочник JavaScript

Шаблонные строки: текст с выражениями

Как собирать сообщения и многострочный текст без длинной цепочки сложения строк.

Основная идея

Шаблонная строка заключается в обратные кавычки и допускает вставку выражений через ${…}. Это удобно для сообщений интерфейса и читаемых многострочных фрагментов. Выражение вычисляется, а его значение превращается в часть строки.

Шаблонная строка не экранирует HTML автоматически. Если результат содержит пользовательский текст, выводите его через textContent или другой безопасный текстовый механизм. Удобная интерполяция не делает строку безопасной для innerHTML.

Пример JavaScript

const title = "CSS";
const count = 4;
const message = `Раздел: ${title}. Материалов: ${count}.`;
console.log(message);

В результате получается обычная строка с подставленными значениями. Её можно передать функции или показать как текст.

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

Не вставляйте непроверенное значение непосредственно в HTML-шаблон, который затем исполняется браузером как разметка.

Самостоятельная проверка

Добавьте перевод строки внутри обратных кавычек. Затем покажите результат через textContent в собственном элементе страницы.

Код здесь показан для изучения. Встроенная песочница сайта выполняет только HTML/CSS. JavaScript проверяйте в собственном учебном файле или консоли своего тестового проекта; не вставляйте непонятный код на страницах с личными данными.

Следующие темы: работа с DOM, строковые значения.

Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.