У JavaScript никогда не было элегантного способа обработки строк до запуска ES6. ES6 представляет нечто, известное как литералы шаблонов, которые позволяют JavaScript обрабатывать несколько строк более эффективно.

Синтаксис для литералов 

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

// This is how strings were declared pre ES6
var earlierStrings = 'How strings were declared pre ES6';

// Declaring strings using template literals in ES6
let templateLiterals = `How strings can be declared post ES6`;

console.log(typeof earlierStrings); // "string"
console.log(typeof templateLiterals); // "string"

Шаблонные литералы являются ответом на многострочные строки в JavaScript

Многострочные строки всегда были проблемой до ES6, потому что строки были объявлены с использованием двойных и одинарных кавычек. Это было проблемой, потому что когда вы объявляете строки с помощью двойных или одинарных кавычек, строки должны полностью содержаться в одной. Давайте посмотрим, как разработчики вставляли несколько строк HTML-кода в код JavaScript.

var profile = '' +
    '    <div class="profile">\n' +
    '\n' +
    '        <div class="name">John Doe </div>\n'
    '\n' +
    '        <div class="designation">Web Developer</div>\n'
    '\n' +
    '    </div>\n';


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

let profile = `
<div class="profile">

    <div class="name">John Doe </div>

    <div class="designation">Web Developer</div>

</div>`.trim();

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

Динамическое заполнение данных с использованием шаблонных литералов

Шаблонные литералы - это не просто модный способ объявления строк в ES6. Реальная сила литералов шаблона может быть понята с помощью подстановок. Используя подстановки, вы можете динамически заполнять данные в строках, объявленных с использованием литералов шаблона, так же, как вы могли бы сделать это с помощью движка шаблонов. Давайте посмотрим на следующий пример:

let data = {
    name: 'John Doe',
    designation: 'Web Developer'
}

let profile = `
<div class="profile">

    <div class="name">${date.name}</div>

    <div class="designation">${data.designation}</div>

</div>`.trim();

Замены могут быть использованы для использования следующего синтаксиса ${}, если вы рассмотрите приведенный выше пример кода, то поймете, что подстановки могут содержать выражения JavaScript внутри них. Возможность вычисления выражений JavaScript в подстановках делает их действительно мощными в ES6.

Помеченные шаблонные литералы

Шаблонные литералы могут иметь тег, предшествующий объявлению самого шаблонного литерала. Этот тег действует как обычная функция javascript, которая возвращает массив литералов, а также подстановки внутри самой функции. Литералы и подстановки могут затем использоваться внутри функции и манипулировать ими для получения данных, которые будут действовать как конечный вывод литерала. Давайте сначала объявим литерал шаблона, а затем назначим ему тег.

let data = {
    name: 'John',
    age: '30'
}

let profile = `My name is ${data.name} and I am ${data.age} years old.`

console.log(profile); 
// "My name is John and I am 30 years old."

Это простой шаблонный литерал. Теперь мы можем добавить префикс профиля к новому тегу, который будет действовать как имя функции, а затем мы можем использовать литералы и подстановки внутри функции. 

function tagFunction(literals, ...substitutions){
  console.log(literals);
  // Returns: ["My name is ", " and I am ", " years old."]  

  console.log(substitutions);
  //  Returns: ["John", "30"]
}

let data = {
    name: 'John',
    age: '30'
}

let profile = tagFunction `My name is ${data.name} and I am ${data.age} years old.`

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

function tagFunction(literals, ...substitutions){
 
    return `${literals [0]}Steve${literals [1]}25${literals [2]}`

  }

  let data = {
      name: 'John',
      age: '30'
  }

  let profile = tagFunction `My name is ${data.name} and I am ${data.age} years old.`

console.log(profile);
// "My name is Steve and I am 25 years old."

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

Источник перевода