Как шаблонные литералы работают в JavaScript

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

В JavaScript уже есть способ определения строк с использованием одинарных кавычек («») или двойных кавычек («»). Так зачем нужны шаблонные литералы?

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

Обычная строка:

let string1 = “This is a regular string”

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

let string2 = `This is a template literal`

Чтобы писать обратные кавычки в строках шаблона, используйте обратную косую черту (\), как показано ниже:

console.log(` \` `) \\Output: “ ` ”
console.log(`\${}`) \\Output: “ ${} ”

Многострочные строки

В обычных строках, чтобы добавить новую строку, мы используем символ новой строки (\ n). Это исключено в шаблонных литералах.

Например:

console.log(“Adding multiple lines : \n”+ “This is line1 \n” + “This is line2”);

Вывод:

С помощью шаблонных литералов это можно сделать следующим образом:

console.log(`Adding multiple lines
This is line1
This is line2`)

Вывод:

Это увеличивает читаемость кода.

Интерполяция выражений

С помощью шаблонных литералов мы можем встраивать выражения в строку. Эти выражения помещаются в заполнитель, который обозначается знаком $, за которым следуют фигурные скобки- $ {}. Затем эти выражения оцениваются во время выполнения. Заполнители заменяются значением выражения, а затем объединяются в одну строку. Все значения выражения неявно преобразуются в строку.

Синтаксис:

`${expression}`

Выражение здесь может быть переменным, операцией или даже функцией!

Пример 1:

let greeting = “How are you?”
console.log(`Hey there! ${greeting}`);

Вывод:

Пример 2:

let n1 =5;
let n2 = 6;
console.log(`Sum of n1 and n2 is: ${n1+n2}`);

Вывод:

Пример 3:

let n1 = 4;
let n2 = 5;
function avg(n1,n2){
    return (n1 +n2)/2;
}
console.log(`Average of n1 and n2 is ${avg(n1,n2)} `);

Вывод:

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

let n1 = 3;
let n2 = 6;
let n3 = 1;
console.log(`Of the three : ${ (n1 >= n2 && n1 >= n3) ? `${n1} is the greatest`: `${ n2>n3 ? `${n2} is the greatest` : `${n3} is the greatest`}` }`);

Вывод:

Однако, чтобы улучшить читаемость кода и удобство обслуживания, лучший подход к приведенному выше коду был бы следующим:

let n1 = 3;
let n2 = 6;
let n3 = 1;
const expr = (n1 >= n2 && n1 >= n3)? `${n1} is the greatest`: n2>n3 ? `${n2} is the greatest`:`${n3} is the greatest` ;
console.log(`Of the three : ${expr}`);

Вывод:

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

Это более сложная форма шаблонных литералов. Он также известен как шаблоны с тегами. По сути, здесь вы анализируете литерал шаблона с помощью функции! Любое выражение, предшествующее литералу шаблона, называется тегом. Здесь тег - это функция. Используя это, мы можем проанализировать строку шаблона и выполнить с ней некоторые операции, прежде чем вернуть обработанную строку. В шаблонах с тегами функция вызывается с литералом шаблона, а не обычным способом, с круглыми скобками, содержащими аргументы функции. Функция тега принимает два аргумента: один - это массив токенизированных строк, а другой - выражения.

Синтаксис:

Function tagFunction(strings, firstName, lastName){
    …
}
tagFunction`Hello ${firstName} ${lastName}!`

Имя помеченной функции может быть любым по вашему выбору.

Function tagFunction(strings, firstName, lastName - эта строка совпадает с:

Function tagFunction([‘hello’, ‘ ’, ‘!’], firstName, lastName)

Например:

let n1 = 5;
let n2 = 4;
let n3 = 3;
function foo(strings, x, y, z){
    str1 = strings[0]; //x:
    str2 = strings[1]; //y:
    str3 = strings[2]; //z:
    if(x > y && x > z){
       return `${str1} is the greatest`
    }
    else if(y > z) {
       return `${str2} is the greatest`
    }
    else return `${str3} is the greatest`
}
let result = foo `x: ${n1} y: ${n2} z: ${n3}`
console.log(result);

Вывод:

использованная литература

Больше контента на plainenglish.io