Template-Literale

Text mit + zu verbinden funktioniert, aber bei mehr Werten wird es schwer lesbar, und man vergisst leicht ein Leerzeichen oder ein Anführungszeichen:

const vorname = "Anna";
const alter = 25;
console.log("Ich heiße " + vorname + " und bin " + alter + " Jahre alt.");

Es geht einfacher: mit einem Template-Literal. Das ist Text zwischen Backticks ` statt zwischen Anführungszeichen. Mit ${...} kannst du einen Wert einfügen:

const vorname = "Anna";
const alter = 25;
console.log(`Ich heiße ${vorname} und bin ${alter} Jahre alt.`);

Beide Beispiele geben Folgendes aus:

Ich heiße Anna und bin 25 Jahre alt.

JavaScript ersetzt jedes ${...} durch den Wert darin. Die Leerzeichen sind Teil des Textes, du siehst also sofort, wo sie stehen. Du kannst sogar eine Rechnung in ${...} schreiben:

const preis = 12;
console.log(`Zwei Tickets kosten ${preis * 2} Euro.`);

Das gibt Folgendes aus:

Zwei Tickets kosten 24 Euro.

Das funktioniert nur mit Backticks. In normalen Anführungszeichen ist ${...} einfach Text und wird so ausgegeben, wie er ist:

const tag = "Montag";
console.log("Heute ist ${tag}.");

Das gibt Folgendes aus:

Heute ist ${tag}.

Ein Template-Literal ist ein String wie jeder andere, du kannst es also auch in einer Variablen speichern.