Template literals

JavaScriptJunior~1 хв читання

Шаблонні рядки (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}<b>${values[i] || ''}</b>`, ''
  );
}

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

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

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

Підсумок

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

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

javascript

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

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

console.log(message);

Результат:

javascript

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.