0Pricing
Frontend Academy · Lektion

Template Literals und Optional Chaining

Betten Sie Ausdrücke mit Template Literals in Zeichenketten ein, greifen Sie mit ?. sicher auf verschachtelte Eigenschaften zu und verwenden Sie den Nullish-Coalescing-Operator ??. für einen Kurzschluss.

Template Literals und Optional Chaining ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Template-Literale: Backtick-Strings

Template-Literale (Backtick-Strings) unterstützen mehrzeilige Zeichenketten und eingebettete Ausdrücke. Sie ersetzen die Zeichenkettenverkettung mit + und machen die Absicht klarer.

// String concatenation (old way):
const msg = 'Hello, ' + name + '! You have ' + count + ' messages.';

// Template literal (modern):
const msg2 = `Hello, ${name}! You have ${count} messages.`;

Mehrzeilige Template-Literale

Template-Literale bewahren Zeilenumbrüche und Einrückungen. Schluss mit \n und der Verkettung von Zeichenketten über mehrere Zeilen hinweg.

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

const sql = `
  SELECT *
  FROM users
  WHERE age > ${minAge}
  ORDER BY name
`;

Ausdrücke in Template-Literalen

Jeder JavaScript-Ausdruck kann innerhalb von ${} stehen: ternäre Ausdrücke, Funktionsaufrufe, arithmetische Ausdrücke und Methodenaufrufe.

const tax = 0.2;
const price = 50;
const receipt = `
  Subtotal: $${price}
  Tax (${tax * 100}%): $${price * tax}
  Total: $${price * (1 + tax)}
  ${isPaid ? 'PAID' : 'UNPAID'}
`;

Getaggte Template-Literale

Ein getaggtes Template ruft eine Funktion auf und übergibt ihr die Zeichenkettenabschnitte und interpolierten Werte als Argumente. Das wird von Bibliotheken wie styled-components, GraphQL (gql``) und sql`` für die sichere Erstellung von Abfragen verwendet.

function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) =>
    acc + str + (values[i] !== undefined ? `<mark>${values[i]}</mark>` : ''), '');
}
const msg = highlight`Hello ${name}, you have ${count} messages.`;

Optional Chaining: ?.

Der Operator für optionales Chaining ?. wertet zu undefined aus, statt einen TypeError auszulösen, wenn die linke Seite null oder undefined ist. Dadurch entfallen defensive Nullprüfungen.

const user = null;

// Without optional chaining (throws TypeError):
// user.profile.avatar

// With optional chaining (returns undefined):
const avatar = user?.profile?.avatar;
console.log(avatar); // undefined — no error

Optionale Methodenaufrufe

obj?.method() ruft die Methode nur auf, wenn obj nicht null oder undefined ist. Wenn obj null ist, wird undefined zurückgegeben, ohne einen Fehler auszulösen.

const timer = getTimer(); // might return null
timer?.start(); // only calls start() if timer exists

// Also works on array access:
const firstItem = arr?.[0]; // undefined if arr is null

Nullish Coalescing: ??

Der Nullish-Coalescing-Operator ?? gibt die rechte Seite nur dann zurück, wenn die linke Seite null oder undefined ist (nicht lediglich einen falsy-Wert hat). Anders als || behandelt er 0 oder '' nicht als nullish.

const port = config.port ?? 3000;  // 3000 only if port is null/undefined
const name = user.name ?? 'Anonymous';

// Compare with ||:
console.log(0 ?? 'default');   // 0 (not nullish)
console.log(0 || 'default');   // 'default' (falsy!)

Nullish-Zuweisung: ??=

a ??= b weist b nur dann a zu, wenn a null oder undefined ist. Es ist eine Kurzschreibweise für a = a ?? b. Das ist nützlich, um Objekteigenschaften bedingt zu initialisieren.

let cache = {};
function getUser(id) {
  cache[id] ??= fetchUser(id); // only fetch if not cached
  return cache[id];
}

Logische Zuweisungsoperatoren

&&= weist nur dann zu, wenn die linke Seite truthy ist. ||= weist nur dann zu, wenn die linke Seite falsy ist. Zusammen mit ??= ermöglichen diese Operatoren kompakte bedingte Zuweisungen.

user.name ||= 'Anonymous';  // set if falsy
user.role &&= user.role.toLowerCase(); // transform if exists

?. und ?? kombinieren

Kombinieren Sie optionales Chaining und Nullish Coalescing, um sicher auf Eigenschaften zuzugreifen und dabei einen Standardwert festzulegen.

const city = user?.address?.city ?? 'Unknown';
const total = cart?.items?.length ?? 0;

Wichtige String-Methoden

Häufig verwendete String-Methoden: trim(), trimStart(), trimEnd(), padStart(), padEnd(), startsWith(), endsWith(), includes(), replaceAll(), at().

const str = '  Hello World  ';
str.trim();           // 'Hello World'
str.includes('World'); // true
'5'.padStart(3, '0'); // '005'
'abc'.at(-1);         // 'c'
'aabbcc'.replaceAll('b', 'x'); // 'aaxxcc'

Schnelltest

Was gibt const val = obj?.foo?.bar ?? 'default' zurück, wenn obj null ist?

Zusammenfassung: Template-Literale und optionales Chaining

Backtick-Strings unterstützen Ausdrücke und mehrere Zeilen. Getaggte Templates ermöglichen DSLs. ?. greift sicher auf Eigenschaften zu, ohne Nullprüfungen zu benötigen. ?? liefert einen Standardwert, wenn der Wert null oder undefined ist (nicht nur falsy). Kombinieren Sie diese Funktionen für einen sicheren, lesbaren Datenzugriff mit Standardwerten.

Häufig gestellte Fragen

Ist die Lektion „Template Literals und Optional Chaining“ kostenlos?

Ja — der vollständige Text von „Template Literals und Optional Chaining“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Template Literals und Optional Chaining“?

Betten Sie Ausdrücke mit Template Literals in Zeichenketten ein, greifen Sie mit ?. sicher auf verschachtelte Eigenschaften zu und verwenden Sie den Nullish-Coalescing-Operator ??. für einen Kurzschl… Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Template Literals und Optional Chaining“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Array-Methoden: map, filter, reduce, find
  2. Destructuring und Spread von Objekten
  3. Template Literals und Optional Chaining
  4. Module: import und export
← Zurück zu Frontend Academy