Вставка переменных в строки JavaScript и Node.js: синтаксис

Быстрый ответ для занятых разработчиков

Для этого удобно использовать шаблонные строки с обратными апострофами ``` и интерполяцией внутри ${...}:

let name = "Боб";
let greeting = `Привет, ${name}!`; // В результате получаем "Привет, Боб!"

Появившись в ES6, шаблонные строки стали неотъемлемым инструментом языка для работы со строками, значительно облегчив поддержку кода.

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

Хотите разнообразить подстановку переменных? Используйте выражения в шаблонах, чтобы придать коду изюминку:

let apples = 5;
let bananas = 10;
let fruitSalad = `У вас есть ${apples + bananas} фруктов!`; // Получаем количество фруктов, и, вуаля, вот и вкусный салат!

Неудобно работать с \n для многострочного текста? Шаблонные строки придут на помощь:

let item = "пицца";
let order = `Детали заказа:
- Товар: ${item}
- Количество: 3
Приятного аппетита!`; // Так, заказываем тройную пиццу! 🍕

В экосистеме Node.js метод util.format поможет вам форматировать строки без необходимости запоминания порядка переменных:

const util = require('util');
let noun = "Мир";
let salutation = `Привет %s!`;
console.log(util.format(salutation, noun)); // "Привет, Мир!"

Осторожно! Где шаблонные строки могут подвести

Шаблонные строки имеют свои ограничения:

• Безопасность: Остерегайтесь данных, введенных пользователем — их следует очищать, будто от вирусов.
• Совместимость: ES6 не поддерживается всеми браузерами, поэтому иногда приходится прибегать к транспиляции с помощью Babel или к классическому объединению строк.
• Производительность: В исключительно производительно-критичных сценариях конкатенация может оказаться более быстрой, хотя разница обычно незначительна.

Сочетаем лучшее из двух миров: Шаблоны + заполнители

Чтобы расширить функционал шаблонных строк, комбинируйте их с функциями и тернарным оператором:

function exclaim(word) {
  return word.toUpperCase() + '!';
}

let userInput = { input: 'огонь', isDanger: true };
let alert = `Внимание: ${exclaim(userInput.input)} Уровень опасности${userInput.isDanger ? ': ВЫСОКИЙ' : ': низкий'}.`;

Для более сложных случаев подойдут сторонние библиотеки, такие как Lodash или sprintf-js:

import sprintf from 'sprintf-js';

let object = "Мир";
let alert = sprintf(`Привет, %s!`, object); // Классический прием с sprintf.

Лучше перестраховаться: Возможные трудности

• Экранирование: символы '`' и '$' могут вести себя неожиданно, не забудьте их экранировать.
• Метки шаблонов: Это эффективный, но сложный прием, предназначенный для продвинутых пользователей.
• Пробелы: Шаблонная строка сохранит все пробелы и переносы строк.

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

Для наглядности представьте переменные в JavaScript как игральные карты, которые выкладываются в партии:

Карты: ♠️(Туз), ♥️(Черви), ♦️(Бубны), [переменная: ♣️(Трефы)]

С помощью шаблонной строки вы можете подставить переменную следующим образом:

const clubs = '♣️';
let hand = `Держим ♠️, ♥️, ♦️ и ${clubs}.`;

Теперь у нас на руках следующее:

"Держим ♠️, ♥️, ♦️ и ♣️."

Игра началась! 🎲

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

1. Шаблонные строки (Template literals) – JavaScript | MDN — обязательное руководство по шаблонным строкам.
2. Строки — советы, как с легкостью и удовольствием работать с шаблонными строками.
3. Как интерполировать переменные в строках JavaScript? – Stack Overflow — здесь собраны основные рекомендации и наблюдения профессионалов.
4. Шаблонные строки | CSS-Tricks — детальный анализ использования шаблонных строк в JavaScript.
5. no-template-curly-in-string – ESLint — о том, каким может быть код согласно стандартам ESLint.
6. Шаблонные строки JavaScript – YouTube — видеоурок, детально рассматривающий тему в удобной форме.

Завершение

Умение внедрять переменные в строки приближает вас к мастерству в программировании. Если этот ответ оказался вам полезен, оцените его. Успехов вам в кодинге. И пусть код будет с вами!👩‍💻