Literały szablonów JavaScript (ciągi szablonów)

Spisie treści

Literały szablonów dla ciągów
Ciągi wielowierszowe z wykorzystaniem literałów szablonów
Interpolacja wyrażeń
Otagowane szablony

W tym samouczku dowiesz się o literałach szablonów JavaScript (ciągach szablonów) za pomocą przykładów.

Literały szablonów (ciągi szablonów) pozwalają na użycie ciągów lub wyrażeń osadzonych w postaci ciągu. Są otoczone znakami grawitacyjnymi ``. Na przykład,

 const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!

Uwaga : Literał szablonu został wprowadzony w 2015 r. (Znany również jako ECMAScript 6 lub ES6 lub ECMAScript 2015). Niektóre przeglądarki mogą nie obsługiwać literałów szablonów. Odwiedź stronę wsparcia technicznego szablonów JavaScript, aby dowiedzieć się więcej.

Literały szablonów dla ciągów

We wcześniejszych wersjach JavaScript używałeś pojedynczego cudzysłowu ''lub podwójnego cudzysłowu ""dla ciągów znaków. Na przykład,

 const str1 = 'This is a string'; // cannot use the same quotes const str2 = 'A "quote" inside a string'; // valid code const str3 = 'A 'quote' inside a string'; // Error const str4 = "Another 'quote' inside a string"; // valid code const str5 = "Another "quote" inside a string"; // Error

Aby użyć tych samych cudzysłowów wewnątrz ciągu, możesz użyć znaku ucieczki .

 // escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code

Zamiast używać znaków ucieczki, możesz użyć literałów szablonów. Na przykład,

 const str1 = `This is a string`; const str2 = `This is a string with a 'quote' in it`; const str3 = `This is a string with a "double quote" in it`;

Jak widać, literały szablonów nie tylko ułatwiają umieszczanie cytatów, ale także sprawiają, że nasz kod wygląda bardziej przejrzyście.

Ciągi wielowierszowe z wykorzystaniem literałów szablonów

Literały szablonów ułatwiają również pisanie ciągów wielowierszowych. Na przykład,

Używając literałów szablonów, możesz zamienić

 // using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)

 const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)

Wynik obu tych programów będzie taki sam.

 To jest długa wiadomość, która obejmuje wiele wierszy kodu.

Interpolacja wyrażeń

Przed JavaScript ES6 używałbyś +operatora do łączenia zmiennych i wyrażeń w ciągu. Na przykład,

 const name = 'Jack'; console.log('Hello ' + name); // Hello Jack

Dzięki literałom szablonów nieco łatwiej jest umieszczać zmienne i wyrażenia w ciągu. W tym celu używamy $(… )składni.

 const name = 'Jack'; console.log(`Hello $(name)`); // template literals used with expressions const result = `The sum of 4 + 5 is $(4 + 5)`; console.log(result); console.log(`$(result < 10 ? 'Too low': 'Very high')`)

Wynik

 Hello Jack Suma 4 + 5 to 9 Bardzo wysoka

Proces przypisywania zmiennych i wyrażeń wewnątrz literału szablonu jest nazywany interpolacją.

Otagowane szablony

Zwykle do przekazywania argumentów używałbyś funkcji. Na przykład,

 function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);

Można jednak tworzyć szablony oznakowane (zachowujące się jak funkcja) przy użyciu literałów szablonów. Używasz tagów, które umożliwiają analizowanie literałów szablonu za pomocą funkcji.

Tagowany szablon jest zapisywany jak definicja funkcji. Jednak ()przy wywoływaniu literału nie należy przekazywać nawiasów . Na przykład,

 function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);

Wynik

 ("Cześć Jack")

Tablica wartości łańcuchowych jest przekazywana jako pierwszy argument funkcji znacznika. Możesz również przekazać wartości i wyrażenia jako pozostałe argumenty. Na przykład,

 const name = 'Jack'; const greet = true; function tagExample(strings, nameValue) ( let str0 = strings(0); // Hello let str1 = strings(1); // , How are you? if(greet) ( return `$(str0)$(nameValue)$(str1)`; ) ) // creating tagged literal // passing argument name const result = tagExample`Hello $(name), How are you?`; console.log(result);

Wynik