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

Question

Accepted Answer

**Template literals** используют обратные кавычки (`` ` ``) и добавляют два вещи, которых нет в обычных кавычках: **интерполяцию** выражений и **многострочные** строки. ```js const name = "Ann"; const count = 3; // interpolation: ${expression} const msg = `Hi ${name}, you have ${count} new messages`; // any expression works, not just variables const total = `Total: ${(count * 1.1).toFixed(2)}`; // multi-line — preserves the line breaks const html = `

${name}

`; ``` Перед template literals вы писали бы `"Hi " + name + ", " + count + ...` — многословно и подвержено ошибкам. Интерполяция гораздо более читаема. ## Помеченные шаблоны (продвинутое) Функция, помещённая перед обратными кавычками, получает части строки и интерполированные значения, позволяя ей их обработать: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` Это поддерживает библиотеки вроде **styled-components** и помощники безопасного экранирования SQL/HTML. ## Почему это важно Template literals — стандартный способ построения строк в наше время — читаемая интерполяция, простой многострочный текст и hook (помеченные шаблоны) для DSL-ов.