JavaScript: Template-String erlaubt Variablen und Umbrüche in Zeichenketten

Arbeitet man mit JavaScript, kommt es immer wieder vor, dass Variablen oder Zeilenumbrüche  in einer Zeichenkette untergebracht werden müssen. Während man Variablen per Plus-Zeichen an eine Zeichenkette anhängt, ist das Einfügen von Zeilenumbrüchen nur als spezielle Steuerzeichen vorgesehen. Mit den neuen Template-String-Möglichkeiten von JavaScript, die derzeit noch experimentell sind, lassen sich Variablen und Umbrüche künftig deutlich unkomplizierter in einer Zeichenkette unterbringen.

Template-String auszeichnen

Die neuen Template-Strings erkennt man daran, dass sie anders als herkömmliche Zeichenketten nicht in Anführungszeichen stehen, sondern von sogenannten Backticks – ` – umschlossen sind. Es handelt sich hierbei um das Akut-Zeichen, welches vor allem im Französischen als „accent grave“ Verwendung findet. JavaScript erkennt Zeichenketten, die in Backticks stehen, als Template-Strings und interpretiert ihren Inhalt anders als einfache Zeichenketten.

var string = "Dies ist eine einfache Zeichenkette";
var templatestring = `Dies ist ein Template-String.`;

Will man beispielsweise Variablen in einer Zeichenkette unterbringen, ist dies per Template-Strings möglich, ohne die Zeichenkette für die Variable unterbrechen zu müssen. Variablen können quasi als Platzhalter in einen Template-String integriert werden.

var zahl1 = 10;
var zahl2 = 15;

var string = "Addiert man " + zahl1 + " mit " + zahl2 + ", ergibt das " + (zahl1 + zahl2) + ".";

var templatestring = `Addiert man ${zahl1} mit ${zahl2}, ergibt das ${zahl1 + zahl2}.`;

Das Beispiel zeigt, dass man sich bei Template-Strings die wiederkeherenden Anführungs- und Pluszeichen schenken kann und somit auf eine insgesamt kürzere Zeichenkette kommt. Das ist übersichtlicher und vor allem weniger anfällig für Fehler. Denn gerade fehlende Anführungszeichen sind eine häufige Fehlerquelle bei der Programmierung. Damit Variablen in Template-Strings zu erkennen sind, müssen sie in geschwungenen Klammern stehen und mit einem Dollar-Zeichen eingeleitet werden („${…}“).

Das Einfügen von Variablen in eine Zeichenkette, wie es die Template-Strings ermöglichen, gibt es auch bei anderen Programmiersprachen. So existiert eine ähnliche Auszeichnung von Variablen auch in PHP, wenngleich die Trennung von Zeichenkette und Variable in der Regel etwas performanter ist.

Template-String als Array ausgeben

Eine weitere Besonderheit der Template-Strings ist die Möglichkeit, Inhalt als Array auszugeben. Übergibt man einen Template-String an eine Funktion, lassen sich die einzelnen per Leerzeichen getrennten Zeichenketten separat auslesen.

function zerlegen(zeichenkette, wert1, wert2, wert3) {
  console.log(zeichenkette[0]); // "Addiert "
  console.log(wert1); // "10"
  console.log(wert2); // "15";
}

zerlegen `Addiert man ${zahl1} mit ${zahl2}, ergibt das ${zahl1 + zahl2}.`;

Im Beispiel wird die Funktion „zerlegen()“ erstellt, der vier Argumente übergeben werden können. Übergibt man dieser Funktion einen Template-String, werden alle Textbestandteile dem Array „zeichenkette“ zugewiesen. Der variable Inhalt, der per „${…}“ gekennzeichnet ist, wird den Variablen „wert1“, „wert2“ und „wert3“ zugeordnet.

Anders als bei der klassischen „split()“-Methode bleiben die Leerzeichen erhalten. Wichtig ist, dass beim Funktionsaufruf – anders als üblich – der Template-String nicht in Klammern stehen darf.

Zeilenumbrüche in Template-String

Will man in einer normalen Zeichenkette einen Zeilenumbruch unterbringen, muss man diesen mit dem Steuerzeichen „\n“ auszeichnen. In Template-Strings kann auf dieses Steuerzeichen verzichtet werden. Stattdessen reicht ein tatsächlicher Zeilenumbruch aus.

var string= "Zeile 1\nZeile 2";

var templatestring = `Zeile 1
Zeile 2`;

Würde man in einer normalen Zeichenkette einen tatsächlichen Zeilenumbruch unterbringen, würde dies zu einer Fehlermeldung führen. Allerdings ist es auch möglich, innerhalb von Template-Strings Steuerzeichen einzusetzen. Mit der Methode „String.raw()“ gibt man zudem etwaige Steuerzeichen in einem Template-String als solche aus.

console.log(`Zeile 1\nZeile 2`);

console.log(String.raw `Zeile1\nZeile2`);

Im zweiten Beispiel wandeln wir das Steuerzeichen nicht um, sondern geben es als „\n“ aus. Wie auch bei Funktionen, darf der Template-String nicht in Klammern an die Methode übergeben werden.

Browsersupport

Derzeit werden Template-Strings nur vom aktuellen Firefox ab der Version 34 und Chrome ab der Version 41 unterstützt. Template-Strings bereichern JavaScript nicht mit neuen Funktionen, können aber für übersichtlicheren und weniger fehleranfälligen Quelltext sorgen.