Шаблонные строки

Сводка

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

Синтаксис

`строка текста`

`строка текста 1
 строка текста 2`

`строка текста ${выражение} строка текста`

tag `строка текста ${выражение} строка текста`

Описание

Шаблонные строки заключены в обратные кавычки (` `)  вместо двойных или одинарных. Они могут содержать местозаполнители, которые обозначаются знаком доллара и фигурными скобками (${выражение}). Выражения в местозаполнителях и текст между ними передаются в функцию. Стандартная функция просто объединяет все части в строку. Если перед строкой присутствует выражение (здесь это tag),  то шаблонная строка называется "тегированной шаблонной строкой". В данном случае, теговое выражение (обычно функция) вызывается с обработанным шаблоном, который вы можете изменить перед выводом.

Многострочные литералы

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

console.log("string text line 1\n\
string text line 2");
// "string text line 1"
// "string text line 2"

Для получения такого же эффекта можно использовать следующее:

console.log(`string text line 1
string text line 2`);
// "string text line 1
//  string text line 2"

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

Для внедрения выражений в строки вам приходилось использовать следующий синтаксис:

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and not " + (2 * a + b) + ".");
// "Fifteen is 15 and not 20."

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

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
// "Fifteen is 15 and not 20."

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

Расширенной формой шаблонов являются тегированные шаблонные строки. В них вы можете изменять вывод шаблонов при помощи функции. Её первый аргумент будет содержать массив строковых литералов ("Hello " и " world" в примере). Второй и последующие содержат значения вычисленных выражений (здесь это "15" и "50"). В конце, ваша функция должна вернуть итоговую строку.

var a = 5;
var b = 10;

function tag(strings, ...values) {
  console.log(strings[0]); // "Hello "
  console.log(strings[1]); // " world"
  console.log(values[0]);  // 15
  console.log(values[1]);  // 50

  return "Bazinga!";
}

tag`Hello ${ a + b } world ${ a * b}`;
// "Bazinga!"

Необработанные строки

Специальное свойство raw, доступное для первого аргумента тегированного шаблона, позволяет получить строку в том виде, как она была введена:

function tag(strings, ...values) {
  return strings.raw[0];
}

tag`string text line 1 \n string text line 2`;
// "string text line 1 \\n string text line 2"

Кроме того, метод String.raw() используется в качестве стандартной функции для обработки шаблонов:

String.raw`Hi\n${2+3}!`; // "Hi\\n5!"

Спецификации

Совместимость с браузерами

Смотрите также

• String
• String.raw()
• Лексическая грамматика