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

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

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

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

Контент

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

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

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

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

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

Шаблонні рядки (template literals) - це сучасний і дуже зручний спосіб роботи з рядками в JavaScript.
Вони з'явилися в стандарті **ES6 (ECMAScript 2015)** і дозволяють писати **багаторядкові рядки**, **вбудовувати змінні** та **вирази** прямо всередині тексту.

---

## Синтаксис

Шаблонні рядки створюються не за допомогою звичайних лапок (`'` або `"`),
а за допомогою **зворотних лапок** - `` ` `` (backticks):

```javascript
const name = 'Tim';
const greeting = `Привіт, ${name}!`;
console.log(greeting); // "Привіт, Tim!"
```

---

## Основні можливості

### **Інтерполяція змінних і виразів**

Можна вставляти **будь-які вирази JavaScript** всередину `${...}`:

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

console.log(`Сума: ${a + b}`); // "Сума: 15"
console.log(`Через 2 роки: ${2025 + 2}`); // "Через 2 роки: 2027"
console.log(`Випадкове число: ${Math.random()}`);
```

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

---

### **Багаторядкові рядки**

Раніше доводилося писати так:

```javascript
const text = 'Перший рядок\n' +
              'Другий рядок\n' +
              'Третій рядок';
```

Тепер можна просто:

```javascript
const text = `
Перший рядок
Другий рядок
Третій рядок
`;
console.log(text);
```

> Переноси рядків зберігаються автоматично.

---

### **Вкладені вирази та виклики функцій**

```javascript
const user = { name: 'Tim', age: 25 };
function greet(u) {
  return `Привіт, ${u.name}! Тобі ${u.age} років.`;
}

console.log(`${greet(user)} Гарного дня!`);
```

---

### **Шаблонні рядки можна використовувати у виразах**

```javascript
const price = 100;
const message = `Ціна товару: ${price}$`;
console.log(message);
```

---

## Просунута можливість - *tagged templates*

> Так звані tagged templates - це функція, яка **обробляє шаблонний рядок вручну**.

Приклад:

```javascript
function highlight(strings, ...values) {
 return strings.reduce((acc, str, i) =>
 `${acc}${str}${values[i] || ''}`, ''
 );
}

const name = 'Oleh';
const age = 27;

console.log(highlight`Ім'я: ${name}, Вік: ${age}`);
// Виведе: "Ім'я: Oleh, Вік: 27"
```

> Це потужна техніка для шаблонізаторів, локалізації, форматування і навіть створення SQL-запитів із захистом від ін'єкцій.

---

## Підсумок

| Можливість | Звичайні рядки | Шаблонні рядки |
|---|---|---|
| Багаторядкові рядки | Ні | Так |
| Вставка змінних | Конкатенація через `+` | Через `${}` |
| Виклик функцій усередині | Незручно | Легко |
| Читабельність | Погана | Відмінна |
| Використовує лапки | `'` або `"` | `` ` `` (backtick) |

---

## Приклад для закріплення

```javascript
const product = 'Сорочка';
const price = 2500;

const message = `
Товар: ${product}
Ціна: ${price}$
Разом з доставкою: ${price + 500}$
`;

console.log(message);
```

Результат:

```javascript
Товар: Сорочка
Ціна: 2500$
Разом з доставкою: 3000$
```

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

Для рев’юера

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

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