Интерполяция строк в JavaScript: альтернативы конкатенации

Быстрый ответ

Интерполяцию строк в JavaScript можно осуществить с помощью шаблонных литералов. Текст следует заключить в обратные кавычки (` ), а переменные или выражения вставить, используя ${ ... }.

const name = 'Алиса';
console.log(`Привет, ${name}!`);  // "Привет, Алиса!"

Таким образом, вы прямо-таки внедряете переменную внутрь своего текста.

Знакомство со шаблонными литералами

В язык JavaScript начиная с ES6 были добавлены шаблонные литералы. Они предоставили значительные преимущества в работе со строками по сравнению с конкатенацией. Обратные кавычки позволяют создать многострочный текст и особые "теговые" шаблоны.

Элегантные многострочные строки

Многострочные строки, сформированные с помощью конкатенации, выглядят неуверенно, словно одежда, сшитая из осколков ткани:

var multiLineString = 'Строка 1\n' +
                      'Строка 2\n' +
                      'Строка 3'; // Это все равно что строить здание из картона!

А при работе с шаблонными литералами, все становится намного проще.

const multiLineString = `Строка 1
Строка 2
Строка 3`; // Это похоже на строительство дома на прочном основании.

Подробнее об этом расскажет наш спикер на видео

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

Теговые функции могут трансформировать шаблонные литералы в мощное средство для предварительной обработки строк:

function highlight(strings, ...values) {
  return strings.map((str, i) => `${str}<mark>${values[i] || ""}</mark>`).join('');
}

const name = 'Алиса';
const greeting = highlight`Привет, ${name}!`; // Имя "Алиса" выделено!

Вопрос стиля

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

• Сжатость: Если всё ясно и точно, то результат будет неподражаемым.
• Читабельность: Теперь код легко читается, все уложено по своим местам.
• Обслуживание: Прощайте, ошибки при вводе. Мы по вам не скучаем!

Утонченные приемы интерполяции строк

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

Изощренная функция supplant и метод .replace()

До появления шаблонных литералов Дуглас Крокфорд разработал функцию supplant:

String.prototype.supplant = function (o) {
  return this.replace(/{([^{}]*)}/g, function (a, b) {
    var r = o[b];
    return typeof r === 'string' || typeof r === 'number' ? r : a;
  });
};

var template = "Привет, {name}!";
var result = template.supplant({ name: "Алиса" }); // "Привет, Алиса!" Грациозно и сообразительно!

Метод .replace() позволяет с легкостью заменять переменные:

var template = "Привет, {{name}}! Возраст: {{age}}";
var data = { name: "Алиса", age: 30 };

Object.keys(data).forEach(key => {
  template = template.replace(new RegExp(`{{${key}}}`, 'g'), data[key]);
}); // Возраст Алисы улучшается, а не увеличивается!

HTML-шаблоны и jQuery

HTML-шаблоны в сочетании с jQuery – это то, что надо для фронтенд-разработчиков:

<template id="user-template">
  <span>Имя: {{name}}</span>
  <span>Возраст: {{age}}</span>
</template>

const user = { name: 'Алиса', age: 30 };
const template = document.getElementById('user-template').innerHTML;

const filledTemplate = Object.entries(user).reduce(
  (acc, [key, value]) => acc.replace(new RegExp(`{{${key}}}`, 'g'), value), template
);

$('#user-container').html(filledTemplate);  // Теперь Алиса присутствует в самом сердце DOM!

Важно не забывать про экранирование для избежания XSS-атак.

Совместимость с браузерами и дополнительные решения

Перед тем, как включать шаблонные литералы в свой код, стоит удостовериться, что они поддерживаются браузерами. Для устаревших версий может потребоваться использование полифиллов. Актуальные данные о совместимости всегда можно найти, например, на веб-сайте Mozilla Developer Network.

Визуализация

Чтобы лучше осознать разницу, рассмотрим простой пример:

У вас есть:

• Тост: 🍞
• Масло: 🧈
• Варенье: 🍓

Приготовление завтрака:

В соответствии со старыми принципами:

"Тост: " + toast + ", Масло: " + butter + ", Варенье: " + jam; // процесс сложный и ненадежный

Результат: "Тост: 🍞, Масло: 🧈, Варенье: 🍓"

Используя шаблонные литералы ES6:

`Тост: ${toast}, Масло: ${butter}, Варенье: ${jam}`; // всё идёт плавно и легко, словно вы мажете масло на тост

Результат: "Тост: 🍞, Масло: 🧈, Варенье: 🍓"

Полезные материалы

1. Шаблонные литералы (шаблонные строки) – JavaScript | MDN — Подробное руководство по шаблонным литералам от MDN.
2. JavaScript Template Strings — Объяснение и примеры использования шаблонных строк на примерах от W3Schools.
3. JavaScript Template Literals – YouTube — Видеоурок по использованию шаблонных литералов ES6.
4. 8. Template literals — Исследование и примеры применения шаблонных литералов в глубоком руководстве по ES6, "Exploring ES6".
5. Template Literals | CSS-Tricks — Примеры использования шаблонных литералов на практике от CSS-Tricks.
6. Чтение/Запись JSON-файлов с Node.js — Как шаблонные литералы могут быть использованы для работы с JSON в Node.js.