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

Шаблонные строки позволяют записывать строки, охватывающие несколько строк, и включать встроенные выражения.

Пример

До шаблонных строк:


const name = "Иван";
const age = 30;
const message = "Привет, " + name + "!\n" +
               "Вам " + age + " лет.";

Пример

С шаблонными строками:


const name = "Иван";
const age = 30;
const message = `Привет, ${name}!
Вам ${age} лет.`;

Шаблонные строки используют обратные кавычки (`) вместо обычных и могут включать:

  • Несколько строк без использования символа перевода строки (\n)
  • Выражения внутри конструкции ${}
  • Кавычки без экранирования

Пример

Многострочная строка:


const html = `
  <div>
    <h1>Заголовок</h1>
    <p>Параграф</p>
  </div>
`;
Примечание: Отступы в многострочных строках становятся частью самой строки.

Пример

Отступы становятся частью строки:


const x = `
  Джон:
    Привет, как дела?
  Джейн:
    Все нормально!
`;

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

Любое действительное выражение JavaScript в шаблонной строке можно вставить внутрь конструкции ${}:

Пример

Вставка переменных внутри шаблонной строки:


let firstName = "Иван";
let lastName = "Иванов";

let text = `Добро пожаловать, ${firstName} ${lastName}!`;

Пример

Вставка выражений внутри шаблонной строки:


let price = 10;
let quantity = 5;

let total = `Итого: ${price * quantity}`;

Пример

Использование метода map внутри шаблонной строки:


const items = ["apple", "banana", "orange"];
const list = `У вас ${items.length} штук:
${items.map(item => `- ${item}`).join('\n')}`;

Пример

Использование тернарного оператора внутри шаблонной строки:


const isAdmin = true;
const message = `Статус: ${isAdmin ? 'Админ' : 'Гость'}`;

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

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

Примечание: Метки в шаблонных строках — продвинутый приём, который не потребуется большинству разработчиков.

Функция принимает текст и выражение(-я) в качестве аргументов.

Посмотрим на примере:

Пример

Метка в шаблонной строке:


function highlight(strings, fname) {
  let x = fname.toUpperCase();
  return strings[0] + x + strings[1];
}

let name = "John";

let text = highlight`Hello ${name}, how are you?`;

Объяснение примера:

  • Имя функции — highlight, вы можете назвать её как угодно.
  • Первый аргумент хранит текст между выражениями в виде массива.
  • Элементы массива разбиты выражением.
  • В нашем примере strings[0] содержит "Hello " и strings[1] содержит " how are you?".
  • Второй аргумент хранит выражения. В нашем примере fname содержит "John".

Внутри функции вы можете использовать аргументы для формирования итоговой строки и возврата её.

Примечание: Если шаблонная строка содержит несколько выражений, текст всё равно хранится в первом аргументе, но выражения будут находиться либо в нескольких аргументах, либо в массиве во втором аргументе.

Пример

Метка в шаблонной строке с несколькими выражениями:


function highlight(strings, fname1, fname2) {
  let x = fname1.toUpperCase();
  let y = fname2.toUpperCase();
  return strings[0] + x + strings[1] + y + strings[2];
}

let name1 = "John";
let name2 = "Jane";

let text = highlight`Hello ${name1} and ${name2}, how are you?`;

Пример

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


function highlight(strings, ...fname) {
  let x = fname[0].toUpperCase();
  let y = fname[1].toUpperCase();
  return strings[0] + x + strings[1] + y + strings[2];
}

let name1 = "John";
let name2 = "Jane";

let text = highlight`Hello ${name1} and ${name2}, how are you?`;