Template strings

Template Strings sind String-Symbole, die eingebettete Ausdrücke erlauben. Mit diesen Ausdrücken können mehrzeilige Strings und String-Interpolation genutzt werden.

Syntax

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

Beschreibung

Template Strings sind in back-ticks (` `) (grave accent) eingeschlossen, anstelle von doppelten bzw. einfachen Anführungszeichen. Template Strings können Platzhalter beinhalten. Diese sind durch das Dollarsymbol gefolgt von geschweiften Klammern gekennzeichnet (${expression}). Die Ausdrücke in den Platzhaltern und der Text zwischen diesen werden an eine Funktion übergeben. Die Standardfunktion fügt die einzelnen Teile zu einem einzelnen String zusammen. Falls vor dem Template string ein Ausdruck vorhanden ist (hier als tag bezeichnet), wird der template String "tagged template string" genannt. In diesem Fall wird der tag-Ausdruck (üblicherweise eine Funktion) mit dem verarbeiteten Template String aufgerufen, welchen man anschließend vor der Ausgabe manipulieren kann.

Mehrzeilige Strings

Jegliche new-line Charaktäre innerhalb der Angaben werden als Teil des template Strings gesehen. Sofern man normale Strings nutzt, muss die folgende Syntax genutzt werden um mehrzeilige Strings zu erzeugen:

console.log("string text line 1\n"+
"string text line 2");
// "string text line 1
// string text line 2"

Um das selbe Ergebnis mit mehrzeiligen Strings zu erreichen kann nun die folgende Schreibweise genutzt werden:

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

Erweiterung von Ausdrücken

Um Ausdrücke in normale Strings einzufügen, müsste die folgende Syntax genutzt werden:

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

Mit Template Strings können nun die damit verbundenen syntaktischen Vorteile genutzt werden um solche Ersetzungen leserlicher zu machen:

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

Tagged Template Strings

Eine etwas erweiterte Form der Template Strings sind tagged Template Strings. Mit diesen ist man in der Lage die Ausgabe von Template Strings mit Hilfe einer Funktion zu modifizieren. Das erste Argument enthält ein Array von Strings ("Hello" und "world" in diesem Beispiel). Das zweite, und jedes Argument nach dem ersten, sind die Werte der verarbeiteten (manchmal auch cooked genannt) ersetzten Ausdrücke ("15" und "50"). Schlussendlich gibt die Funktion den manipulierten String zurück. Im folgenden Beispiel heißt die Funktion tag, was aber keinen besonderen Grund hat, da die Funktion jeglichen gewünschten Namen haben kann.

var a = 5;
var b = 10;

function tag(strings, ...values) {
  console.log(strings[0]); // "Hello "
  console.log(strings[1]); // " world "
  console.log(values[0]);  // 15
  console.log(values[1]);  // 50

  return "Bazinga!";
}

tag`Hello ${ a + b } world ${ a * b}`;
// "Bazinga!"

Raw Strings

Die Eigenschaft raw, verfügbar auf dem ersten Argument eines tagged Template Strings, erlaubt den Zugriff auf den unverarbeiteten eingegebenen String.

function tag(strings, ...values) {
  console.log(strings.raw[0]); 
  // "string text line 1 \\n string text line 2"
}

tag`string text line 1 \n string text line 2`;

Zusätzlich exisitert die Methode String.raw() um unverarbeitete Strings zu erstellen, genauso wie es die standard Template-Funktion und String-Verknüpfung erstellen würde.

String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"

Sicherheit

Template Strings SOLLTEN NICHT von Nutzern erstellt werden, welchen nicht vertraut werden kann, da diese Zugriff auf Variablen und Funktionen haben.

`${console.warn("this is",this)}`; // "this is" Window

let a = 10;
console.warn(`${a+=20}`); // "30"
console.warn(a); // 30

Spezifikationen

Browserkompatibilität

See also

• String
• String.raw()
• Lexical grammar
• Template-like strings in ES3 compatible syntax
• "ES6 in Depth: Template strings" on hacks.mozilla.org