Переменные в строках JavaScript без конкатенации: способы

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

Чтобы интерполировать переменные в строки в JavaScript, можно использовать шаблонные литералы, которые оформляются обратными кавычками (` ), и выражения в фигурных скобках ${}:

const user = 'Боб';
const message = `Привет, ${user}!`; // Вернёт "Привет, Боб!"

Такой метод упрощает синтаксис и улучшает читаемость кода.

ES5 и ранее: Эпоха конкатенации

До появления ES6 в JavaScript переменные вставлялись в строки с помощью конкатенации либо дополнительных библиотек, таких как sprintf.js:

// Пример традиционной конкатенации
var user = 'Алиса';
var message = 'Привет, ' + user + '!';

// Применение sprintf.js для использования синтаксиса C в JavaScript
var message = sprintf("Привет, %s!", user);

Также использовались собственные функции интерполяции, встроенная функция replace() и регулярные выражения для удобства работы с кодом:

function interpolate(template, values) {
  return template.replace(/\$\{(\w+)\}/g, function(_, key) {
    return values[key] || '';
  });
}

var template = "Привет, ${user}!";
var message = interpolate(template, { user: 'Алиса' }); // Вернёт "Привет, Алиса!"

ES6 и далее: Эпоха шаблонных литералов

Использование сложных выражений: Не только переменные

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

const a = 5;
const b = 10;
const sumMessage = `Сумма ${a} и ${b} равна ${a + b}.`; // Вернёт "Сумма 5 и 10 равна 15."

Теговые шаблоны: Настройка интерполяции строк

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

function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) => `${acc}${str}<strong>${values[i] || ''}</strong>`, '');
}

const user = 'Алиса';
const messages = 5;
const taggedMessage = highlight`Привет, ${user}! У тебя ${messages} новых сообщений.`;

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

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

Переменные:
🧩 имя: 'Алиса'
🧩 сообщения: '5'

Шаблонный литерал:
🎨 "Привет, ${имя}! У тебя ${сообщения} сообщений."
🖼️ "Привет, Алиса! У тебя 5 сообщений."

const name = 'Алиса';
const messages = '5';
const finalMessage = `Привет, ${name}! У тебя ${messages} сообщений.`;

Такая форма упрощает работу с кодом и избавляет от необходимости использования конкатенации.🖼️✨

Поддержка устаревших версий: Помним о корнях

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

// Используем Babel для обеспечения обратной совместимости с ES5
var user = 'Алиса';
var message = "Привет, " + user + "! У тебя " + messages + " сообщений.";

Даже в старых браузерах, таких как IE8, всем известный console.log поддерживает базовое форматирование строк:

// console.log — наше всё в области логирования.
console.log("Привет, %s! У тебя %d сообщений.", user, messages);

Швейцарский нож: Функциональность шаблонных литералов

Многострочные строки: Без бэкслешей

Шаблонные литералы идеально подходят для работы с многострочными строками:

const multiLineMessage = `Это пример строки, 
расположенной на
нескольких строчках без использования бэкслешей!`;

Вложенные шаблонные литералы: Когда одного слоя мало

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

const item = 'печенье';
const count = 3;
const nestedMessage = `Я купил ${count} ${count === 1 ? item : `${item}а`}.`; // Вернёт "Я купил 3 печенья."

Работа с выражениями: Внедрение логики

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

const hours = 9;
const greeting = `Доброе ${hours < 12 ? 'утро' : 'вечер'}, Алиса!`;

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

1. Шаблонные литералы (шаблонные строки) – JavaScript | MDN — подробное описание шаблонных литералов на MDN.
2. Шаблонные строки JavaScript — W3Schools предлагает доступное обучение использованию шаблонных литералов.
3. Спецификация языка ECMAScript 2015 – ECMA-262 6th Edition — официальная документация по шаблонным литералам.
4. Учебник | DigitalOcean — Справочник по интерполяции в JavaScript от DigitalOcean.
5. Шаблонные литералы — глубокое погружение в возможности ES6.
6. Шаблонные Литералы | CSS-Tricks — советы от CSS-Tricks по использованию шаблонных литералов в вашем коде.
7. Строки — изучите теорию шаблонных литералов на JavaScript.info.