Javascript Template Literal

Template Literal

Template Strings oder besser Template Literals setzen Variablen in Strings oder wiederholte +-Zeichen für die Konkatenation und verkraften 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.

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)}.`;

Browser Support

Alle immergrünen Browser, aber nicht IE11.