Когда вам нужно добавить несколько переменных при работе с кодом в JavaScript, это довольно сложно. Приходится добавлять несколько раз кавычки (» «) или знак +. Таким образом, это довольно утомительная работа. Здесь на помощь приходит шаблонный литерал. Это еще один способ записи строк в JavaScript.
Однако слово «литерал» означает фиксированное значение в исходном коде. В JavaScript шаблонный литерал — это способ конкатенации строк, а также разрешения встроенных выражений. Шаблонные литералы — это самый простой способ улучшить читаемость в JavaScript, особенно при работе со строкой. Вы также можете ознакомиться с нашей статьей о 10 лучших библиотеках Javascript для веб-разработки.
Как использовать шаблонные литералы в JavaScript
Шаблонные литералы были введены в ECMAScript 6. Однако шаблонные литералы ES6 сделали создание строк довольно простым. Таким образом, они обеспечивают больший контроль над динамической строкой.
Обычно в случае строки используются одинарные кавычки(‘) и двойные кавычки («), но для шаблонных литералов используются символы обратного тика. Здесь мы рассмотрели использование 4 интересных возможностей шаблонных литералов ES6 в JavaScript. Итак, давайте начнем:
1. Многострочные строки
Создать многострочную строку довольно сложно, но с шаблонными литералами это стало не сложнее. До появления ES6 необходимо было вручную добавлять в строки символ новой строки-n. Но в случае с шаблонными литералами ES6 нет необходимости добавлять n для создания новой строки. Поскольку строка открывается с обратным знаком, для добавления новой строки достаточно каждый раз нажимать Enter.
console.log (`Hello, Welcome to the world of JavaScript`);
Вывод:
Hello, Welcome to the world of JavaScript
2. Интерполяция
В ES6 появилась интересная возможность интерполяции строк. Шаблонный литерал — это простой способ интерполяции выражений. Можно легко интерполировать переменные и выражения в строки с помощью ${}.
Let name = "Nita";
Let job = "Teacher";
console.log(`My name is ${name} and I am a ${job}.`);
Вывод:
My name is Nita and I am a Teacher.
Рассмотрим другой пример
let a= 30
let b=30
Console. log(Sixty is ${a+b} and
not ${2*a+b}.`);
Вывод:
Sixty is 60 and not 90.
3. Необработанная строка
Еще одной интересной особенностью ES6 является встроенная функция String.raw. Обычно она принимает аргумент строкового литерала и возвращает необработанную строку без использования экранирующей последовательности. Это очень полезно, особенно когда вы печатаете местоположение подкаталога без использования обратных слешей.
Let rawText = String.raw hellon world !
Console.log(rawText)
Вывод:
Hellon world!
4. Шаблон с метками
Шаблон с метками — это еще одна строка шаблона, в которой имя функции помещается перед строкой шаблона. Он позволяет пользователю разбирать литералы шаблона с помощью функции. Обычно первый аргумент включает массив строковых значений, а оставшаяся часть — выражение.
function taggedliteral(string, value1, value2, result){
console.log(string);
console.log(value1);
console.log(value2);
console.log(result);
}
a = 30;
b = 40;
taggedliteral `Addition: ${a} + ${b} = ${a+b}`;
Вывод:
["Addition: "," + "," = ",""] 30 40 70
Заключение
Здесь мы попытались кратко рассказать об использовании шаблонных литералов в JavaScript. Я надеюсь, что статья вам понравилась и вы нашли ее полезной. Если у вас есть какие-то предложения, не стесняйтесь оставлять их в разделе комментариев ниже. Мы добавим их в руководство. Также ознакомьтесь с 10 лучшими JavaScript-фреймворками для веб-разработки.