Что такое шаблонные литералы?

Шаблонные литералы (Template Literals) в JavaScript

Шаблонные литералы — это современный синтаксис строк в JavaScript, представленный в стандарте ES6 (ES2015). Они представляют собой расширенную функциональность по сравнению с обычными строковыми литералами, заключёнными в одинарные или двойные кавычки. Главное отличие — использование обратных кавычек (backticks) `.

Ключевые особенности и возможности

1. Многострочные строки

Шаблонные литералы позволяют создавать строки, содержащие переносы строк, без использования специальных символов, таких как \n.

// Обычная строка
const oldString = 'Первая строка\nВторая строка\nТретья строка';

// Шаблонный литерал
const newString = `Первая строка
Вторая строка
Третья строка`;

console.log(newString);
// Вывод сохранит все переносы

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

Одна из самых мощных возможностей — встраивание выражений непосредственно в строку с помощью синтаксиса ${expression}.

const name = 'Анна';
const age = 28;
const profession = 'Frontend Developer';

// Старый подход (конкатенация)
const oldIntro = 'Меня зовут ' + name + ', мне ' + age + ' лет, я ' + profession + '.';

// Новый подход (интерполяция)
const newIntro = `Меня зовут ${name}, мне ${age} лет, я ${profession}.`;

// Выражения могут быть любыми
const calculation = `Сумма: ${5 + 3}, Квадрат 4: ${4 ** 2}`;
console.log(calculation); // "Сумма: 8, Квадрат 4: 16"

3. Теговые шаблоны (Tagged Templates)

Это расширенная функциональность, позволяющая обрабатывать шаблонные литералы с помощью специальной функции-тега.

// Функция-тег получает части строки и значения выражений
function highlight(strings, ...values) {
    return strings.reduce((result, str, i) => {
        const value = values[i] ? `<strong>${values[i]}</strong>` : '';
        return result + str + value;
    }, '');
}

const userName = 'Иван';
const userScore = 95;

const result = highlight`Пользователь ${userName} набрал ${userScore} баллов.`;
console.log(result);
// "Пользователь <strong>Иван</strong> набрал <strong>95</strong> баллов."

Практические применения

Динамическое создание HTML

const items = ['React', 'Vue', 'Angular'];
const html = `
    <ul class="framework-list">
        ${items.map(item => `<li>${item}</li>`).join('')}
    </ul>
`;

SQL-запросы и шаблоны

const tableName = 'users';
const id = 42;
const query = `
    SELECT * FROM ${tableName}
    WHERE id = ${id}
    LIMIT 1
`;

Стилизованные компоненты (в CSS-in-JS)

const Button = styled.button`
    background: ${props => props.primary ? 'blue' : 'gray'};
    color: white;
    padding: ${props => props.large ? '16px' : '8px'};
    border-radius: 4px;
`;

Отличия от обычных строк

• Безопасность: При интерполяции значения автоматически преобразуются в строки, что предотвращает многие ошибки
• Производительность: Современные движки JavaScript оптимизируют шаблонные литералы
• Читаемость: Код становится более чистым и понятным
• Гибкость: Поддержка вложенных шаблонов и сложных выражений

Особенности использования

1. Экранирование: Для вывода символа ${ необходимо использовать экранирование: `Стоимость: \${100}`
2. Вложенные шаблоны: Шаблонные литералы могут содержать другие шаблонные литералы
3. Методы строк: Со всеми шаблонными литералами можно использовать стандартные методы строк (includes(), slice(), и т.д.)

const price = 99.99;
const currency = 'руб';
const message = `Цена: ${`${price.toFixed(2)} ${currency}`}`;
console.log(message); // "Цена: 99.99 руб"

Шаблонные литералы значительно улучшили работу со строками в JavaScript, сделав код более выразительным, поддерживаемым и менее подверженным ошибкам, особенно при работе с динамическим контентом, HTML-шаблонами и многострочными строками. Они стали неотъемлемой частью современной Frontend-разработки и активно используются во фреймворках и библиотеках.