Теговые шаблоны в JavaScript ES2015

Development, Java | Amber | Комментировать запись

Ранее мы рассмотрели шаблонные литералы, которые появились в JavaScript вместе с ECMAScript 2015 (ES6). Однако у них есть дополнительная функция, которую мы не обсуждали: это теговые шаблоны (или теговые шаблонные литералы). JavaScript позволяет пометить шаблонные литералы функцией, которая будет вызываться и действовать как своего рода препроцессор для содержимого литерала.

Читайте также: Как работают шаблонные литералы в JavaScript ES6

Давайте взглянем на типичный шаблонный литерал:

let name = 'Benedict';
let occupation = 'being awesome';

let sentence = `Hi! I'm ${ name } and I'm busy at ${ occupation }.`;

console.log(sentence);
// Hi! I'm Benedict and I'm busy at being awesome.

А теперь давайте добавим в литерал функцию useless:

function useless(strings, ...values) {
  return 'I render everything useless.';
}

let name = 'Benedict';
let occupation = 'being awesome';

let sentence = useless`Hi! I'm ${ name } and I'm busy at ${ occupation }.`;

console.log(sentence);
// I render everything useless.

Очевидно, вышеприведенный код бесполезен. Но он получает больше возможностей, когда мы используем строки и значения (strings и values) для создания шаблонного литерала шаблона с обработкой.

В нашем текущем примере есть такие вещи:

• Строки: массив с 3 значениями («Hi! I’m», «and I’m busy at» и «.»).
• Значения: это массив с двумя интерполированными значениями для переменных nameи occupation. Эти значения передаются в теговую функцию как дополнительные параметры (но здесь мы используем rest параметры, чтобы собрать все дополнительные параметры в массив values).

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

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

function uppercase(strings, ...values) {
  let newStr = '';

  for (let i = 0; i < strings.length; i++) {
    if (i > 0) {
      newStr += values[i-1].toUpperCase();
    }
    newStr += strings[i];
  }

  return newStr;
}

let name = 'Benedict';
let occupation = 'being awesome';

let sentence = uppercase`Hi! I'm ${ name } and I'm busy at ${ occupation }.`;

console.log(sentence);
// Hi! I'm BENEDICT and I'm busy at BEING AWESOME.

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