В этом руководстве вы узнаете о шаблонных литералах JavaScript (шаблонных строках) с помощью примеров.
Литералы шаблона (строки шаблона) позволяют использовать строки или встроенные выражения в виде строки. Они заключены в обратные кавычки ``. Например,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Примечание : литерал шаблона был представлен в 2015 году (также известный как ECMAScript 6, ES6 или ECMAScript 2015). Некоторые браузеры могут не поддерживать использование шаблонных литералов. Посетите страницу поддержки JavaScript Template Literal, чтобы узнать больше.
Шаблонные литералы для строк
В более ранних версиях JavaScript вы использовали одинарные ''или двойные кавычки ""для строк. Например,
const str1 = 'This is a string'; // cannot use the same quotes const str2 = 'A "quote" inside a string'; // valid code const str3 = 'A 'quote' inside a string'; // Error const str4 = "Another 'quote' inside a string"; // valid code const str5 = "Another "quote" inside a string"; // Error
Чтобы использовать те же кавычки внутри строки, вы можете использовать escape-символ .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
Вместо использования escape-символов вы можете использовать литералы шаблона. Например,
const str1 = `This is a string`; const str2 = `This is a string with a 'quote' in it`; const str3 = `This is a string with a "double quote" in it`;
Как видите, литералы шаблона не только упрощают включение цитат, но и делают наш код более чистым.
Многострочные строки с использованием шаблонных литералов
Литералы шаблона также упрощают запись многострочных строк. Например,
Используя шаблонные литералы, вы можете заменить
// using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)
с участием
const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)
Результат обеих этих программ будет одинаковым.
Это длинное сообщение, которое занимает несколько строк кода.
Интерполяция выражений
До JavaScript ES6 вы использовали +оператор для объединения переменных и выражений в строку. Например,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
С помощью шаблонных литералов немного проще включать переменные и выражения в строку. Для этого мы используем $(… )синтаксис.
const name = 'Jack'; console.log(`Hello $(name)`); // template literals used with expressions const result = `The sum of 4 + 5 is $(4 + 5)`; console.log(result); console.log(`$(result < 10 ? 'Too low': 'Very high')`)
Вывод
Привет, Джек Сумма 4 + 5 - 9 Очень высокая
Процесс присвоения переменных и выражений внутри шаблонного литерала известен как интерполяция.
Помеченные шаблоны
Обычно для передачи аргументов используется функция. Например,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Однако вы можете создавать шаблоны с тегами (которые ведут себя как функция), используя литералы шаблонов. Вы используете теги, которые позволяют анализировать литералы шаблона с помощью функции.
Тегированный шаблон написан как определение функции. Однако ()при вызове литерала круглые скобки не используются. Например,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Вывод
("Привет, Джек")
Массив строковых значений передается в качестве первого аргумента функции тега. Вы также можете передать значения и выражения в качестве оставшихся аргументов. Например,
const name = 'Jack'; const greet = true; function tagExample(strings, nameValue) ( let str0 = strings(0); // Hello let str1 = strings(1); // , How are you? if(greet) ( return `$(str0)$(nameValue)$(str1)`; ) ) // creating tagged literal // passing argument name const result = tagExample`Hello $(name), How are you?`; console.log(result);
Вывод
Привет, Джек, как дела?
Таким образом, вы также можете передать несколько аргументов в шаблоне с тегами.
