Literały szablonów JavaScript
Synonimy:
- Literały szablonów
- Ciągi szablonów
- Szablony ciągów
- Składnia Back-Tics
Składnia Back-Tics
Literały szablonowe używają back-ticków (``) zamiast cudzysłowów ("") do zdefiniowania ciągu:
Przykład
let text = `Hello World!`;
Cytaty wewnątrz ciągów
W przypadku literałów szablonu możesz używać zarówno pojedynczych, jak i podwójnych cudzysłowów w ciągu:
Przykład
let text = `He's often called "Johnny"`;
Ciągi wielowierszowe
Literały szablonów umożliwiają ciągi wielowierszowe:
Przykład
let text =
`The quick
brown fox
jumps over
the lazy dog`;
Interpolacja
Literały szablonów zapewniają łatwy sposób interpolacji zmiennych i wyrażeń w ciągi.
Metoda ta nazywana jest interpolacją ciągów.
Składnia to:
${...}
Zmienne substytucje
Literały szablonowe zezwalają na zmienne w ciągach:
Przykład
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
Automatyczne zastępowanie zmiennych wartościami rzeczywistymi nazywa się interpolacją ciągów znaków .
Podstawianie wyrażenia
Literały szablonowe umożliwiają wyrażenia w ciągach:
Przykład
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
Automatyczne zastępowanie wyrażeń wartościami rzeczywistymi nazywa się interpolacją ciągów znaków .
Szablony HTML
Przykład
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>`;
Obsługa przeglądarki
Template Literalsto funkcja ES6 (JavaScript 2015).
Jest obsługiwany we wszystkich nowoczesnych przeglądarkach:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
Template Literalsnie jest obsługiwany w przeglądarce Internet Explorer.
Pełne odniesienie do ciągu
Aby uzyskać pełne odniesienie do ciągu, przejdź do naszego:
Pełne odniesienie do ciągów JavaScript .
Odwołanie zawiera opisy i przykłady wszystkich właściwości i metod ciągów.