Шаблонні літерали — JavaScript з нуля: від основ до практики

📖 Теорія

Шаблонні літерали (template literals) — це сучасний спосіб створювати рядки в JavaScript. Замість звичайних лапок використовуються зворотні лапки (backticks): ` `. На клавіатурі ця клавіша зазвичай знаходиться зліва від цифри 1.

Головна перевага шаблонних літералів — вставка змінних та виразів прямо в рядок за допомогою синтаксису ${вираз}. Це набагато зручніше, ніж конкатенація через +.

Наприклад, замість 'Мене звати ' + name + ', мені ' + age + ' років' можна написати `Мене звати ${name}, мені ${age} років`. Код стає чистішим та зрозумілішим.

Усередині ${} можна вставляти не лише змінні, а й будь-які вирази: математичні обчислення, виклики методів, тернарні оператори тощо. Наприклад: `2 + 2 = ${2 + 2}` виведе '2 + 2 = 4'.

Шаблонні літерали також підтримують багаторядковий текст — просто натисніть Enter усередині зворотних лапок, і рядок перенесеться на новий рядок без спеціальних символів.

💡 Приклад коду

let name = 'Олексій';
let age = 20;

// Шаблонний літерал
console.log(`Привіт, ${name}!`);
console.log(`Тобі ${age} років`);

// Вираз усередині ${}
console.log(`Через 5 років тобі буде ${age + 5}`);

// Багаторядковий текст
console.log(`Рядок 1
Рядок 2
Рядок 3`);

Вивід:

📝 ЗАВДАННЯ (3)

1.

Завдання 1: Простий шаблон

10 XP

Створіть змінну animal зі значенням 'кіт'. Використайте шаблонний літерал, щоб вивести: Мій улюблений звір — кіт!

Вхідні дані (stdin):

🔓 Розв'язок:

let animal = 'кіт';
console.log(`Мій улюблений звір — ${animal}!`);

Вивід:

2.

Завдання 2: Вираз у шаблоні

20 XP

Створіть змінні price = 250 та quantity = 3. Виведіть за допомогою шаблонного літералу: Сума: 750 грн (де 750 обчислюється автоматично)

Вхідні дані (stdin):

🔓 Розв'язок:

let price = 250;
let quantity = 3;
console.log(`Сума: ${price * quantity} грн`);

Вивід:

3.

Завдання 3: Картка користувача

30 XP

Створіть змінні: userName = 'Марія', userAge = 28, userCity = 'Львів'. Виведіть одним console.log за допомогою шаблонного літералу три рядки:
Імʼя: Марія
Вік: 28
Місто: Львів

Вхідні дані (stdin):

🔓 Розв'язок:

let userName = 'Марія';
let userAge = 28;
let userCity = 'Львів';
console.log(`Імʼя: ${userName}
Вік: ${userAge}
Місто: ${userCity}`);

Вивід: