Szablony ciągów znaków w JavaScript

Synonimy:

  • Ciągi szablonowe
  • Ciągi szablonowe
  • Szablony ciągów znaków
  • Gramatyka Back-Tics

Gramatyka Back-Tics

Literały szablonoweUżywaj反引号 (``) zamiast cudzysłów ("") do definiowania ciągów znaków:

Przykład

let text = `Hello World!`;

Spróbuj sam

cudzysłów w ciągu znaków

Poprzez użycieLiterały szablonowe，możesz używać zarówno apostrofów jak i cudzysłów w ciągu znaków:

Przykład

let text = `He's often called "Johnny"`;

Spróbuj sam

Wieloliniowe ciągi znaków

Literały szablonowePozwala na wieloliniowe ciągi znaków:

Przykład

let text =
The quick
brązowy lisek
skacze przez
the lazy dog`;

Spróbuj sam

Interpolacja

Literały szablonoweZapewnia prosty sposób wstawiania zmiennych i wyrażeń do ciągów znaków.

Ta metoda nazywa się interpolacją ciągów znaków (string interpolation).

Gramatyka

${...}

Zastępowanie zmiennych

Literały szablonowePozwala na zmienne w ciągu znaków:

Przykład

let firstName = "Bill";
let lastName = "Gates";
let text = `Welcome ${firstName}, ${lastName}!`;

Spróbuj sam

Automatyczne zastępowanie zmiennych wartościami rzeczywistymi nazywa sięInterpolacja ciągów znaków.

Zastępowanie wyrażeń

Literały szablonowePozwala na wyrażenia w ciągu znaków:

Przykład

let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

Spróbuj sam

Automatyczne zastępowanie wyrażeń wartościami rzeczywistymi nazywa się interpolacją ciągów znaków.

HTML szablon

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>`;

Spróbuj sam

Obsługa przeglądarek

Internet Explorer nie obsługujeLiterały szablonowe.

Pierwsza wersja przeglądarki, która w pełni obsługuje literały szablonowe to:

Chrome IE Firefox Safari Opera
Chrome 41 Edge 13 Firefox 34 Safari 10 Opera 29
marzec 2015 roku listopad 2015 roku grudzień 2014 roku wrzesień 2016 roku kwiecień 2015 roku

Pełna referencja stringów

Dla pełnej referencji odwiedź naszą pełną Podręcznik JavaScript String.

Ten podręcznik zawiera opisy i przykłady wszystkich właściwości i metod stringów.