Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить "tagged template literal"?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

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

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

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

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

```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: реальні застосування

1. **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 }
    }
  `;
  ```
3. **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` (вставлені значення) |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати541 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.