Kapitel 15: Neue String-Methoden

15.1 includes() - Prüfen, ob Teilstring enthalten ist

🔍 Was macht includes()?

includes() prüft, ob ein String einen bestimmten Teilstring enthält. Gibt true oder false zurück.

// Syntax
string.includes(suchstring, startPosition)

---

🎯 Einfaches Beispiel

const str = "Hallo Welt!";

// ❌ Alte Methode (ES5) - mit indexOf()
var containsWelt = str.indexOf("Welt") !== -1;
console.log(containsWelt); // true

// ✅ Neue Methode (ES6) - mit includes()
const containsWelt = str.includes("Welt");
console.log(containsWelt); // true

const containsXYZ = str.includes("XYZ");
console.log(containsXYZ); // false

---

🎯 Mit Startposition

const str = "Hallo Hallo Hallo!";

// Ab Position 5 suchen
console.log(str.includes("Hallo", 5)); // true (zweites "Hallo")
console.log(str.includes("Hallo", 10)); // false

---

📋 Praxisbeispiel: Dateiendung prüfen

function isImageFile(filename) {
  const ext = filename.toLowerCase();
  return ext.includes(".jpg") || ext.includes(".png") || ext.includes(".gif");
}

console.log(isImageFile("photo.jpg"));  // true
console.log(isImageFile("document.pdf")); // false

---

15.2 startsWith() / endsWith()

▶️ startsWith() - Prüfen, ob String beginnt mit...

const str = "https://www.example.com";

// ❌ Alte Methode (ES5)
var startsWithHttps = str.indexOf("https://") === 0;
console.log(startsWithHttps); // true

// ✅ Neue Methode (ES6)
const startsWithHttps = str.startsWith("https://");
console.log(startsWithHttps); // true

---

⏏️ endsWith() - Prüfen, ob String endet mit...

const filename = "document.pdf";

// ❌ Alte Methode (ES5)
var endsWithPdf = filename.slice(-4) === ".pdf";
console.log(endsWithPdf); // true

// ✅ Neue Methode (ES6)
const endsWithPdf = filename.endsWith(".pdf");
console.log(endsWithPdf); // true

---

🎯 Mit Positionen (nur startsWith)

const str = "Hallo Welt, Hallo wieder!";

// Ab Position 7 prüfen
console.log(str.startsWith("Welt", 7)); // true

---

📋 Praxisbeispiel: URL-Validierung

function validateURL(url) {
  if (!url.startsWith("http://") && !url.startsWith("https://")) {
    return "Ungültige URL: Muss mit http:// oder https:// beginnen";
  }
  
  if (!url.endsWith("/")) {
    url += "/";
  }
  
  return `Valide URL: ${url}`;
}

console.log(validateURL("https://example.com")); 
// "Valide URL: https://example.com/"

---

15.3 repeat() - String wiederholen

🔁 Was macht repeat()?

repeat() wiederholt einen String n-mal.

// Syntax
string.repeat(anzahl)

---

🎯 Einfaches Beispiel

// ❌ Alte Methode (ES5) - with loop
var str1 = "";
for (var i = 0; i < 3; i++) {
  str1 += "Ha";
}
console.log(str1); // "HaHaHa"

// ✅ Neue Methode (ES6)
const str2 = "Ha".repeat(3);
console.log(str2); // "HaHaHa"

---

🎯 Mit 0 (leeer String)

console.log("ABC".repeat(0)); // "" (leeer String)
console.log("ABC".repeat(1)); // "ABC"
console.log("ABC".repeat(3)); // "ABCABCABC"

---

⚠️ Achtung: Dezimalzahlen werden abgerundet!

console.log("A".repeat(3.9)); // "AAA" (abgerundet zu 3)

---

📋 Praxisbeispiel: Trennlinie erstellen

function createSeparator(char, length) {
  return char.repeat(length);
}

console.log(createSeparator("-", 20));
// "--------------------"

console.log(createSeparator("*", 10));
// "**********"

---

15.4 padStart() / padEnd() - Auffüllen

📏 Was macht padStart() / padEnd()?

Diese Methoden füllen einen String auf eine bestimmte Länge auf (mit Leerzeichen oder einem angegebenen String).

// Syntax
string.padStart(zielLänge, füllString)
string.padEnd(zielLänge, füllString)

---

🎯 padStart() - Vorne auffüllen

const str = "42";

// Mit Leerzeichen auffüllen
console.log(str.padStart(5));    // "   42" (3 Leerzeichen + "42")
console.log(str.padStart(10));   // "         42"

// Mit eigenem String auffüllen
console.log(str.padStart(5, "0"));  // "00042"
console.log(str.padStart(10, "*")); // "********42"

---

🎯 padEnd() - Hinten auffüllen

const str = "42";

// Mit Leerzeichen auffüllen
console.log(str.padEnd(5));    // "42   " (3 Leerzeichen)
console.log(str.padEnd(10));   // "42        "

// Mit eigenem String auffüllen
console.log(str.padEnd(5, "0"));  // "42000"
console.log(str.padEnd(10, "*")); // "42********"

---

📋 Praxisbeispiel 1: Zahlen formatieren

// Zahlen auf 5 Stellen mit führenden Nullen formatieren
function formatNumber(num, digits = 5) {
  return String(num).padStart(digits, "0");
}

console.log(formatNumber(1));     // "00001"
console.log(formatNumber(42));    // "00042"
console.log(formatNumber(12345)); // "12345"

---

📋 Praxisbeispiel 2: Rechnungsauszug formatieren

function printReceiptItem(name, price) {
  const formattedPrice = `€${price.toFixed(2)}`;
  return `${name.padEnd(20)} ${formattedPrice.padStart(10)}`;
}

console.log(printReceiptItem("Laptop", 999.99));
// "Laptop               €999.99"

console.log(printReceiptItem("Maus", 25.50));
// "Maus                 €25.50"

---

📋 Praxisbeispiel 3: Datumsformatierung

function formatDate(year, month, day) {
  return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
}

console.log(formatDate(2024, 5, 3));
// "2024-05-03"

---

🎉 Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ includes() - Prüfen, ob Teilstring enthalten ist
• ✅ startsWith() / endsWith() - Prüfen, ob String beginnt/endet mit...
• ✅ repeat() - String n-mal wiederholen
• ✅ padStart() / padEnd() - String auffüllen (Zahlen formatieren, Rechnungsauszug)

📝 Übung

1. includes() verwenden:

   const email = "user@example.com";
   // Prüfe, ob die E-Mail ein "@"-Zeichen enthält

2. startsWith() / endsWith() verwenden:

   const filename = "document.pdf";
   // Prüfe, ob die Datei mit "doc" beginnt und mit ".pdf" endet

3. repeat() verwenden:

   // Erstelle einen "Ladebalken" mit 10 "#"-Zeichen

4. padStart() / padEnd() verwenden:

   // Formatiere die Zahl 42 auf 5 Stellen mit führenden Nullen

➡️ Nächstes Kapitel

In Kapitel 16 lernen wir neue Number- und Object-Methoden in ES6+ (Number.isFinite(), Number.isNaN(), Object.keys/values/entries)!