Hoe ES6 Template Literals in JavaScript te gebruiken

Bij het programmeren is de term “letterlijk” verwijst naar de notatie van waarden in code. We noteren bijvoorbeeld een stringwaarde met een tekenreeks letterlijk dat zijn karakters ingesloten in dubbele of enkele aanhalingstekens ("Foo", 'bar', "Dit is een string!").

Sjabloon letterwoorden werden geïntroduceerd in ECMAScript 6. Ze werken vrijwel hetzelfde als tekenreeks-letterwoorden; zij produceren sjabloonwaarden en onbewerkte sjabloonwaarden, beide zijn snaren.

In tegenstelling tot tekenreeksliteralen kunnen sjabloonnetteralen echter waarden produceren die dat wel zijn multi-lined strings, iets wat je alleen in een string letterlijk kunt bereiken nieuwe lijntekens toevoegen (\ n).

Template-letterwoorden kunnen ook maak strings met andere waarden (afgeleid van uitdrukkingen) waarvoor u de plus operator in een letterlijke tekenreeks ("uw id is:" + idNo; waar IDNO is een variabele uitdrukking met een numerieke waarde).

Al deze functies maken template literals meer de voorkeur aan maak snaarwaarden.

Syntaxis van standaardletterstijlen

Het scheidingsteken van een letterlijke sjabloon is de backtick ' karakter (ook bekend als backquote-teken of ernstig accentsymbool). Een uitdrukking in het letterlijke (waarvan de waarde is geëvalueerd tijdens runtime en opgenomen in de uiteindelijke waarde geproduceerd door de letterlijke) is ingesloten accolades met een voorafgaand aan het dollarteken $.

 'string $ someExpression meer string' 

Hier zijn een paar voorbeelden van sjabloon-letterwoorden producerende onveranderd, gesubstitueerd (uitdrukkingen vervangen door hun geëvalueerde waarden), en multi-lined strings.

 console.log ( 'hallo'); // hello var name = "Joan"; console.log ('hallo $ naam'); // hello Joan console.log ('Beste Joan, welkom'); // Beste Joan, // Welkom. 

Ontsnappende & onbewerkte sjabloonwaarden

In een letterlijke sjabloon, de ' (Backtick), \ (backslash) en $ (dollarteken) tekens moet worden ontsnapt de ... gebruiken ontsnapping karakter \ als ze moeten worden opgenomen in hun sjabloonwaarde.

Standaard zijn alle escape-reeksen in een letterlijke sjabloon genegeerd. Als u het in de uitvoer wilt opnemen, moet u het gebruiken onbewerkte sjabloonwaarde.

 console.log ('inline code in markup: \' code \ '); // inline code in markup:' code 'var name = "Joan"; console.log (' hallo \ $ naam. '); / / Hallo $ name. console.log (String.raw'hello \ $ name. '); // hallo \ $ name. 

De String.raw methode voert ruwe sjabloonwaarden uit (de onbewerkte tekenreeksvorm van een letterlijke sjabloon). In de bovenstaande code, de functieaanroep van de rauw methode wordt aangeduid als “getagde sjabloon”.

Getagde sjablonen

Een getagde sjabloon is een functieaanroep waar, in plaats van de gebruikelijke haakjes (met optionele parameters) naast de functienaam, er is een sjabloon letterlijk van waaruit de functie zijn argumenten krijgt.

Dus in plaats van een functie als deze te noemen:

 foo (ArgumentsForFoo); 

Het wordt zo genoemd:

 foo'ATemplateStringProvidingArgumentsForFoo '; 

De functie foo wordt een a genoemd tag-functie. Het eerste argument dat van de standaardsjabloon is ontvangen, is een rangschikking genaamd de sjabloon object.

Het sjabloonobject (een array) geldt alle stringwaarden geïnterpreteerd vanuit de sjabloon letterlijke en heeft een rauw eigenschap (een andere array) die geldt alle onbewerkte (niet-escaped) stringwaarden geïnterpreteerd vanuit hetzelfde letterlijke.

Na het sjabloonobject volgen de argumenten van de tagfunctie al de geëvalueerd externe waarden aanwezig in die letterlijke (die ingesloten in de accolades $ ).

In de onderstaande code, de foo functie is gemaakt om uitvoer zijn argumenten. De functie wordt dan genoemd op de getagde sjabloonwijze, met een letterlijke sjabloon met twee uitdrukkingen (naam en ID kaart).

 var name = "John"; var id = 478; foo'hello $ name. je id is: $ id. '; function foo () console.log (arguments [0]); // Array ["hallo", ". Uw id is:", "." ] console.log (argumenten [1]); // John console.log (argumenten [2]); // 478 

Het eerste uitgeschreven argument is de sjabloon object met alle tekenreeksen die worden geïnterpreteerd vanuit de letterlijke sjabloon, zijn de tweede en derde argumenten de geëvalueerde waarden van de uitdrukkingen, naam en ID kaart.

De rauw eigendom

Zoals eerder vermeld, heeft het sjabloonobject een eigenschap genoemd rauw welke een array bevat alle onbewerkte (niet-escaped) stringwaarden geïnterpreteerd vanuit de letterlijke sjabloon. Dit is hoe u toegang kunt krijgen tot de rauw eigendom:

 var name1 = "John", name2 = "Joan"; foo'hello \ $ name1, $ name2, hoe gaat het met jullie beide? '; function foo () console.log (arguments [0]); // Array ["hallo $ name1,", ", hoe gaat het met je beide?"] Console.log (argumenten [0] .raw); // Array ["hallo \ $ name1,", ", hoe gaat het met je beide?"] Console.log (argumenten [1]); // Joan 

Gebruik cases van getagde sjablonen

Getagde sjablonen zijn handig wanneer dat nodig is breek een touwtje in afzonderlijke delen zoals het vaak voorkomt in een URL of tijdens het parseren van een taal. Je zult een verzameling vinden van getagde sjabloonvoorbeelden hier.

Anders dan IE zijn sjabloongeluiden dat wel ondersteund in alle belangrijke browsers.

Hieronder vindt u enkele voorbeelden van tag-functies met verschillende handtekeningen die de argumenten vertegenwoordigen:

 var name = "John"; foo'hello $ name, hoe gaat het met jullie? '; bar'hello $ name, hoe gaat het met jullie? '; function foo (... args) console.log (args); // Array [Array ["hallo", ", hoe gaat het met je beide?"], "John"] functiebalk (strVals, ... exprVals) console.log (strVals); // Array ["hallo", ", hoe gaat het met jullie beide?" ] console.log (exprVals); // Array ["John"] 

In de bar functie, de eerste parameter (strVals) is de sjabloon object en de tweede (die de spread-syntaxis gebruikt) is een array die is verzameld alle geëvalueerde expressiewaarden van de letterlijke sjabloon doorgegeven aan de functie.

Leg de draad bij elkaar

Als je wilt verkrijg de hele zin (afgeleid van het letterlijke) in de tag-functie, voeg alle waarden samen van de matrices die de sjabloonstrings en de geëvalueerde expressiewaarden dragen. Zoals dit:

 function foo (strs, ... exprs) // als er uitdrukkingen zijn opgenomen in de letterlijke if (exprs.length! == 0) var n = strs.length - 1, result = "; for (var i = 0 ; i < n; i++)  result += strs[i] + exprs[i];  result += strs[n]; console.log(result); //"Hello John."  // if there are no expressions included in the literal else console.log(strs[0]);  name = 'John'; foo'Hello $name.'; 

De VAK array houdt vast alle snaren gevonden in de letterlijke en exprs houdt alle geëvalueerde expressiewaarden van het letterlijke.

Als er zelfs maar één expressiewaarde bestaat, maakt u elke arraywaarde van VAK (behalve de laatste) met dezelfde indexwaarde van exprs. Voeg vervolgens aan het einde de laatste waarde toe van de VAK matrix naar de aaneengeschakelde reeks, een complete zin vormen op deze manier.