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


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

В версии ES6 JavaScript были введены шаблонные литералы. До версии ES6, если у нас была переменная, которую мы хотели использовать в строках, нам приходилось делать что-то вроде следующего примера.

function printDrink() {
  var drink = "Tea";
  return "My favourite drink is" + " " + drink;
}
console.log(printDrink());
//Returns ---> My favourite drink is Tea
Войти в полноэкранный режим Выйти из полноэкранного режима

В приведенном выше примере мы создаем объявление функции под названием printDrink. Внутри функции мы создаем переменную под названием drink. Мы присваиваем переменной строку «Чай». Функция возвращает строку, которая использует конкатенацию (символы сложения) для печати строки и переменной drink. Когда функция вызывается, мы получаем возвращенную строку.

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

Давайте рассмотрим предыдущий пример, но на этот раз с использованием шаблонного литерала.

function printDrink() {
  var drink = "Tea";
  return `My favourite drink is ${drink}`;
}
console.log(printDrink());
//Returns ---> My favourite drink is Tea
Вход в полноэкранный режим Выйти из полноэкранного режима

В приведенном выше примере мы сохраняем то же объявление функции и переменную drink. На этот раз мы используем шаблонный литерал. Шаблонный литерал заключен в обратные тики и возвращает строку. С помощью интерполяции переменная drink вставляется в шаблонный литерал. При вызове функции мы получаем то же возвращаемое значение.

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

Еще одна полезная особенность шаблонных литералов заключается в том, что мы можем растянуть нашу строку на несколько строк. До ES6 для этого нужно было использовать либо конкатенацию строк, либо символ новой строки (n). Ниже я кратко покажу пример этого:

var ourString = "First linenSecond linenThird linen";
console.log(ourString);
//Returns ---> 
First line
Second line
Third line
Войти в полноэкранный режим Выход из полноэкранного режима

С шаблонными литералами нам больше не нужно беспокоиться об этом. Если мы хотим создать многострочную строку, мы можем сделать это, заключив строку в обратные тики и разделив строки.

let ourString = `First line
Second line 
Third line`;
console.log(ourString);
//Returns ---> 
First line
Second line
Third line
Вход в полноэкранный режим Выход из полноэкранного режима

Надеюсь, вам понравилась эта статья! Если вы хотите посмотреть видеоурок, он доступен здесь.

Оцените статью
Procodings.ru
Добавить комментарий