JavaScript · строки

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

Шаблонная строка записывается в обратных кавычках и позволяет вставлять значения прямо в текст. Она удобнее длинного сложения строк через оператор плюс.

Интерполяция

Выражение внутри ${...} вычисляется и превращается в часть строки. Можно подставлять переменные, арифметику и вызовы функций.

const name = 'Анна';
const lessons = 4;
const message = `Привет, ${name}! Пройдено уроков: ${lessons}.`;

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

Переносы внутри обратных кавычек сохраняются. Это удобно для небольших шаблонов, но отступы исходного кода тоже попадут в результат.

const text = `Первая строка
Вторая строка`;

Разметка из данных

Шаблонные строки часто применяют для формирования фрагмента HTML. Не подставляй непроверенный пользовательский текст в innerHTML: это может открыть возможность внедрения кода.

const card = `<article><h2>${title}</h2><p>${description}</p></article>`;

Частые ошибки

• Использовать обычные кавычки с ${}.
• Случайные пробелы в многострочном тексте.
• Непроверенные данные в innerHTML.
• Слишком сложная логика внутри строки.

Связанные темы

Строки · Объекты