Шаблонные строки: интерполяция и tagged templates

Шаблонные строки: мощь и элегантность

Шаблонные строки (template literals) — это не просто замена кавычкам. Они открывают новые возможности для работы со строками в JavaScript. Давай разберёмся, как использовать их на полную!

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

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

Раньше для объединения строк и переменных приходилось использовать конкатенацию (+). Теперь всё проще:

const product = "кофе";
const price = 120;

// Старый способ (уже не модно 😅)
console.log("Цена " + product + ": " + price + " руб.");

// Новый способ — чисто и читаемо!
console.log(`Цена ${product}: ${price} руб.`);

💡 Внутри ${} можно писать любые выражения JavaScript: javascript console.log(`Сумма: ${2 + 3}`); // "Сумма: 5"

Многострочные строки без костылей 📜

Раньше для переносов строк использовали \n или конкатенацию. Теперь просто пишем как есть:

// Старый способ
const oldStr = "Первая строка\n" + 
               "Вторая строка";

// Новый способ — элегантно!
const newStr = `Первая строка
Вторая строка`;

Отлично подходит для HTML-шаблонов:

const user = { name: "Анна", age: 25 };
const html = `
  <div class="user">
    <h2>${user.name}</h2>
    <p>Возраст: ${user.age}</p>
  </div>
`;

Tagged Templates: продвинутый уровень 🔥

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

Как это работает?

Функция-тег получает:

Массив строковых частей (разделённых ${})
Значения всех вставок (то, что внутри ${})

function highlight(strings, ...values) {
  let result = "";

  strings.forEach((str, i) => {
    result += str;
    if (values[i]) {
      result += `<mark>${values[i]}</mark>`;
    }
  });

  return result;
}

const name = "Данила";
const age = 30;

console.log(highlight`Привет, ${name}! Тебе ${age} лет.`);
// "Привет, <mark>Данила</mark>! Тебе <mark>30</mark> лет."

Где это применяется?

Экранирование HTML (защита от XSS)
Интернационализация (i18n)
Стилизация строк (как в примере выше)
Сложные логические операции с шаблонами

Практические примеры из жизни ️

1. Форматирование валюты

function formatCurrency(strings, ...values) {
  const str = strings.reduce((result, str, i) => {
    let value = values[i] || "";
    if (typeof value === "number") {
      value = value.toFixed(2);
    }
    return result + str + value;
  }, "");

  return str;
}

const price = 99.9;
console.log(formatCurrency`Цена: ${price} руб.`); // "Цена: 99.90 руб."

2. Шаблонизатор запросов SQL

function sqlQuery(strings, ...values) {
  // Здесь должна быть проверка на SQL-инъекции!
  return {
    query: strings.join("?"),
    params: values
  };
}

const userId = 42;
const query = sqlQuery`SELECT * FROM users WHERE id = ${userId}`;
console.log(query); // { query: "SELECT * FROM users WHERE id = ?", params: [42] }

⚠️ Важно! Это упрощённый пример. В реальном проекте всегда используйте параметризованные запросы или ORM.

Под капотом: как это устроено? 🔍

Когда JavaScript видит tagged template:

tag`Текст ${value} ещё текст`;

Он преобразует это в вызов функции:

tag(["Текст ", " ещё текст"], value);

То есть:

Все статические части строки собираются в массив
Все динамические выражения передаются как отдельные аргументы

Когда использовать, а когда нет? ⚖️

✅ Используйте шаблонные строки, когда:

Нужна интерполяция переменных
Требуется многострочный текст
Хотите использовать tagged templates

❌ Не используйте, когда:

Простая строка без переменных ('строка' быстрее, чем `строка`)
В высоконагруженных участках кода (микрооптимизации)

Продвинутые трюки для профи 🎩

1. Вложенные шаблонные строки

const items = ["🍎", "🍌", "🍊"];
console.log(`Список: ${items.map(item => `[${item}]`).join(", ")}`);
// "Список: [🍎], [🍌], [🍊]"

2. Тернарные операторы внутри

const score = 85;
console.log(`Результат: ${score > 80 ? "Отлично!" : "Можно лучше"}`);

3. Деструктуризация в tagged templates

function greet(strings, ...values) {
  const [name, age] = values;
  return `${strings[0]}${name}, тебе ${age} лет!`;
}

const user = ["Данила", 30];
console.log(greet`Привет, ${user[0]}! Тебе ${user[1]} лет.`);

Шаблонные строки — это один из тех инструментов, которые делают JavaScript современным и выразительным. Попробуй применить их в своём коде уже сегодня!