JavaScript mallitteratur (malstrenger)

Innholdsfortegnelse

Mallitteratur for strenger
Multiline strenger ved bruk av mallitteratur
Uttrykk interpolasjon
Merkede maler

I denne opplæringen lærer du om JavaScript Template Literals (Template Strings) ved hjelp av eksempler.

Malbokstavler (malstrenger) lar deg bruke strenger eller innebygde uttrykk i form av en streng. De er omsluttet av backticks ``. For eksempel,

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

Merk : Mal bokstavelig ble introdusert i 2015 (også kjent som ECMAScript 6 eller ES6 eller ECMAScript 2015). Noen nettlesere støtter kanskje ikke bruk av malbokstavler. Gå til JavaScript Template Literal support for å lære mer.

Mallitteratur for strenger

I de tidligere versjonene av JavaScript bruker du et enkelt tilbud ''eller et dobbelt tilbud ""for strenger. 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 å bruke de samme sitatene inne i strengen, kan du bruke escape-tegnet .

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

I stedet for å bruke escape-tegn, kan du bruke malbokstavler. 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, gjør malbokstavene det ikke bare enkelt å inkludere tilbud, men gjør også koden vår renere.

Multiline strenger ved bruk av mallitteratur

Malbokstavene gjør det også enkelt å skrive flerstrengede strenger. For eksempel,

Ved å bruke malbokstavler 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)

Produksjonen fra begge disse programmene vil være den samme.

 Dette er en lang melding som strekker seg over flere linjer i koden.

Uttrykk interpolasjon

Før JavaScript ES6 vil du bruke +operatøren til å sammenkoble variabler og uttrykk i en streng. For eksempel,

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

Med malbokstavler er det litt lettere å inkludere variabler og uttrykk i en streng. Til det bruker 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')`)

Produksjon

 Hei Jack Summen av 4 + 5 er 9 veldig høy

Prosessen med å tilordne variabler og uttrykk i malen bokstavelig er kjent som interpolasjon.

Merkede maler

Normalt vil du bruke en funksjon til å sende argumenter. For eksempel,

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

Du kan imidlertid opprette taggede maler (som oppfører seg som en funksjon) ved hjelp av malbokstaver. Du bruker koder som lar deg analysere malbokstavene med en funksjon.

Merket mal er skrevet som en funksjonsdefinisjon. Imidlertid passerer du ikke parentes ()når du kaller bokstavelig. For eksempel,

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

Produksjon

 ("Hello Jack")

En rekke strengverdier sendes som det første argumentet for en tagfunksjon. Du kan også sende verdiene og uttrykkene som de gjenværende argumentene. 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);

Produksjon