Kapitel 6: Template Strings (Template Literals)

6.1 Grundlagen: `String`

📦 Was sind Template Strings?

Template Strings (auch Template Literals genannt) sind Strings, die in Backticks (`) statt in Anführungszeichen (" oder ') eingeschlossen sind.

// ❌ Alte Methode (ES5) - mit Anführungszeichen
var name = "Max";
var greeting = "Hallo " + name + "!";
console.log(greeting); // "Hallo Max!"

// ✅ Neue Methode (ES6) - mit Backticks
const name = "Max";
const greeting = `Hallo ${name}!`;
console.log(greeting); // "Hallo Max!"

---

🔤 Syntax

// Syntax
`String-Text ${ausdruck} weiterer Text`

---

🎯 Vorteile von Template Strings

Vorteil	Beschreibung
Variablen einsetzen	${variable} statt +
Ausdrücke einsetzen	${2 + 3} wird zu 5
Mehrzeilige Texte	Kein \n mehr nötig
Tagged Templates	Erweiterte Funktionalität
String-Interpolation	Einfacher lesbar

---

6.2 Variablen einsetzen: ${variable}

📦 Einfaches Einsetzen von Variablen

const name = "Max";
const alter = 25;

// ❌ ES5 - String-Verknüpfung
var text1 = "Name: " + name + ", Alter: " + alter;
console.log(text1); // "Name: Max, Alter: 25"

// ✅ ES6 - Template String
const text2 = `Name: ${name}, Alter: ${alter}`;
console.log(text2); // "Name: Max, Alter: 25"

---

🎯 Mehrere Variablen einsetzen

const vorname = "Max";
const nachname = "Mustermann";
const alter = 25;
const stadt = "Berlin";

const info = `${vorname} ${nachname} (${alter}) aus ${stadt}`;
console.log(info); // "Max Mustermann (25) aus Berlin"

---

📋 Objekteigenschaften einsetzen

const person = {
  name: "Max",
  alter: 25,
  adresse: {
    stadt: "Berlin",
    land: "Deutschland"
  }
};

// Objekteigenschaften direkt einsetzen
const text = `${person.name} (${person.alter}) aus ${person.adresse.stadt}`;
console.log(text); // "Max (25) aus Berlin"

// Oder mit Destructuring
const { name, alter, adresse: { stadt } } = person;
const text2 = `${name} (${alter}) aus ${stadt}`;
console.log(text2); // "Max (25) aus Berlin"

---

6.3 Mehrzeilige Texte (ohne Verknüpfung)

❌ ES5: Umständlich mit \n und Verknüpfung

// Mehrzeiliger String in ES5
var text = "Zeile 1\n" +
           "Zeile 2\n" +
           "Zeile 3";

console.log(text);
// Ausgabe:
// Zeile 1
// Zeile 2
// Zeile 3

---

✅ ES6: Mehrzeilige Texte einfach

// Mehrzeiliger String in ES6
const text = `Zeile 1
Zeile 2
Zeile 3`;

console.log(text);
// Ausgabe:
// Zeile 1
// Zeile 2
// Zeile 3

Vorteil: Du kannst den Text genau so formatieren, wie er angezeigt werden soll!

---

🎯 Praxisbeispiel: HTML-Struktur erstellen

const titel = "Meine Webseite";
const inhalt = "Willkommen auf meiner Webseite!";

// ✅ HTML mit Template String
const html = `
  <div class="container">
    <h1>${titel}</h1>
    <p>${inhalt}</p>
  </div>
`;

console.log(html);
// Ausgabe:
//   <div class="container">
//     <h1>Meine Webseite</h1>
//     <p>Willkommen auf meiner Webseite!</p>
//   </div>

---

6.4 Verschachtelte Ausdrücke

🧮 Ausdrücke einsetzen

In ${} kannst du jeden beliebigen Ausdruck schreiben, der einen Wert zurückgibt.

// Mathematische Ausdrücke
const sum = `2 + 3 = ${2 + 3}`;
console.log(sum); // "2 + 3 = 5"

// Funktionsaufrufe
function getGreeting(name) {
  return `Hallo ${name}!`;
}
const text = `${getGreeting("Max")} Wie geht es dir?`;
console.log(text); // "Hallo Max! Wie geht es dir?"

// Ternärer Operator
const alter = 20;
const status = `${alter >= 18 ? "Volljährig" : "Minderjährig"}`;
console.log(status); // "Volljährig"

---

📋 Array-Methoden in Template Strings

const numbers = [1, 2, 3, 4, 5];

// Array-Methoden verwenden
const text = `Die Zahlen sind: ${numbers.join(", ")}. Summe: ${numbers.reduce((a, b) => a + b, 0)}`;
console.log(text); // "Die Zahlen sind: 1, 2, 3, 4, 5. Summe: 15"

---

🎯 Verschachtelte Template Strings

const name = "Max";
const alter = 25;

// Template String in einem Ausdruck
const text = `Name: ${name}, Status: ${alter >= 18 ? `${name} ist volljährig` : `${name} ist minderjährig`}`;
console.log(text); // "Name: Max, Status: Max ist volljährig"

---

6.5 Praxis: HTML-Struktur erstellen, API-URLs zusammenbauen

🌐 Beispiel 1: HTML-Struktur dynamisch erstellen

const produkte = [
  { id: 1, name: "Laptop", preis: 999 },
  { id: 2, name: "Maus", preis: 25 },
  { id: 3, name: "Tastatur", preis: 75 }
];

// ✅ HTML-Liste mit Template String
const html = `
  <ul class="produkt-liste">
    ${produkte.map(produkt => `
      <li class="produkt" data-id="${produkt.id}">
        <span class="name">${produkt.name}</span>
        <span class="preis">${produkt.preis} €</span>
      </li>
    `).join("")}
  </ul>
`;

console.log(html);

---

🌐 Beispiel 2: API-URLs dynamisch erstellen

const baseUrl = "https://api.example.com";
const endpoint = "users";
const userId = 123;
const queryParams = "fields=name,email&sort=asc";

// ✅ API-URL mit Template String
const url = `${baseUrl}/${endpoint}/${userId}?${queryParams}`;
console.log(url); 
// "https://api.example.com/users/123?fields=name,email&sort=asc"

---

🌐 Beispiel 3: CSS-in-JS (Styled Components)

const primaryColor = "#3498db";
const fontSize = "16px";

// ✅ CSS mit Template String
const styles = `
  .button {
    background-color: ${primaryColor};
    font-size: ${fontSize};
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
  }
`;

console.log(styles);

---

🌐 Beispiel 4: SQL-Queries (in Node.js mit Datenbank)

const tableName = "users";
const id = 123;

// ✅ SQL-Query mit Template String
const query = `
  SELECT id, name, email
  FROM ${tableName}
  WHERE id = ${id}
  LIMIT 1
`;

console.log(query);
// Ausgabe:
//   SELECT id, name, email
//   FROM users
//   WHERE id = 123
//   LIMIT 1

---

🎉 Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Grundlagen von Template Strings (Backticks)
• ✅ Variablen einsetzen (${variable})
• ✅ Mehrzeilige Texte einfach erstellen
• ✅ Verschachtelte Ausdrücke (${2 + 3}, Funktionsaufrufe)
• ✅ Praxisanwendung (HTML-Struktur, API-URLs)

📝 Übung

1. Einfacher Template String:

   const name = "Max";
   const alter = 25;
   // Erstelle einen Template String: "Max (25) aus Berlin"

2. Mehrzeiliger Text:

   // Erstelle einen mehrzeiligen String mit Name, Alter, Stadt

3. HTML-Struktur:

   const titel = "Meine Webseite";
   const inhalt = "Willkommen!";
   // Erstelle eine HTML-Struktur mit <h1> und <p>

➡️ Nächstes Kapitel

In Kapitel 7 lernen wir Funktionserweiterungen - Standardparameter, Rest-Parameter, Destrukturierung in Funktionsparametern!