Добавление шаблонных литералов в ECMAScript 6 (ES6) позволяет нам интерполировать строки в JavaScript.

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

const age = 4.5;
const earthAge = `Земле, приблизительно ${age} миллиарда лет.`;

console.log(earthAge);

Прежде всего, вы увидите, что мы используем обратные кавычки для шаблонных литералов. Кроме того, у нас также есть формат ${placeholder}, который позволяет нам вставлять динамическое значение в строку. Все, что находится внутри $ {}, оценивается как JavaScript.

Например, мы могли бы написать: `Земле, приблизительно ${age + 10} миллиарда лет.` и это будет работать, как если бы мы использовали: const age = 4.5 + 10;.

Как мы это делали раньше?

const earthAge = "Земле, приблизительно " + age + "миллиарда лет.";

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

Однако это лишь один случай. Давайте посмотрим на другие варианты использования шаблонных литералов.

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

Еще одно удобное использование шаблонных строк — это многострочные строки. До шаблонных литералов мы использовали \ n для новых строк, как в console.log (‘строка 1 \ n’ + ‘строка 2’).

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

const earthAge = `Earth is estimated to be ${age} billion years old.

Scientists have scoured the Earth searching for the oldest rocks to radiometrically date.

In northwestern Canada, they discovered rocks about 4.03 billion years old.
`;

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

В качестве упражнения попробуйте преобразовать указанную выше строку для использования конкатенации и новой строки \ n.

Выражения

С помощью шаблонных литералов мы также можем использовать выражения в строках. Что это значит?

Например, мы могли бы использовать математические выражения, такие как умножение двух чисел. Приведенный ниже фрагмент иллюстрирует это:

const firstNumber = 10;
const secondNumber = 39;
const result = `The result of multiplying ${firstNumber} by ${secondNumber} is ${firstNumber * secondNumber}.`;

console.log(result);

Без шаблонных литералов нам пришлось бы сделать что-то вроде этого:

const result = "The result of multiplying " + firstNumber + " by " + secondNumber + " is " + firstNumber * secondNumber + ".";

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

Тернарный оператор

С интерполяцией строки мы даже можем использовать тернарный оператор внутри строки. Это позволяет нам проверять значение переменной и отображать разные вещи в зависимости от этого значения.

Давайте посмотрим на пример ниже:

const drinks = 4.99;
const food = 6.65;
const total = drinks + food;

const result = `The total bill is ${total}. ${total > 10 ? `Your card payment will be declined` : `Your card payment will be accepted`}.`

console.log(result);

В приведенном выше примере мы проверяем, например, не превышает ли общая сумма десяти долларов.

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

Вывод

Добавление шаблонных литералов в ES6 позволяет нам писать лучше, короче и четче. Это также дает нам возможность вставлять переменные и выражения в любую строку. По сути, все, что вы пишете в фигурных скобках ($ {}), рассматривается как JavaScript.

Таким образом, мы можем использовать шаблонные литералы, чтобы:

  • писать многострочные строки;
  • вставлять выражения;
  • писать строки с помощью тернарного оператора.

Ошибка