Шаблонные строки в JavaScript: Template Literals с примерами для начинающих

Поисковый запрос, под который написана эта статья: шаблонные строки JavaScript. Тема кажется простой, но именно template literals часто делают код заметно чище: вместо сложения строк через + вы используете обратные кавычки, вставляете переменные через ${...} и спокойно пишете многострочный текст.

Что такое шаблонные строки в JavaScript

Шаблонные строки — это строки, заключённые не в одинарные или двойные кавычки, а в обратные кавычки: `. На английском их называют template literals.

Самый простой пример:

const name = 'Анна';
const message = `Привет, ${name}!`;

console.log(message); // Привет, Анна!

Главная идея: внутри такой строки можно использовать выражения в конструкции ${...}. Это называется интерполяцией.

Зачем нужны template literals

До появления шаблонных строк разработчики часто писали так:

const user = 'Иван';
const age = 25;

const text = 'Пользователь: ' + user + ', возраст: ' + age;
console.log(text);

С template literals тот же код читается проще:

const user = 'Иван';
const age = 25;

const text = `Пользователь: ${user}, возраст: ${age}`;
console.log(text);

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

Интерполяция переменных и выражений

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

const price = 1200;
const count = 3;

console.log(`Итого: ${price * count} руб.`);
// Итого: 3600 руб.

Пример с функцией:

function formatName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

const greeting = `Здравствуйте, ${formatName('Мария', 'Соколова')}!`;
console.log(greeting);

Пример с условием:

const isAdmin = false;

const label = `Роль: ${isAdmin ? 'администратор' : 'пользователь'}`;
console.log(label);

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

Многострочные строки без \n

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

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

console.log(text);

Это удобно для сообщений, писем, SQL-подобных строк, фрагментов HTML и других случаев, где важна читаемость.

Для сравнения, без template literals пришлось бы писать так:

const text = 'Первая строка\n' +
  'Вторая строка\n' +
  'Третья строка';

Создание HTML-разметки через шаблонные строки

Один из самых частых практических сценариев — генерация небольшого HTML-фрагмента на основе данных.

const product = {
  title: 'Клавиатура',
  price: 3500,
  inStock: true
};

const html = `
  <article class="product">
    <h3>${product.title}</h3>
    <p>Цена: ${product.price} руб.</p>
    <p>${product.inStock ? 'В наличии' : 'Нет в наличии'}</p>
  </article>
`;

document.body.insertAdjacentHTML('beforeend', html);

Это удобно, но есть важное правило безопасности: не вставляйте непроверенные пользовательские данные напрямую в HTML. Если значение пришло из формы или внешнего API, его нужно экранировать или вставлять через безопасные DOM-методы.

Пример: список товаров

Рассмотрим более прикладной пример. Есть массив товаров, нужно вывести список на страницу.

const products = [
  { title: 'Мышь', price: 1500 },
  { title: 'Монитор', price: 19000 },
  { title: 'USB-C кабель', price: 700 }
];

const listHtml = `
  <ul class="products">
    ${products.map(product => `
      <li>${product.title} — ${product.price} руб.</li>
    `).join('')}
  </ul>
`;

document.body.insertAdjacentHTML('beforeend', listHtml);

Здесь важно обратить внимание на .join(''). Метод map возвращает массив строк, а join объединяет их в одну строку без запятых.

Tagged templates: продвинутый, но полезный приём

У шаблонных строк есть расширенный вариант — tagged templates, или тегированные шаблоны. Перед строкой можно поставить функцию, которая получит части строки и значения.

function highlight(strings, ...values) {
  return strings.reduce((result, str, index) => {
    const value = values[index] !== undefined ? `<b>${values[index]}</b>` : '';
    return result + str + value;
  }, '');
}

const name = 'Олег';
const score = 95;

const result = highlight`Студент ${name} набрал ${score} баллов.`;
console.log(result);
// Студент <b>Олег</b> набрал <b>95</b> баллов.

Новичкам не обязательно сразу активно использовать tagged templates, но полезно знать, что такой механизм существует. Он применяется в библиотеках для стилизации, шаблонизации и безопасной обработки строк.

Частые ошибки новичков

• Используют обычные кавычки вместо обратных. Интерполяция работает только с `...`, а не с '...' или "...".
• Забывают фигурные скобки. Нужно писать ${name}, а не $name.
• Пишут слишком сложные выражения внутри строки. Это ухудшает читаемость.
• Вставляют пользовательский ввод в HTML без защиты. Это может привести к XSS-уязвимостям.

Пример ошибки:

const name = 'Саша';

console.log('Привет, ${name}!');
// Привет, ${name}!

Правильно:

const name = 'Саша';

console.log(`Привет, ${name}!`);
// Привет, Саша!

Практические рекомендации

• Используйте шаблонные строки, когда нужно вставить переменные в текст.
• Для длинных сообщений и HTML-фрагментов template literals обычно удобнее конкатенации.
• Если выражение внутри ${...} занимает больше одной строки, вынесите его в переменную.
• Не используйте шаблонные строки просто ради моды: для простого текста 'Обычная строка' тоже подходит.
• При генерации HTML проверяйте и экранируйте данные, полученные от пользователя.

Мини-задача для закрепления

Попробуйте написать функцию, которая принимает объект пользователя и возвращает красивую строку профиля.

function getUserProfile(user) {
  return `Имя: ${user.name}
Возраст: ${user.age}
Город: ${user.city}`;
}

const profile = getUserProfile({
  name: 'Елена',
  age: 28,
  city: 'Казань'
});

console.log(profile);

Такие небольшие упражнения хорошо прокачивают базовый синтаксис. Если вы хотите изучать JavaScript системно — от переменных и функций до DOM, асинхронности и реальных проектов — посмотрите курс «JavaScript с Нуля до Гуру 2.0» с пошаговой практикой.

Итоги

Шаблонные строки в JavaScript — это удобный способ создавать читаемые строки с переменными, выражениями и переносами строк. Используйте обратные кавычки, вставляйте значения через ${...}, не перегружайте шаблоны сложной логикой и помните о безопасности при работе с HTML. Освоив template literals, вы сразу начнёте писать более аккуратный и понятный JavaScript-код.