Интерполяция строк в 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}`; // всё идёт плавно и легко, словно вы мажете масло на тост
Результат: "Тост: 🍞, Масло: 🧈, Варенье: 🍓"
Полезные материалы
- Шаблонные литералы (шаблонные строки) – JavaScript | MDN — Подробное руководство по шаблонным литералам от MDN.
- JavaScript Template Strings — Объяснение и примеры использования шаблонных строк на примерах от W3Schools.
- JavaScript Template Literals – YouTube — Видеоурок по использованию шаблонных литералов ES6.
- 8. Template literals — Исследование и примеры применения шаблонных литералов в глубоком руководстве по ES6, "Exploring ES6".
- Template Literals | CSS-Tricks — Примеры использования шаблонных литералов на практике от CSS-Tricks.
- Чтение/Запись JSON-файлов с Node.js — Как шаблонные литералы могут быть использованы для работы с JSON в Node.js.