Как работают шаблонные строки в JavaScript – наглядные примеры

Шаблонные строки — это особый способ создавать строки в JavaScript. Они начинаются и заканчиваются обратными кавычками (``), а не обычными кавычками ("") или одинарными кавычками ('').

Чтобы вставить значение переменной или результат выражения в шаблонную строку, вы используете конструкцию ${…}. Например:

const userName = "Дмитро";
const userAge = 48;
 
const greeting = `Привет, меня зовут ${userName} и мне ${userAge} лет.`;
console.log(greeting);

В этом примере ${userName} вставляет значение переменной userName в строку.

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

Пример 1: форматирования многострочного текста с вставкой переменной

const userName = "Дмитро";
 
const congratulation = `
  Поздравляем с днём рождения!
  Желаем вам всего самого лучшего,
  ${userName}, пусть этот день будет наполнен радостью и счастьем.
  Мы желаем вам успехов, здоровья и реализации всех ваших мечтаний.
`;
 
console.log(congratulation);

Пример 2: Вычисление цены с скидкой

Этот код демонстрирует, как использовать шаблонные строки для вычисления цены товара после применения скидки.

const price = 100; // Цена товара в долларах
const discount = 20; // Скидка в процентах
 
const totalPrice = `Цена товара $${price} со скидкой ${discount}% будет равна $${price - (price * discount / 100)}.`;
console.log(totalPrice);

Пример 3: Формирование сообщения о статусе членства

Этот код показывает, как использовать шаблонные строки для формирования сообщения о статусе членства в команде. Здесь также используется тернарный оператор для выбора нужного текста в зависимости от статуса членства.

const isMember = true; // Флаг активного членства
const membershipMessage = `Вы ${isMember ? "активный" : "неактивный"} член нашей команды.`;
console.log(membershipMessage);

В строке формирования membershipMessage тернарный оператор (? :) проверяет значение isMember. Если isMember равно true, то вставляется слово "активный", иначе — "неактивный".