JavaScript Template Literals (Template Strings)

Inhoudsopgave

Template Literals for Strings
Multiline-strings met behulp van sjabloonnalen
Expressie-interpolatie
Getagde sjablonen

In deze tutorial leer je aan de hand van voorbeelden over JavaScript Template Literals (Template Strings).

Template literals (template strings) stellen je in staat om strings of ingesloten expressies in de vorm van een string te gebruiken. Ze zijn ingesloten in backticks ``. Bijvoorbeeld,

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

Opmerking : Template literal is geïntroduceerd in 2015 (ook bekend als ECMAScript 6 of ES6 of ECMAScript 2015). Sommige browsers ondersteunen het gebruik van sjablonen niet. Bezoek JavaScript-sjabloon Letterlijke ondersteuning voor meer informatie.

Template Literals for Strings

In de eerdere versies van JavaScript zou u een enkele aanhalingsteken ''of een dubbele aanhalingsteken gebruiken ""voor tekenreeksen. Bijvoorbeeld,

 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

Om dezelfde aanhalingstekens in de string te gebruiken, kunt u het escape-teken gebruiken .

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

In plaats van escape-tekens te gebruiken, kunt u sjabloon-letterlijke tekens gebruiken. Bijvoorbeeld,

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

Zoals u kunt zien, maken de letterlijke sjablonen het niet alleen gemakkelijk om offertes op te nemen, maar laten ze onze code er ook schoner uitzien.

Multiline-strings met behulp van sjabloonnalen

Met sjabloonnummers is het ook gemakkelijk om strings met meerdere regels te schrijven. Bijvoorbeeld,

Met behulp van sjabloonletters kunt u

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

met

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

De output van beide programma's zal hetzelfde zijn.

 Dit is een lang bericht dat zich over meerdere regels in de code uitstrekt.

Expressie-interpolatie

Vóór JavaScript ES6 zou u de +operator gebruiken om variabelen en uitdrukkingen in een string samen te voegen. Bijvoorbeeld,

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

Met sjabloonliteralen is het een beetje eenvoudiger om variabelen en uitdrukkingen in een string op te nemen. Daarvoor gebruiken we de $(… )syntaxis.

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

Uitvoer

 Hallo Jack. De som van 4 + 5 is 9 Heel hoog

Het proces van het toewijzen van variabelen en uitdrukkingen binnen de letterlijke sjabloon staat bekend als interpolatie.

Getagde sjablonen

Normaal gesproken zou u een functie gebruiken om argumenten door te geven. Bijvoorbeeld,

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

U kunt echter getagde sjablonen maken (die zich gedragen als een functie) met behulp van sjabloonliteralen. U gebruikt tags waarmee u sjabloonliteralen met een functie kunt parseren.

Getagde sjabloon is geschreven als een functiedefinitie. U hoeft echter geen haakjes door te geven ()bij het aanroepen van de letterlijke. Bijvoorbeeld,

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

Uitvoer

 ("Hoi Jack")

Een reeks stringwaarden wordt doorgegeven als het eerste argument van een tagfunctie. U kunt de waarden en uitdrukkingen ook doorgeven als de overige argumenten. Bijvoorbeeld,

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

Uitvoer