Was sind Template-Literale und wofür werden sie verwendet?

Template-Strings, auch bekannt als Template-Literale, sind ein syntaktischer Zucker in JavaScript, der das Einbetten von Ausdrücken in Strings mit Backticks (``) ermöglicht.

Sie werden verwendet für:

1. Bequemerere Interpolation von Variablen und Ausdrücken in Strings:

   const name = "Welt";
   const greeting = `Hallo, ${name}!`; // Variablen-Interpolation
   console.log(greeting); // Hallo, Welt!
   
   const sum = 2 + 3;
   const result = `Summe: ${sum}.`; // Ausdrucks-Interpolation
   console.log(result); // Summe: 5.
   

2. Erstellen von mehrzeiligen Strings ohne Verwendung des Zeilenumbruchszeichens (\n):

   const multilineString = `
   Das
   ist eine
   mehrzeilige
   Zeichenkette.
   `;
   console.log(multilineString);
   

3. Erstellen komplexer String-Ausdrücke, wie Dateipfade oder SQL-Abfragen, mit besserer Lesbarkeit:

   const userId = 123;
   const query = `SELECT * FROM users WHERE id = ${userId}`;
   console.log(query);
   

4. Verwendung von Tagged Templates für erweiterten Funktionsumfang: Tagged Templates erlauben das Aufrufen einer Funktion mit einem Template-Literal. Das erste Argument der Funktion ist ein Array von String-Teilen, die folgenden Argumente sind die Werte der interpolierten Ausdrücke.

   function highlight(strings, ...values) {
     let str = '';
     strings.forEach((string, i) => {
       str += string;
       if (values[i]) {
         str += `<b>${values[i]}</b>`; // Beispiel: Fettdruck
       }
     });
     return str;
   }
   
   const user = "Frontend";
   const role = "Entwickler";
   const message = highlight`Hallo, ${user}! Du bist ein ${role}.`;
   console.log(message); // Hallo, <b>Frontend</b>! Du bist ein <b>Entwickler</b>.
   

Auf diese Weise machen Template-Strings die Arbeit mit Strings in JavaScript flexibler, verständlicher und helfen, Komplexitäten bei der Verkettung mit + zu vermeiden.