JavaScript-skabelonlitteratur (skabelonstrenge)

Indholdsfortegnelse

Skabelonlitteratur til strenge
Multiline strenge ved hjælp af skabelonlitteratur
Ekspressionsinterpolation
Mærkede skabeloner

I denne vejledning lærer du om JavaScript-skabelonlitteratur (skabelonstrenge) ved hjælp af eksempler.

Skabelonbogstaver (skabelonstrenge) giver dig mulighed for at bruge strenge eller indlejrede udtryk i form af en streng. De er lukket i backticks ``. For eksempel,

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

Bemærk : Bogstavelig skabelon blev introduceret i 2015 (også kendt som ECMAScript 6 eller ES6 eller ECMAScript 2015). Nogle browsere understøtter muligvis ikke brugen af skabelonbogstaver. Besøg JavaScript-skabelon Bogstavelig support for at lære mere.

Skabelonlitteratur til strenge

I de tidligere versioner af JavaScript bruger du et enkelt tilbud ''eller et dobbelt tilbud ""til strenge. For eksempel,

 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

For at bruge de samme citater inde i strengen kan du bruge flugttegnet .

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

I stedet for at bruge flugttegn kan du bruge skabelonbogstaver. For eksempel,

 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, skabelonbogstaverne gør det ikke kun nemt at inkludere tilbud, men også får vores kode til at se renere ud.

Multiline strenge ved hjælp af skabelonlitteratur

Skabelonbogstaver gør det også let at skrive strenge med flere linjer. For eksempel,

Ved hjælp af skabelonbogstaver kan du erstatte

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

Output fra begge disse programmer vil være den samme.

 Dette er en lang besked, der spænder over flere linjer i koden.

Ekspressionsinterpolation

Før JavaScript ES6 vil du bruge +operatøren til at sammenkæde variabler og udtryk i en streng. For eksempel,

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

Med skabelonbogstaver er det lidt nemmere at inkludere variabler og udtryk i en streng. Til det bruger vi $(… )syntaksen.

 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 Summen af 4 + 5 er 9 Meget høj

Processen med at tildele variabler og udtryk inde i skabelonen bogstaveligt kaldes interpolation.

Mærkede skabeloner

Normalt bruger du en funktion til at sende argumenter. For eksempel,

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

Du kan dog oprette taggede skabeloner (der opfører sig som en funktion) ved hjælp af skabelonbogstaver. Du bruger tags, der giver dig mulighed for at analysere skabelonbogstaver med en funktion.

Mærket skabelon er skrevet som en funktionsdefinition. Du passerer dog ikke parenteser, ()når du kalder det bogstavelige. For eksempel,

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

Produktion

 ("Hello Jack")

En række strengværdier sendes som det første argument for en tagfunktion. Du kan også videregive værdier og udtryk som de resterende argumenter. For eksempel,

 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