Verwendung von ES6-Vorlagenliteralen in JavaScript

In der Programmierung bezieht sich der Begriff "Literal" auf die Notation von Werten im Code. Zum Beispiel notieren wir einen Zeichenfolgenwert mit einem Zeichenfolgenliteral, bei dem es sich um Zeichen handelt, die in doppelte oder einfache Anführungszeichen eingeschlossen sind ( "foo", 'bar', "This is a string!" ).

Vorlagenliterale wurden in ECMAScript 6 eingeführt . Sie arbeiten ziemlich ähnlich wie String-Literale; Sie erzeugen Vorlagenwerte und Rohvorlagenwerte, die beide Zeichenfolgen sind.

Im Gegensatz zu Zeichenfolgenliteralen können Vorlagenliterale Werte mit mehrzeiligen Zeichenfolgen erzeugen, die Sie in einem Zeichenfolgenliteral nur durch Hinzufügen neuer Zeilenzeichen ( \n ) erreichen können.

Vorlagenliterale können auch Zeichenfolgen mit anderen Werten (abgeleitet von Ausdrücken) erstellen, für die Sie den Plus-Operator in einem Zeichenfolgenliteral verwenden müssten ( "your id is:" + idNo ; wobei idNo ein Variablenausdruck mit einem numerischen Wert ist).

All diese Funktionen machen Vorlagenliterale zum Erstellen von Zeichenfolgenwerten besser geeignet.

Syntax von Vorlagenliteralen

Das Trennzeichen eines Vorlagenliterals ist das Backtick-Zeichen (auch bekannt als Backquote-Zeichen oder Grab-Akzent-Symbol). Ein Ausdruck innerhalb des Literals (dessen Wert während der Laufzeit ausgewertet wird und in dem vom Literal erzeugten Endwert enthalten ist) ist in geschweifte Klammern {} mit einem vorangestellten Dollarzeichen $ .

 `string $ {someExpression} more string` 

Im Folgenden finden Sie einige Beispiele für Vorlagenliterale, die unverändert, ersetzt (Ausdrücke, die durch ihre ausgewerteten Werte ersetzt werden) und Zeichenfolgen mit mehreren Zeilen enthalten .

 console.log (`Hallo`); // Hallo var name = "Joan"; console.log (`Hallo $ {Name}`); // Hallo Joan console.log (`Liebe Joan, Willkommen.`); // Liebe Joan, // Willkommen. 

Escaping & rohe Vorlagenwerte

In einem Vorlagenliteral sollten die Zeichen ` (Backtick), \ (Backslash) und $ (Dollarzeichen) mit dem Escapezeichen \ maskiert werden, wenn sie in ihren Vorlagenwert eingeschlossen werden sollen.

Standardmäßig werden alle Escape-Sequenzen in einem Vorlagenliteral ignoriert . Wenn Sie es in die Ausgabe einbeziehen möchten, müssen Sie dessen Rohvorlagenwert verwenden .

 console.log (`Inline-Code in Markup: \` code \ ``); // Inline-Code in Markup: `code` var name =" Joan "; console.log (`Hallo \ $ {Name} .`); // Hallo $ {Name}. console.log (String.raw`hello \ $ {name} .`); // Hallo \ $ {Name}. 

Die String.raw Methode gibt rohe Vorlagenwerte aus (die rohe Zeichenfolge eines Vorlagenliterals). Im obigen Code wird der Funktionsaufruf der raw als "getaggte Vorlage" bezeichnet .

Markierte Vorlagen

Eine getaggte Vorlage ist ein Funktionsaufruf, bei dem anstelle der üblichen Klammern (mit optionalen Parametern) neben dem Funktionsnamen ein Vorlagenliteral vorhanden ist, von dem die Funktion ihre Argumente erhält.

Also, anstatt eine Funktion wie folgt aufzurufen:

 foo (ArgumenteFürFoo); 

Es heißt so:

 foo`ATemplateStringProvidingArgumentsForFoo`; 

Die Funktion foo wird als Tag-Funktion bezeichnet . Das erste Argument, das vom Vorlagenliteral erhalten wird, ist ein Array, das Vorlagenobjekt genannt wird .

Das Vorlagenobjekt (ein Array) enthält alle Zeichenfolgenwerte, die aus dem Vorlagenliteral interpretiert werden, und verfügt über eine raw Eigenschaft (ein anderes Array), die alle aus demselben Literal interpretierten Raw-Zeichenfolgen enthält .

Nach dem Vorlagenobjekt enthalten die Argumente der Tag-Funktion alle ausgewerteten externen Werte, die in diesem Literal vorhanden sind (die in den geschweiften Klammern ${} ).

Im folgenden Code wird die foo Funktion erstellt, um ihre Argumente auszugeben . Die Funktion wird dann in der getaggten Vorlagenart aufgerufen, wobei ein Vorlagenliteral zwei Ausdrücke ( name und id ) enthält.

 var name = "John"; var id = 478; foo`hello $ {name}. Ihre ID ist: $ {id} .`; Funktion foo () {console.log (Argumente [0]); // Array ["Hallo", ". Ihre ID ist:", "." ] console.log (Argumente [1]); // John console.log (Argumente [2]); // 478} 

Das erste ausgegebene Argument ist das Vorlagenobjekt, das alle aus dem Vorlagenliteral interpretierten Zeichenfolgen enthält, das zweite und dritte Argument sind die ausgewerteten Werte der Ausdrücke, des name und der id .

Das raw Eigentum

Wie bereits erwähnt, hat das Template-Objekt eine Eigenschaft namens raw die ein Array ist, das alle rohen (nicht-maskierten) String-Werte enthält, die aus dem Template-Literal interpretiert werden. So können Sie auf die raw Eigenschaft zugreifen:

 var name1 = "John", name2 = "Joan"; foo`hello \ $ {name1}, $ {name2}, wie geht es dir beiden? `; Funktion foo () {console.log (Argumente [0]); // Array ["Hallo $ {Name1}, ", ", wie geht es dir beiden?"] Console.log (Argumente [0] .raw); // Array ["Hallo \ $ {Name1}, ", ", wie geht es dir beiden?"] Console.log (Argumente [1]); // Joan} 

Verwenden Sie Fälle von markierten Vorlagen

Mit Tags versehene Vorlagen sind nützlich, wenn Sie eine Zeichenfolge in separate Teile aufteilen müssen, wie es oft in einer URL der Fall ist, oder beim Parsen einer Sprache. Hier finden Sie eine Sammlung von getaggten Vorlagenbeispielen .

Anders als IE werden Vorlagenliterale in allen gängigen Browsern unterstützt .

Im Folgenden finden Sie einige Beispiele für Tag-Funktionen mit verschiedenen Signaturen, die die Argumente darstellen:

 var name = "John"; foo`hello $ {name}, wie geht es euch beiden? `; bar`hello $ {name}, wie geht es euch beiden? `; Funktion foo (... args) {console.log (args); // Array [Array ["Hallo", ", wie geht es dir beiden?"], "John"]} Funktionsleiste (strVals, ... exprVals) {console.log (strVals); // Array ["Hallo", "wie geht es euch beiden?" ] console.log (exprVals); // Array ["John"]} 

In der strVals ist der erste Parameter ( strVals ) das Vorlagenobjekt und der zweite Parameter (der die strVals verwendet) ist ein Array, das alle ausgewerteten Ausdruckwerte aus dem Vorlagenliteral gesammelt hat, das an die Funktion übergeben wurde.

Setze die Schnur zusammen

Wenn Sie den gesamten Satz (abgeleitet aus dem Literal) innerhalb der Tag-Funktion erhalten möchten, verketten Sie alle Werte der Arrays, die die Template-Strings und die ausgewerteten Ausdrücke enthalten. So was:

 Funktion foo (strs, ... excrs) {// Wenn im Literal Ausdrücke enthalten sind if (excrs.length! == 0) {var n = strs.length - 1, result = ''; für (var i = 0; i <n; i ++) {Ergebnis + = strs [i] + Ausdruck [i]; } Ergebnis + = strs [n]; console.log (Ergebnis); //"Hallo John." } // wenn im Literal keine Ausdrücke enthalten sind else console.log (strs [0]); } Name = 'John'; foo`Hello $ {name} .`; 

Das strs Array enthält alle Strings, die im Literal gefunden werden, und exprs enthält alle ausgewerteten Expressions-Werte aus dem Literal.

Wenn nur ein Ausdruckswert vorhanden ist, verketten Sie jeden Array-Wert von strs (außer dem letzten) mit dem gleichen Indexwert von exprs . strs dann am Ende den letzten Wert des strs Arrays zur verketteten Zeichenfolge hinzu, um auf diese Weise einen vollständigen Satz zu bilden .

40 kreative Remakes der Weltkarte

Wenn Sie nicht das Vergnügen haben, ein Student in einem Geographie-Kurs zu sein, in dem der Lehrer eine komplette Weltkarte aus dem Gedächtnis zeichnen kann (Handlungswechsel: der Lehrer ist ein Geschichtslehrer, nach den Kommentaren), dann ist es sicher, das zu vermuten Geografie ist wahrscheinlich nicht deine Lieblingsklasse .

(Tech- und Design-Tipps)

Die heißesten Web-Anwendungen des Monats - Juli

Hier sind wir wieder! In diesem Monat möchten wir Ihnen eine ganze Reihe toller Web-Apps zur Verfügung stellen, die Ihren Arbeitsablauf auf unterschiedlichste Weise verbessern werden, von Online-Videobearbeitung über Rapid Prototyping, Ruby on Rails lernen und mehr - Sie nennen es hab 'es kapiert.Na

(Tech- und Design-Tipps)