In diesem Tutorial lernen Sie anhand von Beispielen JavaScript-Vorlagenliterale (Vorlagenzeichenfolgen) kennen.
Mit Vorlagenliteralen (Vorlagenzeichenfolgen) können Sie Zeichenfolgen oder eingebettete Ausdrücke in Form einer Zeichenfolge verwenden. Sie sind in Backticks eingeschlossen ``. Beispielsweise,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Hinweis : Das Vorlagenliteral wurde 2015 eingeführt (auch als ECMAScript 6 oder ES6 oder ECMAScript 2015 bekannt). Einige Browser unterstützen möglicherweise nicht die Verwendung von Vorlagenliteralen. Besuchen Sie die Unterstützung für JavaScript Template Literal, um mehr zu erfahren.
Vorlagenliterale für Zeichenfolgen
In früheren Versionen von JavaScript haben Sie für Zeichenfolgen ein einfaches ''oder ein doppeltes Anführungszeichen ""verwendet. Beispielsweise,
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
Um dieselben Anführungszeichen in der Zeichenfolge zu verwenden, können Sie das Escape-Zeichen verwenden .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
Anstatt Escape-Zeichen zu verwenden, können Sie Vorlagenliterale verwenden. Beispielsweise,
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`;
Wie Sie sehen können, erleichtern die Vorlagenliterale nicht nur das Einfügen von Zitaten, sondern lassen unseren Code auch sauberer aussehen.
Mehrzeilige Zeichenfolgen mit Vorlagenliteralen
Vorlagenliterale erleichtern auch das Schreiben mehrzeiliger Zeichenfolgen. Beispielsweise,
Mithilfe von Vorlagenliteralen können Sie ersetzen
// using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)
mit
const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)
Die Ausgabe dieser beiden Programme ist gleich.
Dies ist eine lange Nachricht, die sich über mehrere Zeilen im Code erstreckt.
Ausdrucksinterpolation
Vor JavaScript ES6 haben Sie den +Operator verwendet, um Variablen und Ausdrücke in einer Zeichenfolge zu verketten. Beispielsweise,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
Mit Vorlagenliteralen ist es etwas einfacher, Variablen und Ausdrücke in eine Zeichenfolge aufzunehmen. Dafür verwenden wir die $(… )Syntax.
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')`)
Ausgabe
Hallo Jack Die Summe von 4 + 5 ist 9 Sehr hoch
Das Zuweisen von Variablen und Ausdrücken innerhalb des Vorlagenliterals wird als Interpolation bezeichnet.
Markierte Vorlagen
Normalerweise würden Sie eine Funktion verwenden, um Argumente zu übergeben. Beispielsweise,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Sie können jedoch markierte Vorlagen (die sich wie eine Funktion verhalten) mithilfe von Vorlagenliteralen erstellen. Sie verwenden Tags, mit denen Sie Vorlagenliterale mit einer Funktion analysieren können.
Die mit Tags versehene Vorlage wird wie eine Funktionsdefinition geschrieben. Sie übergeben jedoch keine Klammern, ()wenn Sie das Literal aufrufen. Beispielsweise,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Ausgabe
("Hallo jack")
Ein Array von Zeichenfolgenwerten wird als erstes Argument einer Tag-Funktion übergeben. Sie können die Werte und Ausdrücke auch als verbleibende Argumente übergeben. Beispielsweise,
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);
Ausgabe
Hallo Jack, wie geht es dir?
Auf diese Weise können Sie auch mehrere Argumente in der markierten Vorlage übergeben.
