Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Template-Strings

Dieser Artikel benötigt eine redaktionelle Überprüfung. So können Sie helfen.

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

This is a new technology, part of the ECMAScript 2015 (ES6) standard.
This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.

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

Spezifikation Status Kommentar
ECMAScript 2015 (6th Edition, ECMA-262)
Die Definition von 'Template Literals' in dieser Spezifikation.
Standard Initiale Definition. Definiert in mehreren Abschnitten der Spezifikation: Template Literals, Tagged Templates

Browserkompatibilität

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 41 (Ja) 34 (34) Nicht unterstützt 28.0 Nicht unterstützt
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Nicht unterstützt 41.0 34.0 (34) Nicht unterstützt 28.0 Nicht unterstützt

 

See also

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: 22samuelk, stehefan
 Zuletzt aktualisiert von: 22samuelk,