Javascript Template Literals

Backtick: Das invertierte Hochkomma

Template Literals sitzen in invertierten Hochkommas ` (Backtick) und sehen ein bißchen aus wie Strings. 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.

Innerhalb der Backticks können doppelte und einfache Hochkommas sitzen.

const lit = `"Hallo Welt" ist die erst Zeile mit 'Javascript'`;

Ausdrücke ausführen: ${ }

Der Clou der Template Literals ist ihre Syntax: Ausdrücke in $ mit { und } werden ausgeführt und als String eingefügt. Wo die herkömmliche Schreibweise für Strings mit Variablen nervig und bei längeren Ausgaben unübersichtlich und fehlerträchtig ist

const a = 101;
const b = 42;

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

wird ein Template Literal direkt und lesbar geschrieben:

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

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

Und dynamisches HTML einfügen? Lesbar, intuitiv und mit weniger Tücken:

document.querySelector(".result").innerHTML = 
`<figure class="svginside" style="max-width:400px">
	<img loading="lazy" src="${imgsrc}" width="${width}" height="${height}" alt="${caption}">
	<figcaption style="text-align: center"><em>${caption}</em></figcaption>
</figure>`;

Javascript Template-Literals vs Templates-Engine

Sind Template Literals angetreten, die unzähligen Template-Systeme wie Jade, Handlebars und Mustach zu ersetzen? Nehmen wir das Beispiel des HTML-Template-Elements:

const products = [
	{"cake": "Flan", "price":"2,80", "sku": "M1406", … },
	{"cake": "Sable", "price":"2,10", "sku": "M1417", … },
	{"cake": "Savarin", "price":"2,10", "text": "sku": "M1336", … }
];


let jst = products.map(elem => {
	return `
		<div class="block-column">
			<header>
				<h4>${elem.cake}</h4>
				<img loading="lazy" src="${elem.imgsrc}" width="300" height="300" alt="${elem.cake}">
			</header>
			<div>${elem.price} €</div>
			<div>${elem.text}</div>
			<div><a href="${elem.sku}">In den Warenkorb</a></div>
		</div>
	`;
}).join("");

document.querySelector("french-cakes").innerHTML = jst;

Deutlich eleganter und weniger fehlerlastig als das HTML-Template. Aber das war auch einfach. Wenn wir Template Engines wie Handbars, Moustache oder Jade ersetzen wollen, stoßen wir auf Funktionen, die wir nicht ohne Weiteres ersetzen können.

{\{#if isAdmin}}
{\{/if}}

oder

{\{#each people}}
{\{/each}}

Dann wird es kompliziert und wir müssten selber passende Hilfsfunktionen anlegen.

Browser Support

Alle immergrünen Browser, aber nicht IE11 (na ja).