JavaScript Літерали шаблону
Синоніми:
- Літерали шаблону
- Рядки шаблону
- Шаблони рядків
- Синтаксис Back-Tics (зворотні галочки)
Back-Tics Синтаксис
Шаблонні літерали (літерали шаблону) використовують зворотні галочки (``), а не лапки (""), щоб визначити рядок:
Лапки всередині рядків
За допомогою літералів шаблону ви можете використовувати як одинарні, так і подвійні лапки всередині рядка:
Багаторядкові рядки
Літерали шаблону допускають багаторядкові рядки:
Інтерполяція
Літерали шаблонів забезпечують простий спосіб інтерполяції змінних і виразів у рядки.
Цей метод називається інтерполяцією рядка.
Синтаксис такий:
${...}
Підстановки змінних
Літерали шаблону дозволяють змінні в рядках:
Приклад
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
Спробуйте самі »
Автоматична заміна змінних дійсними значеннями називається інтерполяцією рядків.
Підстановка виразів
Літерали шаблону дозволяють вирази в рядках:
Приклад
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
Спробуйте самі »
Автоматична заміна виразів дійсними значеннями називається інтерполяцією рядків.
HTML Шаблони
Приклад
let header = "Літерали шаблонів";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
Спробуйте самі »
Підтримка браузерами
Template Literals є функцією ES6 (JavaScript 2015).
Вона підтримується всіма сучасними браузерами:
| Chrome | Edge | Firefox | Safari | Opera |
| Так | Так | Так | Так | Так |
Template Literals не підтримується в Internet Explorer.
Повний довідник рядків
Щоб отримати повну довідкову інформацію про рядки, перейдіть до:
Повний довідник JavaScript рядків на нашому сайті W3Schools українською.
Довідник містить описи та приклади всіх властивостей і методів рядків.
