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 anstelle von doppelten bzw. einfachen Anführungszeichen in Back-Ticks (` `) (grave accent) eingeschlossen. Template-Strings können Platzhalter beinhalten, die durch das Dollarsymbol gefolgt von geschweiften Klammern gekennzeichnet (${expression}) sind. Die Ausdrücke in den Platzhaltern und der Text innerhalb der Back-Ticks können an eine Funktion übergeben werden. 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 Zeichen, die einen Zeilenumbruch einleiten und sich zwischen Back-Ticks befinden, werden als Teil des Template Strings verwendet. Nutzt man normale Strings, muss die folgende Syntax genutzt werden, um Strings mit Zeilenumbrücken über mehrere Codezeilen zu definieren:

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

Um das selbe Ergebnis mit Template-Strings zu erreichen, kann 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 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 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