Литералы шаблонов JavaScript
Синонимы:
- Литералы шаблонов
- Строки шаблона
- Шаблоны строк
- Синтаксис Back-Tics
Синтаксис Back-Tics
Шаблонные литералы используют обратные кавычки (``), а не кавычки ("") для определения строки:
Пример
let text = `Hello World!`;
Цитаты внутри строк
С литералами шаблонов вы можете использовать как одинарные, так и двойные кавычки внутри строки:
Пример
let text = `He's often called "Johnny"`;
Многострочные строки
Литералы шаблонов позволяют использовать многострочные строки:
Пример
let text =
`The quick
brown fox
jumps over
the lazy dog`;
Интерполяция
Литералы шаблонов обеспечивают простой способ интерполяции переменных и выражений в строки.
Этот метод называется строковой интерполяцией.
Синтаксис:
${...}
Замена переменных
Литералы шаблонов позволяют использовать переменные в строках:
Пример
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 = "Templates Literals";
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 |
| Yes | Yes | Yes | Yes | Yes |
Template Literals не поддерживается в Internet Explorer.
Полная ссылка на строку
Для получения полной справки по строкам перейдите на наш:
Полный справочник строк JavaScript .
Справочник содержит описания и примеры всех строковых свойств и методов.