Що робить "tagged template literal"?

JavaScriptJunior~1 хв читання

Що таке "тегновані шаблонні строки"

Зазвичай шаблонна строка просто вставляє змінні:

javascript

const name = 'Alex';
console.log(`Hello, ${name}!`);
// -> Hello, Alex!

Але якщо перед шаблонною строкою вказати ім'я функції, JavaScript викличе цю функцію і передасть у неї:

Масив частин строки (між підстановками)
Усі підставлені значення (${...})

javascript

tag`Hello, ${name}!`

Це і є тегований шаблон.

Приклад 1: базовий

javascript

function tag(strings, ...values) {
  console.log(strings); // [ 'Hello, ', '!' ]
  console.log(values);  // [ 'Alex' ]
}

const name = 'Alex';
tag`Hello, ${name}!`;

Що відбувається під капотом:

javascript

// Інтерпретатор робить приблизно це:
tag(["Hello, ", "!"], "Alex");

Приклад 2: обробка вмісту

Ти можеш використовувати тег-функцію для створення власних шаблонних мов, форматування строк або безпечної обробки даних (наприклад, захист від XSS).

javascript

function highlight(strings, ...values) {
  return strings.reduce(
    (result, str, i) => result + str + (values[i] ? `<b>${values[i]}</b>` : ''),
    ''
  );
}

const name = 'Alex';
const lang = 'JavaScript';

const message = highlight`Hello, ${name}! You love ${lang}.`;
console.log(message);
// -> Hello, <b>Alex</b>! You love <b>JavaScript</b>.

Тут ми "спіймали" кожну вставку ${...} і обгорнули її в <b>…</b>.

Приклад 3: захист від XSS (безпечний HTML)

javascript

function safeHTML(strings, ...values) {
  const escape = str =>
    String(str)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;");

  return strings.reduce(
    (res, str, i) => res + str + (values[i] ? escape(values[i]) : ''),
    ''
  );
}

const userInput = '<script>alert("Hacked!")</script>';
const html = safeHTML`<div>User says: ${userInput}</div>`;

console.log(html);
// -> <div>User says: &lt;script&gt;alert("Hacked!")&lt;/script&gt;</div>

Завдяки тегу HTML залишається безпечним (жодного виконання <script>).

Приклад 4: форматування строк

javascript

function format(strings, ...values) {
  return strings.reduce(
    (res, str, i) => res + str + (values[i] !== undefined ? `[${values[i]}]` : ''),
    ''
  );
}

const a = 10, b = 20;
console.log(format`Sum of ${a} and ${b} is ${a + b}`);
// -> Sum of [10] and [20] is [30]

Приклад 5: реальні застосування

Styled Components (React)

javascript

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
`;

Тут styled.button - це тег-функція, яка отримує шаблон і створює CSS-об'єкт. 2. GraphQL-запити

javascript

const query = gql`
  query GetUser {
    user(id: 1) { name }
  }
`;

i18n (інтернаціоналізація)

javascript

translate`Welcome, ${userName}!`;

Як це працює під капотом

Коли ти пишеш:

javascript

tag`Hello, ${name}!`

JS робить приблизно це:

javascript

tag(["Hello, ", "!"], name);

Тобто:

strings - масив усіх строк між вставками
values - масив усіх вставлених значень

Порівняння зі звичайними шаблонними строками

Особливість	Звичайна шаблонна строка	Тегована шаблонна строка
Синтаксис	`Hello, ${name}`	`tag\`Hello, ${name}``
Підстановки	Автоматично вставляються	Обробляються вручну
Гнучкість	Лише інтерполяція	Можна фільтрувати, форматувати, екранувати
Застосування	Прості строки	Шаблонізація, безпека, CSS-in-JS, SQL, i18n

Резюме

Що робить	Пояснення
Тегована шаблонна строка	Це шаблонна строка, перед якою стоїть функція (тег), яка отримує строки й значення
Навіщо потрібна	Щоб керувати тим, як з'єднуються й інтерпретуються `${}`
Де використовується	Безпечний HTML, CSS-in-JS, форматування, інтернаціоналізація
Ключові параметри	`strings` (частини шаблону), `values` (вставлені значення)

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.