So verwenden Sie ES6-Vorlagenliterale in JavaScript
In der Programmierung der Begriff “wörtlich” bezieht sich auf Notation von Werten in Code. Zum Beispiel notieren wir einen String-Wert mit einem String-Literal Das sind Zeichen, die in doppelte oder einfache Anführungszeichen eingeschlossen sind ("foo", 'Bar', "Das ist eine Zeichenfolge!").
Vorlagenliterale wurden in eingeführt ECMAScript 6. Sie arbeiten ganz ähnlich wie String-Literale. Sie produzieren Vorlagenwerte und rohe Vorlagenwerte, beide sind Saiten.
Im Gegensatz zu String-Literalen können Vorlagenliterale jedoch Werte erzeugen, die sind mehrzeilige Saiten, etwas, das Sie in einem String-Literal nur durch erreichen können Neue Zeilenzeichen hinzufügen (\ n) dazu.
Vorlagenliterale können auch Erstellen Sie Zeichenfolgen mit anderen Werten (abgeleitet von Ausdrücken), für die Sie die verwenden müssten plus Operator in einem String-Literal ("Ihre ID ist:" + IDNo; woher ID Nr ist ein variabler Ausdruck mit einem numerischen Wert).
All diese Funktionen machen Vorlagenliterale vorzuziehen Stringwerte erstellen.
Syntax von Template-Literalen
Das Trennzeichen eines Vorlagenliteral ist das Backtick ' Charakter (auch bekannt als Backquote-Zeichen oder ernstes Akzentzeichen). Ein Ausdruck innerhalb des Literal (dessen Wert ist wird zur Laufzeit ausgewertet und im endgültigen Wert enthalten, der vom Literal erzeugt wird) ist in eingeschlossen Geschweifte Klammern mit einer Voriges Dollarzeichen $.
'Zeichenfolge $ someExpression mehr Zeichenfolge'
Hier sind einige Beispiele für Vorlagenliterale produzieren unverändert, ersetzt (Ausdrücke werden durch ihre ausgewerteten Werte ersetzt) und mehrzeilig Streicher.
console.log ('Hallo'); // hallo var name = "Joan"; console.log ('hello $ name'); // Hallo Joan console.log ('Liebe Joan, Willkommen.'); // Liebe Joan, // Willkommen. & Rohe Vorlagenwerte
In einem Vorlagenliteral steht das ' (Backtick), \ (Backslash) und $ (Dollarzeichen) Zeichen sollte entkommen werden Verwendung der Escape-Zeichen \ wenn sie in ihren Vorlagenwert aufgenommen werden sollen.
Standardmäßig sind alle Escape-Sequenzen in einem Vorlagenliteral ignoriert. Wenn Sie es in die Ausgabe aufnehmen möchten, müssen Sie es verwenden roher Vorlagenwert.
console.log ('Inline-Code in Markup: \' Code \ "); // Inline-Code in Markup: 'Code' var name =" Joan "; console.log ('hello \ $ name.'); / / Hallo $ Name. console.log (String.raw'hello \ $ Name. '); // Hallo \ $ Name. Das String.raw Methode gibt rohe Vorlagenwerte aus (das Roh-String-Formular eines Vorlagenliteral). Im obigen Code der Funktionsaufruf von roh Methode wird als bezeichnet “markierte Vorlage”.
Tagged Vorlagen
Eine gekennzeichnete Vorlage ist a Funktionsaufruf woher, anstelle der üblichen Klammern (mit optionalen Parametern) neben dem Funktionsnamen, Es gibt ein Vorlagenliteral von dem die Funktion ihre Argumente erhält.
Anstatt eine Funktion wie folgt aufzurufen:
foo (ArgumentsForFoo);
Es heißt so:
foo'ATemplateStringProvidingArgumentsForFoo ';
Die Funktion foo heißt a Tag-Funktion. Das erste Argument, das aus dem Vorlagenliteral stammt, ist ein Array nannte das Vorlagenobjekt.
Das Vorlagenobjekt (ein Array) ist gültig alle Stringwerte interpretiert aus dem Template-Literal und hat eine roh Eigenschaft (ein anderes Array), die hält alle rohen (nicht mit einem Escapezeichen versehenen) Stringwerte aus dem gleichen Wortlaut interpretiert.
Nach dem Vorlagenobjekt sind die Argumente der Tag-Funktion enthalten all die bewertet externe Werte in diesem wörtlichen Wort vorhanden (die in den geschweiften Klammern eingeschlossenen $ ).
Im folgenden Code steht der foo Funktion wird erstellt gibt seine Argumente aus. Die Funktion wird dann aufgerufen in der getaggten Vorlage, mit einem Vorlagenliteral, das zwei Ausdrücke trägt (Name und Ich würde).
var name = "John"; var id = 478; foo'hello $ name. Ihre ID lautet: $ id. '; function foo () console.log (Argumente [0]); // Array ["Hallo", ". Ihre ID lautet:", "." ] console.log (Argumente [1]); // John console.log (Argumente [2]); // 478
Das erste ausgegebene Argument ist das Vorlagenobjekt Alle Zeichenfolgen, die vom Vorlagenliteral interpretiert werden, sind das zweite und das dritte Argument ausgewertete Werte der Ausdrücke, Name und Ich würde.
Das roh Eigentum
Wie bereits erwähnt, hat das Vorlagenobjekt eine Eigenschaft aufgerufen roh was ist ein Array mit alle rohen (nicht mit einem Escapezeichen versehenen) Stringwerte interpretiert aus dem Vorlagenliteral. So können Sie auf das zugreifen roh Eigentum:
var name1 = "John", name2 = "Joan"; foo'hello \ $ name1, $ name2, wie geht es euch beiden? '; function foo () console.log (Argumente [0]); // Array ["Hallo $ name1", ", wie geht es Ihnen beiden?"] Console.log (arguments [0] .raw); // Array ["Hallo \ $ Name1", "," wie geht es Ihnen beiden? "] // Joan
Anwendungsfälle mit getaggten Vorlagen
Mit Tags versehene Vorlagen sind hilfreich, wenn Sie dies benötigen eine Schnur brechen in separate Teile, wie es häufig bei URLs der Fall ist oder beim Parsen einer Sprache. Sie finden eine Sammlung von taggene Vorlagenbeispiele hier.
Anders als IE sind Template-Literale wird in allen gängigen Browsern unterstützt.
Nachfolgend finden Sie einige Beispiele für Tag-Funktionen mit verschiedene signaturen das sind die Argumente:
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 Ihnen beiden?"], "John"] Funktionsleiste (StrVals,… ExprVals) console.log (StrVals); // Array ["Hallo", "wie geht es euch beiden?" ] console.log (exprVals); // Array ["John"]
In dem Bar Funktion, der erste Parameter (strVals) ist der Vorlagenobjekt und der zweite (der die Spread-Syntax verwendet) ist ein Array, das gesammelt wurde alle ausgewerteten Ausdruckswerte aus dem Vorlagenliteral, das an die Funktion übergeben wurde.
Legen Sie die Schnur zusammen
Wenn du möchtest den ganzen Satz erhalten (abgeleitet vom Literal) innerhalb der Tag-Funktion, Verketten Sie alle Werte der Arrays mit den Template-Strings und den ausgewerteten Ausdruckswerten. So was:
function foo (strs, ... exprs) // Wenn im Literal Ausdrücke enthalten sind, falls (exprs.length! == 0) var n = strs.length - 1, result = "; for (var i = 0 ; ich < 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.';
Das strs Array gilt alle Saiten im wörtlichen und gefunden Ausdrücke hält alle ausgewerteten Ausdruckswerte aus dem wörtlichen.
Wenn nur ein Ausdruck vorhanden ist, verketten Sie jeden Array-Wert von strs (außer dem letzten) mit dem gleichen Indexwert von Ausdrücke. Fügen Sie am Ende den letzten Wert von hinzu strs Array an die verkettete Zeichenfolge, einen vollständigen Satz bilden diesen Weg.
