nl.hideout-lastation.com
Hoe ES6 Template Literals in JavaScript te gebruiken
Bij het programmeren verwijst de term 'letterlijk' naar de notatie van waarden in code. We noteren bijvoorbeeld een tekenreekswaarde met een letterlijke tekenreeks die bestaat uit tekens die zijn ingesloten in dubbele of enkele aanhalingstekens ( "foo", 'bar', "This is a string!" ).
Template-letterwoorden zijn geïntroduceerd in ECMAScript 6 . Ze werken vrijwel hetzelfde als tekenreeks-letterwoorden; ze produceren sjabloonwaarden en onbewerkte sjabloonwaarden, beide strings.
In tegenstelling tot letterlijke tekenreeksen, kunnen sjabloonnetterwoorden echter waarden produceren die bestaan uit meervoudige tekenreeksen, iets dat u alleen in een letterlijke tekenreeks kunt bereiken door er nieuwe lijntekens ( \n ) aan toe te voegen .
Template literals kunnen ook strings maken met andere waarden (afgeleid van expressies) waarvoor u de plus-operator in een letterlijke tekenreeks moet gebruiken ( "your id is:" + idNo ; waarbij idNo een variabele uitdrukking met een numerieke waarde is).
Al deze functies maken template literals meer de voorkeur om stringwaarden te maken .
Syntaxis van standaardletterstijlen
Het scheidingsteken van een letterlijke sjabloon is het backtick ` -teken (ook bekend als backquote-teken of ernstig accentsymbool). Een uitdrukking in het letterlijke (waarvan de waarde wordt geëvalueerd tijdens runtime en wordt opgenomen in de uiteindelijke waarde die wordt geproduceerd door het letterlijke) is ingesloten tussen accolades {} met een vorig dollarteken $ .
`string $ {someExpression} meer string ' Hier zijn enkele voorbeelden van sjabloonnetterstoffen die onveranderd, gesubstitueerd (uitdrukkingen vervangen door hun geëvalueerde waarden) en meerledige tekenreeksen produceren.
console.log ( `hello`); // hello var name = "Joan"; console.log (`hello $ {name}`); // hello Joan console.log (`Beste Joan, welkom '); // Beste Joan, // Welkom. Ontsnappende & onbewerkte sjabloonwaarden
In een letterlijke sjabloon moeten de tekens ` (backtick), \ (backslash) en $ (dollarteken) worden geëscaped met behulp van het escape-teken \ als ze moeten worden opgenomen in hun sjabloone waarde.
Standaard worden alle escape-reeksen in een letterlijke sjabloon genegeerd . Als u het in de uitvoer wilt opnemen, moet u de onbewerkte sjabloonwaarde gebruiken .
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 \ $ {naam}. De String.raw methode voert onbewerkte templatewaarden uit (de onbewerkte tekenreeks van een letterlijke sjabloon). In de bovenstaande code wordt de functieaanroep van de raw methode "getagde sjabloon" genoemd .
Getagde sjablonen
Een getagde sjabloon is een functieaanroep waarbij, in plaats van de gebruikelijke haakjes (met optionele parameters) naast de functienaam, een letterlijke sjabloon staat waaruit de functie zijn argumenten haalt.
Dus in plaats van een functie als deze te noemen:
foo (ArgumentsForFoo);
Het wordt zo genoemd:
foo`ATemplateStringProvidingArgumentsForFoo`;
De functie foo wordt een tagfunctie genoemd . Het eerste argument dat wordt ontvangen van de letterlijke sjabloon is een array die het sjabloonobject wordt genoemd .
Het sjabloonobject (een array) bevat alle stringwaarden die worden geïnterpreteerd vanuit de letterlijke sjabloon en heeft een raw eigenschap (een andere array) waarin alle onbewerkte (niet-escaped) tekenreekswaarden worden geïnterpreteerd vanuit dezelfde letterlijke waarde.
Na het sjabloonobject bevatten de argumenten van de tagfunctie alle geëvalueerde externe waarden die aanwezig zijn in die letterlijke (de waarden ingesloten in de accolades ${} ).
In de onderstaande code wordt de foo functie gemaakt om zijn argumenten uit te voeren . De functie wordt vervolgens op de manier van de getagde sjabloon aangeroepen, met een sjabloon letterlijk met twee uitdrukkingen ( name en id ).
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 uitgevoerde argument is het sjabloonobject dat alle tekenreeksen draagt die letterlijk uit de sjabloon worden geïnterpreteerd, de tweede en derde argumenten zijn de geëvalueerde waarden van de expressies, name en id .
De raw eigenschap
Zoals eerder vermeld, heeft het sjabloonobject de eigenschap raw die een array is die alle onbewerkte (niet-escaped) tekenreekswaarden bevat die worden geïnterpreteerd vanuit de letterlijke sjabloon. Dit is hoe je de raw eigenschap kunt openen:
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 (arguments [0] .raw); // Array ["hallo \ $ {name1}, ", ", hoe gaat het met je beide?"] Console.log (arguments [1]); // Joan} Gebruik cases van getagde sjablonen
Gelabelde sjablonen zijn handig als u een tekenreeks in afzonderlijke delen wilt splitsen, zoals vaak in een URL of tijdens het parseren van een taal. U vindt hier een verzameling voorbeelden van getagde sjablonen .
Anders dan IE, worden letterlijke letterstijlen ondersteund in alle gangbare 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 je beide? `; 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 strVals is de eerste parameter ( strVals ) het sjabloonobject en de tweede (die de spread-syntaxis gebruikt) een array die alle geëvalueerde expressiewaarden heeft verzameld uit de standaardsjabloon die aan de functie is doorgegeven.
Leg de draad bij elkaar
Als u de hele zin (afgeleid van het letterlijke) binnen de tagfunctie wilt verkrijgen, voegt u alle waarden samen van de arrays met de sjabloonreeksen en de geëvalueerde expressiewaarden. Soortgelijk:
functie 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 (resultaat); //"Hallo John." } // als er geen uitdrukkingen zijn opgenomen in de literal else console.log (strs [0]); } name = 'John'; foo`Hello $ {name} .`; De strs array bevat alle tekenreeksen in de letterlijke waarden en exprs bevat alle geëvalueerde expressiewaarden uit de letterlijke waarden .
Als er zelfs maar één expressiewaarde bestaat, voegt u elke exprs van strs (behalve de laatste) samen met dezelfde indexwaarde van exprs . Voeg vervolgens aan het einde de laatste waarde van de strs array toe aan de aaneengesloten reeks en vorm op deze manier een volledige zin .
Wat als beroemde merken onverwachte producten maken?
Beroemde merken worden erkend voor hun vlaggenschipproducten, maar zou hun merk op andere producten schijnen? Alsof Crocs een paraplu heeft ontwikkeld. Zou het legitiem zijn?Ik denk het niet. Zich realiserend hoe leuk en gek het idee zou kunnen zijn, gebruikten Ilya Kalimulin en andere ontwerpers hun vaardigheden en creativiteit om photoshop 12 onverwachte, op de een of andere manier ironische producten van bekende merken te presenteren, en ze worden getoond in deze post
5 Essentiële WordPress-plug-ins voor opmerkingen
Een van de beste dingen over het gebruik van de zelf-gehoste versie van het WordPress-platform (dus niet WordPress.com) zijn de plug-ins. Natuurlijk krijg je geweldige functionaliteit met het basissysteem, maar je kunt het verbeteren met behulp van plug-ins en het reactiesysteem - het hart van de community van je blog - is niet uitgesloten van verbetering
