Template-Strings

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 sind (${expression}). 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 einzigen 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, den man anschließend vor der Ausgabe manipulieren kann.

Mehrzeilige Strings

Alle Zeichen, die einen Zeilenumbruch einleiten und sich zwischen Back-Ticks befinden, werden als Teil des Template Strings verwendet. Bei normalen 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 dasselbe 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 ihnen kann man die Ausgabe von Template Strings mit einer Funktion modifizieren. Das erste Argument enthält ein Array von Strings ("Hello" und "world" in diesem Beispiel). Alle Argumente 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 sie jeden 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!"

Tag-Funktionen müssen keinen String zurückgeben, wie das folgende Beispiel zeigt.

function template(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });
    return result.join('');
  });
}

var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A');  // "YAY!"
var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'});  // "Hello World!"

Raw Strings

Die Eigenschaft raw, verfügbar für das erste Argument eines tagged Template Strings, erlaubt den Zugriff auf den unverarbeiteten eingegebenen String, also ohne Escape-Sequenzen auszuwerten.

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 sie die standard Template-Funktion und String-Verknüpfung erstellen würde.

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

str.length;
// 6

str.split('').join(',');
// "H,i,\,n,5,!"

Sicherheit

Template Strings SOLLTEN NICHT von Nutzern erstellt werden, denen 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: chrillek, 22samuelk, stehefan
 Zuletzt aktualisiert von: chrillek,