U ovom ćete tutorijalu uz primjere naučiti o JavaScript predlošcima literature (predlošcima).
Literal predložaka (nizovi predložaka) omogućuju vam upotrebu nizova ili ugrađenih izraza u obliku niza. Zatvoreni su u zaostatke ``. Na primjer,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Napomena : Predložak je uveden 2015. godine (poznat i kao ECMAScript 6 ili ES6 ili ECMAScript 2015). Neki preglednici možda ne podržavaju upotrebu literatura predložaka. Posjetite podršku za JavaScript Template Literal da biste saznali više.
Predlošci za žice
U ranijim verzijama JavaScript- ''a ""za nizove biste koristili jedan navodnik ili dvostruki navodnik . Na primjer,
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
Da biste koristili iste citate unutar niza, možete upotrijebiti znak za bijeg .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
Umjesto korištenja escape znakova, možete koristiti literal predložaka. Na primjer,
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`;
Kao što vidite, predlošci literala ne samo da olakšavaju uključivanje citata, već i čine naš kod čišćim.
Višeredne žice pomoću predložaka literala
Literali predložaka također olakšavaju pisanje višerednih nizova. Na primjer,
Upotrebom doslovnih literala možete zamijeniti
// using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)
s
const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)
Izlaz oba ova programa bit će jednak.
Ovo je dugačka poruka koja se proteže kroz više redaka u kodu.
Interpolacija izraza
Prije JavaScript ES6, koristili biste +operator za spajanje varijabli i izraza u niz. Na primjer,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
S literarnim predlozima malo je lakše uključiti varijable i izraze unutar niza. Za to koristimo $(… )sintaksu.
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')`)
Izlaz
Pozdrav Jack, zbroj 4 + 5 je 9 Vrlo velik
Proces dodjeljivanja varijabli i izraza unutar doslovca predloška poznat je pod nazivom interpolacija.
Označeni predlošci
Obično biste koristili funkciju za prosljeđivanje argumenata. Na primjer,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Međutim, možete stvoriti označene predloške (koji se ponašaju poput funkcije) pomoću literalnih predložaka. Koristite oznake koje vam omogućuju raščlambu doslovnih predložaka s funkcijom.
Označeni predložak napisan je poput definicije funkcije. Međutim, ne prosljeđujete zagrade ()prilikom pozivanja doslovca. Na primjer,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Izlaz
("Zdravo Jack")
Niz vrijednosti niza prenosi se kao prvi argument funkcije oznake. Vrijednosti i izraze možete proslijediti i kao preostale argumente. Na primjer,
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);
Izlaz
Zdravo Jack, kako si?
Na taj način također možete proslijediti više argumenata u označenu predložak teme.
