Javascript Template Literal

Template Literal

Template Strings oder besser Template Literals setzen Variablen mit ${…} direkt in Strings. Das vermeidet die wiederholten +-Zeichen für die Konkatenation und verkraftet Zeilenumbrüche in Strings.

18-12-15 SITEMAP

Das invertierte Hochkomma

Template Strings sitzen in invertierten Hochkommas ` (Backtick). Auf deutschen Tastaturen sitzt das Backtick rechts vom ß, auf Schweizer Tastaturen links von der Backspace-Taste und wird z.B. für französische und spanische Akzente benutzt. Dauerhaft zum Vorschein kommt das zarte Symbol erst durch ein folgendes Zeichen. Zeichen, die nicht direkt übernommen werden sondern ein folgendes Zeichen brauchten, werden auch als Tottasten bezeichnet.

const string = 
`Da alle Ersetzungen in Template Strings Ausdrücke sind,
         können wir Variablennamen ersetzen 

         und Berechnungen direkt in den Template String einsetzen.`;
console.log ( string );


			

Sobald ein Template Literal durch das Backtick geöffnet wird, erzeugt die Entertaste eine neue Zeile ganz ohne Sonderzeichen wie \n. Einrückungen werden buchstäblich übernommen.

Die herkömmliche Schreibweise für Strings mit Variablen ist nervig und bei längeren Ausgaben unübersichtlich und fehlerträchtig.

const a = 101;
const b = 42;

const quiz = "Die Summe von " + a + " " + b " ist " + (a + b) + ".";

Als Template String bzw. Template Literal geschrieben:

const quiz = `Die Summe von ${a} und ${b} ist ${(a + b)}.`;

Innerhalb des Template-Strings ist das Pluszeichen des Beispiels keine Konkatenation, sondern ein Plus, da beide Variablen vom Typ number sind.

Browser Support

Alle immergrünen Browser, aber nicht IE11.