JS-025
Навчальна ілюстрація про Template Literals у JavaScript — Вставляй змінні прямо в текст
Beginner3 min~3 min read#template-literals#strings#interpolation

Template Literals

Вставляй змінні прямо в текст

Goal

Навчись використовувати шаблонні рядки для створення тексту зі змінними.

Explanation

  • Template Literals — це сучасний спосіб створювати текстові рядки.
  • Вони використовують символи ` (бектики) замість звичайних лапок.
  • Усередині рядка можна вставляти змінні за допомогою ${}.
  • Такий запис читається значно легше, ніж довгі ланцюжки з оператором +.
  • Template Literals дуже часто використовуються в сучасному JavaScript.

Аналогія

Уяви шаблон листа, у якому є порожні місця для імені чи міста. JavaScript автоматично підставляє потрібні значення.

Code

let name = "Vitalii";

console.log(`Hello, ${name}!`);

Result: Hello, Vitalii!

Типова помилка

Новачки часто використовують звичайні лапки замість бектиків. У такому випадку ${name} не працюватиме.

Remember

  • ✦ Template Literals використовують бектики (`).
  • ✦ ${} вставляє значення змінної.
  • ✦ Цей спосіб читати значно легше.

Quick Quiz

Який символ використовується для Template Literals?

Resources