Автор оригинала: Janith Kasun.
Вступление
В этой статье мы будем говорить о 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
Как правило, мы использовали объявление одной цитаты по умолчанию, а двойное объявление цитаты, если строка содержит отдельные кавычки в нем. То же самое относится иначе наоборот – мы должны были избегать использования аварии, как в А и B Отказ
Кроме того, если мы хотели объединить две строки, оператор плюс был наиболее распространен, чтобы сделать это:
let firstName = 'Janith'; let lastName = 'Kasun'; let fullName = firstName + ' ' + lastName; // fullName -> Janith Kasun
Если мы хотели включить белый интервал (включая вкладку и новую строку), мы использовали новую линейную символ ( \ N ) и вкладку Space Chare ( \ 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 используют символ BackTick (`), чтобы объявить строку вместо одиночных или двойных кавычек. Например:
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
Меченные шаблонные литералы
Тежные шаблонные литералы обеспечивают более передовое использование шаблонных литералов с использованием настраиваемой функции.
Рассмотрим следующий сценарий.
Из недавнего экзамена есть лист результат. Pass Mark для экзамена 50. Мы хотим создать меченый шаблон, который выводит, если кандидат прошел экзамен или нет.
Например, приложение будет отображать «Джон прошел экзамен» или «Энн не прошел экзамен», основанный на их отметке.
Давайте определим функцию мечего шаблона, которая определяет, прошел ли студент или не удался:
function exampleTag(personExp, strings, marksExp) {
let resultStr;
if (marksExp >= 50) {
resultStr = 'passed';
} else {
resultStr = 'failed'
}
return `${personExp}${strings[0]}${resultStr}`;
}
Здесь, основываясь на параметрах, переданных на Exampletag () Функция, мы определяем, устанавливается ли результатом Прошло или не удалось Отказ В конечном итоге мы возвращаем шаблон литерал. Этот шаблон литерал содержит выражения, которые представляют имя человека, строку и метки.
Давайте сделаем пару людей и пропустите их в функцию:
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
Хотя у нас просто одна строка здесь, имел Мы могли бы легко было много. Таким образом, Строки Параметр – это массив. Вы можете ссылаться на каждую пропущенную строку, в соответствии с их появлением в шаблонном литерате, переданном Exampletag () функция.
Сырые строки
Наконец, давайте поговорим о сырой Свойство при создании помеченного шаблона литерала.
Это свойство доступно на первом параметре мечего шаблона. Это позволяет получить значение сырой строки без обработки от нее символов Escape.
Рассмотрим следующий пример:
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 Tageed Teamplate Littleal, который позволяет объявлять сырые строки без обработки символов Escape.
Вы можете просто использовать это, если вам не нужна дополнительная логика:
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
Заключение
В этой статье мы охватывали старый способ обработки динамических струн, пробелов и эвакуальных персонажей. Затем мы прыгнули в шаблонные литералы, выражения в рамках шаблонных литералов и, наконец, помеченные шаблонные литералы.