JS:

Шаблонные литералы — это не только ${переменная}, но и нормальная многострочность без \n и бесконечных плюсов.

Раньше:

const msg = "Привет, " + name + "!\n" +
"Заказ №" + id + " готов.";

Теперь:

const msg = Привет, ${name}! Заказ №${id} готов.;

Обратные кавычки сохраняют переносы строк как в редакторе. Для писем, логов, уведомлений и небольших HTML-фрагментов это просто спасение.

В реальных проектах я часто вижу, как джуны тащат конкатенацию из старых примеров. Но шаблонные литералы — это стандарт с 2015 года, и их можно смело использовать даже без сборки и танцев с бубном.

Но есть два подводных камня.

1. Лишние отступы из кода попадут в строку. Если шаблон выровнен по красоте, эти пробелы окажутся в тексте. Для писем и разметки это часто критично.

2. Если внутрь ${} попадает пользовательский ввод и строка идёт в HTML, шаблон не защищает от XSS. Экранируйте данные.

Отдельная история — тегированные шаблоны. Это когда перед обратными кавычками ставят функцию, например, чтобы автоматически экранировать значения. Для простых задач это не нужно, но сам механизм показывает, что литералы можно расширять.

Совет из практики

Если шаблон уходит в innerHTML, вынесите экранирование в отдельную функцию и оборачивайте все пользовательские значения. Это спасёт от кучи глупых багов.

Практика: видите склейку через + и \n — предлагайте рефакторинг на шаблонные литералы. Код становится короче, а читать его приятнее. Для больших шаблонов лучше шаблонизатор, но для простых задач литералы идеальны.

Вот так. Идем кодить дальше! 🚀