Template Literals

Die vorige Lektion endete mit einer Zeile, die man kaum noch lesen kann: ein Satz, zerhackt in fünf Bruchstücke zwischen Plus-Zeichen. Dafür gibt es seit 2015 eine eigene Schreibweise, und die wird der Normalfall bleiben.

01 / 05Backticks statt Anführungszeichen

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const name = "Mario";
const stadt = "Leipzig";

// Schräge Anführungszeichen, und die Werte stehen mitten im Satz.
console.log(`Hallo ${name}, schön dass du aus ${stadt} kommst!`);

// Ohne Werte funktioniert es genauso, dann ist es ein normaler Text.
console.log(`Einfach nur Text`);

Statt gerader Anführungszeichen stehen vorn und hinten schräge Striche, sogenannte Backticks. Innerhalb dieses Textes darfst du ${...} schreiben, und was in den geschweiften Klammern steht, wird durch seinen Wert ersetzt.

Der Fachbegriff dafür ist Template Literal, manchmal auch Template String. Beides meint dasselbe.

Die Taste auf der deutschen Tastatur liegt rechts neben dem ß, links von der Rücktaste. Der Backtick ist die Großschreibung darauf, du brauchst also Shift. Und dann passiert erst einmal nichts, denn es ist eine tote Taste: Sie wartet auf das nächste Zeichen, um daraus einen Akzent zu machen. Drück danach die Leertaste, dann erscheint der Backtick allein. Oder drück die Taste zweimal, dann bekommst du gleich zwei. In den meisten Code-Editoren ist das Problem gelöst und es erscheint sofort, in einem normalen Textfeld nicht.

02 / 05Warum das dem Plus überlegen ist

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const name = "Mario";
const stadt = "Leipzig";

// Beide Zeilen geben dasselbe aus. Welche liest sich besser?
console.log("Hallo " + name + ", schön dass du aus " + stadt + " kommst!");
console.log(`Hallo ${name}, schön dass du aus ${stadt} kommst!`);

// Und hier fehlt ein Leerzeichen. In welcher der beiden siehst du es?
console.log("Hallo " + name + ", schön dass du aus" + stadt + " kommst!");
console.log(`Hallo ${name}, schön dass du aus${stadt} kommst!`);

Die beiden ersten Zeilen geben genau dasselbe aus. Der Unterschied ist, was du beim Lesen siehst.

Bei der Plus-Fassung siehst du Bruchstücke und musst dir den Satz im Kopf zusammensetzen. Bei der Backtick-Fassung siehst du den fertigen Satz mit Lücken darin.

Das dritte Paar zeigt, warum das mehr als Geschmack ist. In beiden Zeilen fehlt dasselbe Leerzeichen. In der zweiten fällt es dir sofort auf, weil aus${stadt} sichtbar zusammenklebt. In der ersten steht "aus" + stadt da, und ob am Ende von "aus" ein Leerzeichen steht, sieht kein Mensch.

Dazu kommt: Die Anführungszeichen im Text sind kein Problem mehr. In einem Template Literal darfst du beide Sorten frei verwenden, denn begrenzt wird der Text ja von den Backticks.

03 / 05In den Klammern darf mehr stehen als ein Name

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const preisInCent = 1999;
const anzahl = 3;

// In den Klammern darf jede Rechnung stehen, nicht nur ein Name.
console.log(`Einzelpreis: ${preisInCent / 100} Euro`);
console.log(`Gesamt: ${(preisInCent * anzahl) / 100} Euro`);

// Auch ein Aufruf ist erlaubt.
console.log(`Gerundet: ${Math.round(preisInCent * 1.19)} Cent`);

Zwischen ${ und } steht nicht nur ein Name, sondern jeder Ausdruck: eine Rechnung, ein Funktionsaufruf, ein Zugriff auf eine Eigenschaft.

Das ist bequem und hat eine Grenze, die man sich früh setzen sollte. Eine kurze Rechnung wie ${preisInCent / 100} liest sich gut. Drei verschachtelte Aufrufe in einer Klammer liest niemand mehr. Wenn die Klammer länger wird als der Text drumherum, rechne vorher und gib dem Ergebnis einen Namen.

Ein häufiger Anfängerfehler dabei: das Dollarzeichen vergessen. {name} ohne $ ist kein Platzhalter, sondern einfach der Text {name}. Es gibt keine Fehlermeldung, es steht nur der falsche Text da.

04 / 05Mehrere Zeilen

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const name = "Mario";

// So ging es bisher: Zeilenumbrüche als \n mitten im Text.
console.log("Hallo " + name + ",\nschön, dass du da bist.\nBis bald!");

// Und so geht es jetzt: der Umbruch steht einfach da, wo er hingehört.
console.log(`Hallo ${name},
schön, dass du da bist.
Bis bald!`);

In einem Template Literal darf ein Zeilenumbruch einfach dastehen. Du drückst Enter, und der Umbruch ist Teil des Textes. Kein \n mehr.

Achte dabei auf die Einrückung: Alles, was links vom Text steht, gehört mit dazu. Rückst du die Folgezeilen ein, damit es im Editor hübsch aussieht, stehen die Leerzeichen hinterher im Text. Deshalb sind mehrzeilige Template Literals in eingerücktem Code manchmal unschön linksbündig, und das ist Absicht.

In einem normalen Text mit Anführungszeichen geht das übrigens nicht. Dort beendet ein Zeilenumbruch den Text und du bekommst einen Syntaxfehler. Das ist einer der Gründe, warum die Backtick-Fassung sich durchgesetzt hat.

05 / 05Wann du was nimmst

Die ehrliche Antwort für den Anfang: Nimm Template Literals, sobald ein Wert im Text steckt. Bei reinem Text ohne Platzhalter sind normale Anführungszeichen einen Tick üblicher, aber es ist kein Fehler, überall Backticks zu nehmen.

Das Plus zum Verbinden verschwindet damit fast vollständig aus deinem Code. Du wirst es weiterhin in fremdem Code sehen, vor allem in älterem, und weißt jetzt, was es tut.