Литералы шаблонов — это новая функция, представленная в ES6, которая упрощает создание строк с динамическими значениями и выражениями. В этом чтении мы собираемся объяснить, как работают литералы шаблонов.
Что такое шаблонные литералы?
Литералы шаблонов — это альтернативный способ работы со строками, который был представлен в дополнении ES6 к языку JavaScript. Единственным способом создания строк в JavaScript до ES6 было разделение их одинарными или двойными кавычками:
'Hello, World!'
"Hello, World!"
Наряду с предыдущими способами построения строк, в ES6 в качестве разделителей используются символы обратной кавычки. В приведенном ниже фрагменте кода у нас есть пример строки шаблона, также известной как литерал шаблона.
`Hello, World!`
Примечание. На большинстве клавиатур обратная кавычка может располагаться над клавишей TAB, слева от клавиши с цифрой 1.
Различия между шаблоном и обычной строкой
Есть несколько способов, которыми строка шаблона отличается от обычной строки.
- Во-первых, он допускает переменную интерполяцию:
let greet = "Hello";
let place = "World";
console.log(`${greet} ${place} !`) // Hello World !
Использование литералов шаблонов позволяет программистам вставлять переменные непосредственно между обратными кавычками, без необходимости использовать оператор + и одинарные или двойные кавычки для отделения строковых литералов от переменных. Другими словами, в ES5 приведенный выше пример нужно было бы написать следующим образом:
var greet = "Hello";
var place = "World";
console.log(greet + " " + place + "!");
- Помимо интерполяции переменных, строки шаблона могут занимать несколько строк.
Например, это совершенно хороший синтаксис:
Обратите внимание, что это невозможно сделать с помощью строковых литералов (то есть строк, заключенных в одинарные или двойные кавычки):
"Hello,
World"
Приведенный выше код при запуске выдает синтаксическую ошибку.
Проще говоря, литералы шаблонов допускают многострочные строки, что просто невозможно со строковыми литералами.
- Кроме того, поскольку литералы шаблонов позволяют вычислять выражения, в эти литералы можно интерполировать переменные. Другими словами, это:
console.log(`${1 + 1 + 1 + 1 + 1} stars!`)
В приведенном выше примере в консоли будет отображаться следующая строка: 5 stars!
Это открывает множество возможностей. Например, возможно вычисление троичного выражения внутри литерала шаблона. Некоторые дополнительные варианты использования литералов шаблонов — это вложенные литералы шаблонов и шаблоны с тегами. Однако они немного сложнее и выходят за рамки этого чтения.
Я был бы признателен услышать от вас, если у вас есть какие-либо комментарии! Смело подключайтесь на LinkedIn.
Спасибо за чтение!
