MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

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

Это экспериментальная технология, часть предложения Harmony (ECMAScript 6).
Поскольку спецификация этой технологии ещё не стабилизировалась, проверьте таблицу совместимости её использования в различных браузерах. Также обратите внимание, что синтаксис и поведение экспериментальной технологии могут быть изменены в будущих версиях браузеров в соответствии с изменениями в спецификации.

Сводка

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

Синтаксис

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

`строка текста 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!"

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

Спецификация Статус Комментарий
ECMAScript 2015 (6th Edition, ECMA-262)
Определение 'Литералы шаблонов' в этой спецификации.

ECMAScript 2015 (6th Edition, ECMA-262)
Определение 'Тегированные шаблоны' в этой спецификации.
Стандарт Изначальное определение.

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

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 41 34 (34) Нет 30 Нет
Возможность Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка Нет Нет 34.0 (34) Нет 28 Нет

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

Метки документа и участники

 Внесли вклад в эту страницу: Barss07, AlexanderMikhnevich, cawa-93, dtretyakov
 Обновлялась последний раз: Barss07,