JavaScript-malllitteratur (mallsträngar)

Innehållsförteckning

Malllitteratur för strängar
Multiline strängar med hjälp av malllitteratur
Expression Interpolation
Märkta mallar

I den här guiden lär du dig om JavaScript-malllitteratur (mallsträngar) med hjälp av exempel.

Mallbokstäver (mallsträngar) låter dig använda strängar eller inbäddade uttryck i form av en sträng. De är inneslutna i backticks ``. Till exempel,

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

OBS : Bokstavlig mall introducerades 2015 (även känd som ECMAScript 6 eller ES6 eller ECMAScript 2015). Vissa webbläsare stöder kanske inte användning av mallbokstäver. Besök JavaScript Template Literal support för att lära dig mer.

Malllitteratur för strängar

I de tidigare versionerna av JavaScript skulle du använda en enda offert ''eller en dubbel offert ""för strängar. Till exempel,

 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

För att använda samma citat inuti strängen kan du använda escape-karaktären .

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

Istället för att använda escape-tecken kan du använda mallbokstäver. Till exempel,

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

Som du kan se gör mallbokstäverna inte bara enkla att inkludera offerter utan gör också vår kod renare.

Multiline strängar med hjälp av malllitteratur

Mallbokstäver gör det också enkelt att skriva strängar med flera linjer. Till exempel,

Med hjälp av mallbokstäver kan du ersätta

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

med

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

Resultatet för båda dessa program kommer att vara detsamma.

 Detta är ett långt meddelande som sträcker sig över flera rader i koden.

Expression Interpolation

Innan JavaScript ES6 skulle du använda +operatören för att sammanfoga variabler och uttryck i en sträng. Till exempel,

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

Med mallbokstäver är det lite lättare att inkludera variabler och uttryck i en sträng. För det använder vi $(… )syntaxen.

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

Produktion

 Hej Jack Summan av 4 + 5 är 9 Mycket hög

Processen med att tilldela variabler och uttryck inuti mallen bokstavlig kallas interpolation.

Märkta mallar

Normalt skulle du använda en funktion för att skicka argument. Till exempel,

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

Du kan dock skapa taggade mallar (som beter sig som en funktion) med hjälp av mallbokstäver. Du använder taggar som låter dig analysera mallbokstäver med en funktion.

Märkt mall skrivs som en funktionsdefinition. Du passerar dock inte inom parentes ()när du kallar bokstavligt. Till exempel,

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

Produktion

 ("Hello Jack")

En rad strängvärden skickas som det första argumentet för en taggfunktion. Du kan också skicka värdena och uttrycken som de återstående argumenten. Till exempel,

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

Produktion