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

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

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

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

Контент

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

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

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

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

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

## Що таке шаблонні рядки

**Шаблонний рядок** - це рядок, укладений **у зворотні лапки** (`` ` ``, не `'` і не `"`).

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

> Усередині шаблонного рядка можна вставляти змінні й вирази за допомогою `${ ... }`.

---

## 1. Основна відмінність - підстановка змінних

### До ES6:

```javascript
const name = 'Alex';
const age = 25;
const msg = 'My name is ' + name + ' and I am ' + age + ' years old.';
console.log(msg);
// My name is Alex and I am 25 years old.
```

### З ES6 (шаблонні рядки):

```javascript
const msg = `My name is ${name} and I am ${age} years old.`;
console.log(msg);
// My name is Alex and I am 25 years old.
```

Код став **чистішим, коротшим і зрозумілішим**.

---

## 2. Можна вставляти **будь-які вирази**

```javascript
const a = 5;
const b = 10;

console.log(`a + b = ${a + b}`); // a + b = 15
console.log(`Випадкове число: ${Math.random()}`);
console.log(`Верхній регістр: ${'js'.toUpperCase()}`);
```

Усе, що всередині `${ ... }`, обчислюється як звичайний JS-вираз.

---

## 3. Багаторядкові рядки без \n

### Раніше:

```javascript
const text = 'Line 1\n' +
             'Line 2\n' +
             'Line 3';
```

### Тепер:

```javascript
const text = `
Line 1
Line 2
Line 3
`;
console.log(text);
```

Символ переведення рядка (`\n`) не потрібен - формат зберігається як є.

---

## 4. Інтерполяція з вкладеними шаблонами

Можна комбінувати шаблони і навіть використовувати їх усередині функцій:

```javascript
const name = 'Alex';
const hobby = 'coding';

const greeting = `Hello, ${name}! Your hobby is ${hobby.toUpperCase()}.`;
console.log(greeting);
// Hello, Alex! Your hobby is CODING.
```

---

## 5. Tagged templates (просунуте використання)

Шаблонні рядки можна **"тегувати"** функціями для кастомної обробки:

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

const name = 'Alex';
const lang = 'JavaScript';
console.log(highlight`Hello ${name}, you love ${lang}!`);
// Hello **Alex**, you love **JavaScript**!
```

> Це використовується в бібліотеках на кшталт **styled-components** (CSS у React), **graphql-tag**, і для безпечних HTML-шаблонів.

---

## 6. Порівняння зі звичайними лапками

| Особливість | `'одинарні'` / `"подвійні"` | `шаблонні` |
|---|---|---|
| Підстановка змінних | Немає | Через `${}` |
| Багаторядкові рядки | Немає (потрібен `\n`) | Можна напряму |
| Вкладені вирази | Немає | Можна (`${x + y}`) |
| Тегування (функції) | Немає | Є |
| Символ лапки всередині | Потрібно екранувати (`\'`) | Не потрібно, якщо немає `` ` `` |
| Підтримка ES | Старі версії | З ES6 (2015) |

---

## Коротке резюме

| Що робить | Приклад | Результат |
|---|---|---|
| Вставка змінних | `Hello, ${name}` | `"Hello, Alex"` |
| Вирази | `${1 + 2}` | `"3"` |
| Багаторядкові рядки | `A\nB` | `"A↵B"` |
| Тегіровані шаблони | `` tag`text ${x}` `` | Обробляється як функція |

---

## Просте правило

> Звичайні лапки - для **простих рядків**.
> Зворотні лапки - для **динамічних і багаторядкових рядків**.

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

Для рев’юера

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

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