Вступление

В этой статье мы поговорим о шаблонных литералах JavaScript . До спецификации ES2015 они также назывались шаблонными строками.

Помимо этого, мы также собираемся рассказать, что такое тегированные шаблонные литералы и как мы можем использовать их с обычными шаблонными литералами.

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

Шаблонные литералы были введены в JavaScript ES2015 (ES6) для более простой и удобной обработки строк.

Это позволяет нам встраивать выражения (интерполяцию выражений) в объявление строки, обрабатывать многострочные строки и создавать «тегированные шаблонные литералы», которые являются более продвинутой формой шаблонных литералов.

Старый способ обработки строковых шаблонов

До ES6 для объявления строки использовались одинарные или двойные кавычки. Рассмотрим следующий пример:

 let x = 'This is a sample string'; 
 let y = "This is a sample string with a 'quote' in it"; 
 let z = 'This is a sample string with a "double quote" in it'; 
 
 let a = 'This is another sample with a \'quote\' in it'; 
 let b = "This is yet another sample with a \"double quote\" in it"; 
 
 // a -> This is another sample with a 'quote' in it 
 // b -> This is yet another sample with a "double quote" in it 

Обычно мы использовали объявление одинарных кавычек по умолчанию и объявление двойных кавычек, если строка содержит внутри одинарные кавычки. То же самое применимо и наоборот - мы должны были избегать использования escape-символов, как в a и b .

Кроме того, если мы хотели объединить две строки, оператор плюс был наиболее распространенным способом сделать это:

 let firstName = 'Janith'; 
 let lastName = 'Kasun'; 
 
 let fullName = firstName + ' ' + lastName; 
 
 // fullName -> Janith Kasun 

Если мы хотели включить белый интервал (включая табуляцию и новую строку), мы использовали для этого символ новой строки ( \n ) и символ табуляции ( \t ).

Старый синтаксис не позволял разбивать текст на следующую строку без использования специальных символов, таких как новая строка:

 let info = 'Name:\tJohn Doe\n' 
 info = info + 'Age:\t20\n'; 
 info = info + 'City:\tLondon'; 
 
 console.log(info); 

Выполнение этого кода приведет к:

 Name: John Doe 
 Age: 20 
 City: London 

Однако, как вы можете видеть в этом примере, использование специальных символов снижает удобочитаемость кода.

Шаблонные литералы ES6

Взаимозаменяемое использование одинарных кавычек ( ' ) и двойных кавычек ( " ), а также использование специальных и управляющих символов может немного усложнить задачу в определенных ситуациях. Давайте посмотрим, как мы можем избежать этих проблем с помощью шаблонных литералов.

Объявление шаблонного литерала

Литералы шаблонов JavaScript используют обратный апостроф (`) для объявления строки вместо одинарных или двойных кавычек. Например:

 let x = `This is a new template literal`; 

Вы можете использовать кавычки и двойные кавычки внутри объявления строки с литералами шаблона:

 let y = `This is a string with a 'single quote'`; 
 let z = `This is a string with a "double quote"`; 

Многострочная строка и вкладки

С помощью шаблонных литералов мы можем просто добавить новую строку внутри самого объявления. Вместо использования символа новой строки мы можем просто разбить код на следующую строку:

 console.log(`This is the first line 
 This is the second line`); 

Этот код приводит к:

 This is the first line 
 This is the second line 

Выражения с шаблонными литералами (интерполяция выражений)

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

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

 let a = 5; 
 let b = 10; 
 console.log('The sum of ' + a + ' and' + b + ' is ' + (a + b)); 

Это приведет к:

 The sum of 5 and 10 is 15 

Теперь все в порядке с конечным результатом. Но необходимость разорвать строку в нескольких местах и добавить такие значения нечитаемо, если у вас есть нечто большее, чем простое добавление. Не говоря уже о том, что одна опечатка может вызвать проблемы с неявным преобразованием типов данных, и весь оператор станет неверным.

С помощью шаблонных литералов мы можем просто добавлять выражения, следуя ${...} , непосредственно в объявлениях строк. Когда мы запускаем код, выражения оцениваются и их значения вставляются:

 let a = 5; 
 let b = 10; 
 console.log(`The sum of ${a} and ${b} is ${a+b}`); 

Это также приводит к:

 The sum of 5 and 10 is 15 

Это гораздо более чистое решение довольно элементарной задачи. Давайте перепишем предыдущий пример с пробелами, используя литералы шаблона:

 let info = `Name: John Doe 
 Age: 20 
 City: London`; 
 
 console.log(info); 

Однако такая статическая информация используется редко. Давайте заполним объект той же информацией, а затем прочитаем его значения:

 const person = { 
 firstName: 'John', 
 lastName: 'Doe', 
 age: 20, 
 city: 'London' 
 } 
 
 let info = `Name: ${person.firstName} ${person.lastName} 
 Age: ${person.age} 
 City: ${person.city}`; 
 
 console.log(info); 

Это также приводит к:

 Name: John Doe 
 Age: 20 
 City: London 

Тегированные шаблонные литералы

Тегированные шаблонные литералы обеспечивают более расширенное использование шаблонных литералов с помощью настраиваемой функции.

Рассмотрим следующий сценарий.

Есть лист с результатами недавнего экзамена. Успешная оценка за экзамен - 50. Мы хотим создать шаблон с тегами, который выводит, сдал ли кандидат экзамен или нет.

Например, приложение будет отображать «Джон сдал экзамен» или «Энн не сдал экзамен» в зависимости от их оценки.

Давайте определим функцию шаблона с тегами, которая определяет, сдал ли учащийся или не прошел:

 function exampleTag(personExp, strings, marksExp) { 
 let resultStr; 
 
 if (marksExp >= 50) { 
 resultStr = 'passed'; 
 } else { 
 resultStr = 'failed' 
 } 
 return `${personExp}${strings[0]}${resultStr}`; 
 } 

Здесь на основе параметров, переданных в exampleTag() , мы определяем, будет ли результат passed или failed пройден. В конечном итоге мы возвращаем литерал шаблона. Этот литерал шаблона содержит выражения, которые представляют имя человека, строку и отметки.

Сделаем пару человек и передадим их функции:

 let p1 = { 
 person: 'John', 
 marks: 45 
 } 
 
 let p2 = { 
 person: 'Ann', 
 marks: 67 
 } 
 
 let ex1 = exampleTag`${p1.person} had ${p.marks}`; 
 let ex2 = exampleTag`${p2.person} had ${p.marks}`; 
 
 console.log(ex1); 
 console.log(ex2); 

Выполнение этого кода приведет к:

 John had failed 
 Ann had passed 

Хотя у нас здесь всего одна струна, had нас могло бы быть много. Таким образом, strings - это массив. Вы можете ссылаться на каждую переданную строку в соответствии с их появлением в exampleTag() .

Необработанные струны

Наконец, давайте поговорим о raw свойстве при создании тегированного литерала шаблона.

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

Рассмотрим следующий пример:

 function rawTag(strings) { 
 console.log(strings.raw[0]); 
 } 
 
 rawTag`this is a \t sample text with \ escape characters \n\t`; 

Это приведет к:

 this is a \t sample text with \ escape characters \n\t 

Как видите, мы можем использовать escape-символы в качестве необработанного текста, используя raw с тегами шаблонов.

Вы также можете использовать String.raw() , которая представляет собой встроенный литерал шаблона с тегами JavaScript, который позволяет объявлять необработанные строки без обработки управляющих символов.

Вы можете просто использовать это, если вам не нужна дополнительная логика:

 let rawString = String.raw`this is a \t sample text with \ escape characters \n\t` 

Это также приводит к:

 this is a \t sample text with \ escape characters \n\t 

Заключение

В этой статье мы рассмотрели старый способ обработки динамических строк, пробелов и escape-символов. Затем мы перешли к шаблонным литералам, выражениям внутри шаблонных литералов и, наконец, пометили шаблонные литералы.