„JavaScript“ šablonų literalai (šablonų eilutės)

Turinys

Šabloniniai literatai stygoms
Daugialypės eilutės naudojant šabloninius literalus
Išraiškos interpoliacija
Pažymėti šablonai

Šioje pamokoje su pavyzdžių pagalba sužinosite apie „JavaScript“ šablonų literatus (šablonų eilutes).

Šabloniniai literalai (šablonų eilutės) leidžia naudoti eilutes arba įdėtas išraiškas eilutės pavidalu. Jie yra uždaryti užpakaliuose ``. Pavyzdžiui,

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

Pastaba : Šablono literalas buvo pristatytas 2015 m. (Taip pat žinomas kaip ECMAScript 6 arba ES6 arba ECMAScript 2015). Kai kurios naršyklės gali nepalaikyti šabloninių literatų naudojimo. Norėdami sužinoti daugiau, apsilankykite „JavaScript Template Literal“ palaikymo tarnyboje.

Šabloniniai literatai stygoms

Ankstesnėse „JavaScript“ versijose eilutėms naudosite vieną ''arba dvigubą citatą "". Pavyzdžiui,

 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

Norėdami naudoti tas pačias citatas eilutės viduje, galite naudoti pabėgimo simbolį .

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

Užuot naudoję pabėgimo simbolius, galite naudoti šablonų literalus. Pavyzdžiui,

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

Kaip matote, šabloniniai literalai ne tik leidžia lengvai įtraukti citatas, bet ir daro mūsų kodą švaresnį.

Daugialypės eilutės naudojant šabloninius literalus

Šabloniniai literalai taip pat palengvina kelių eilučių rašymą. Pavyzdžiui,

Naudodami šablonų literalus, galite juos pakeisti

 // 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)

Abiejų šių programų išvestis bus ta pati.

 Tai ilgas pranešimas, apimantis kelias kodo eilutes.

Išraiškos interpoliacija

Prieš „JavaScript ES6“ turėtumėte naudoti +operatorių, kad susietumėte kintamuosius ir išraiškas eilutėje. Pavyzdžiui,

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

Naudojant šablonų literalus, šiek tiek lengviau į eilutę įtraukti kintamuosius ir posakius. Tam mes naudojame $(… )sintaksę.

 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')`)

Rezultatas

 Sveikas Džekas 4 + 5 suma yra 9 labai didelė

Kintamųjų ir išraiškų priskyrimo procesas šablono literate yra žinomas kaip interpoliacija.

Pažymėti šablonai

Paprastai argumentams perduoti naudosite funkciją. Pavyzdžiui,

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

Tačiau galite sukurti pažymėtus šablonus (kurie elgiasi kaip funkcija) naudodami šablonų literalus. Naudojate žymas, leidžiančias išanalizuoti šablonų literalus su funkcija.

Pažymėtas šablonas rašomas kaip funkcijos apibrėžimas. Tačiau jūs nelaikote skliaustų, ()kai skambinate pažodžiui. Pavyzdžiui,

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

Rezultatas

 („Labas Džekas“)

Eilutės reikšmių masyvas perduodamas kaip pirmasis žymos funkcijos argumentas. Taip pat vertes ir išraiškas galite perduoti kaip likusius argumentus. Pavyzdžiui,

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

Rezultatas