Template Literals

Template Literals (auch Template Strings genannt) sind eine moderne Art, Strings in JavaScript zu schreiben. Statt einfacher oder doppelter Anführungszeichen verwendest du Backticks (`).

Grundsyntax

Mit klassischer String-Verkettung baust du Strings mit + zusammen:

const name = "Dan";
const fach = "Informatik";

const text = "Hallo " + name + ", du studierst " + fach + ".";
// "Hallo Dan, du studierst Informatik."

Mit Template Literals wird das deutlich lesbarer:

const name = "Dan";
const fach = "Informatik";

const text = `Hallo ${name}, du studierst ${fach}.`;
// "Hallo Dan, du studierst Informatik."

${...} ist ein Platzhalter (Interpolation) — JavaScript wertet den Ausdruck darin aus und setzt das Ergebnis in den String ein.

Ausdrücke in Platzhaltern

In ${...} kann jeder JavaScript-Ausdruck stehen — nicht nur Variablen:

const preis = 19.99;
const menge = 3;

console.log(`Gesamtpreis: ${preis * menge} €`);
// "Gesamtpreis: 59.97 €"

console.log(`Status: ${menge > 0 ? "verfügbar" : "ausverkauft"}`);
// "Status: verfügbar"

console.log(`Name: ${"dan".toUpperCase()}`);
// "Name: DAN"

Mehrzeilige Strings

Mit normalen Strings brauchst du \n für Zeilenumbrüche:

const text = "Zeile 1\nZeile 2\nZeile 3";

Template Literals erlauben echte Zeilenumbrüche:

const text = `Zeile 1
Zeile 2
Zeile 3`;

Das ist besonders praktisch für HTML-Fragmente oder längere Texte:

const html = `
  <div class="card">
    <h2>${name}</h2>
    <p>${fach}</p>
  </div>
`;

Hinweis

Einrückungen und Leerzeichen innerhalb von Template Literals werden beibehalten. Achte darauf, wenn du den String weiterverarbeitest.

Verschachtelung

Template Literals lassen sich verschachteln — ein Platzhalter kann selbst wieder ein Template Literal enthalten:

const studenten = ["Dan", "Sophie", "Max"];

const liste = `Studenten: ${studenten.map(s => `${s}`).join(", ")}`;
// "Studenten: Dan, Sophie, Max"

Typische Verwendung in React

CSS-Klassen dynamisch zusammenbauen:

function StudentCard({ name, isActive }) {
  return (
    <div className={`card ${isActive ? "active" : ""}`}>
      <h2>{name}</h2>
    </div>
  );
}

URLs und Pfade:

function Avatar({ userId, size }) {
  return (
    <img src={`/api/users/${userId}/avatar?size=${size}`} alt="Avatar" />
  );
}

Texte mit Variablen:

function Greeting({ name, count }) {
  return <p>{`Hallo ${name}, du hast ${count} neue Nachrichten.`}</p>;
}

Tipp

In JSX brauchst du Template Literals nur in Attributen oder wenn du einen String explizit zusammenbauen willst. Für Text-Inhalte ist JSX selbst schon eine Art Template:

// Template Literal — funktioniert, aber unnötig
<p>{`Hallo ${name}`}</p>

// JSX direkt — einfacher
<p>Hallo {name}</p>

Verwende Template Literals dort, wo reiner JSX-Text nicht ausreicht — z.B. in Attributen wie className oder src.