Кто они такие?
Литералы шаблонов — это просто еще один способ создания строки в Javascript. Вместо одинарных или двойных кавычек разработчики могут использовать знаки ударения или обратные кавычки (``).
Что в них такого замечательного?
Литералы шаблонов улучшают читабельность и структуру строк. Использование кавычек означало, что вам нужно было остановить свою строку, объединить ее в строку, чтобы добавить переменную, после чего вам пришлось перезапустить свою строку. Не забудьте добавить эти пробелы между вашими переменными. Да, это хлопотно.
Когда мы используем обратные галочки, все, что мы передаем, отправляется функции, которая сделает всю конкатенацию за нас. Это означает меньше времени на отладку форматирования строки. Мы получаем новый синтаксис с ${}, который позволяет нам передавать переменные для интерполяции в строку.
Еще одна прелесть заключается в том, что вы можете создавать многострочные строки без использования escape-символа новой строки (\n). Это связано с тем, что символ новой строки встроен в литералы шаблонов.
Используйте Javascript внутри литерала шаблона!
Шаблонные литералы — это нечто большее, чем просто создание многострочных строк и интерполяционных переменных. Вы можете делать что угодно с Javascript внутри литерала шаблона, например запускать функцию или вкладывать больше литералов шаблона.
Зацикливание
Вы хотите создать список продуктов питания из уже существующего массива продуктов питания, вы можете сделать это следующим образом:
Если мы еще больше разберем этот пример, вы увидите, что мы не только зациклились на нашем массиве еды, но и создали HTML-элементы. Если вы знакомы с React, это может выглядеть примерно так:
Повышение уровня: помеченные литералы шаблонов
Вы можете передавать литералы шаблонов в функции. Вот как это выглядит:
Как это работает, когда вы передаете литерал шаблона в функцию, функция разбивает его на несколько разных параметров. Первый представляет собой массив строк. Раньше это было бы «Меня зовут». Тогда каждая переменная, обернутая в ${}, будет действовать как дополнительный параметр.
Когда все сказано и сделано, print будет присвоено все, что возвращается функцией doSomething, это не обязательно должна быть строка. Возможности безграничны для того, что вы можете сделать с теговым литералом шаблона, но в этом суть того, как они работают.
Заключительные слова
Используйте литералы шаблонов. Они помогут уменьшить количество отслеживаемых ошибок и предоставят некоторые интересные возможности с возможностью прямого запуска Javascript и передачи их в функции.
