diff --git a/STRING_METHODS_NOTES.md b/STRING_METHODS_NOTES.md deleted file mode 100644 index c970b37..0000000 --- a/STRING_METHODS_NOTES.md +++ /dev/null @@ -1,462 +0,0 @@ -# JavaScript String-Methoden und -Eigenschaften – Notizen - -## 1. `length` (Eigenschaft) - -Gibt die Anzahl der Zeichen in einem String zurück. - -```javascript -const text = "Hallo"; -console.log(text.length); // 5 - -const empty = ""; -console.log(empty.length); // 0 - -const withSpaces = "Hallo Welt"; -console.log(withSpaces.length); // 11 (Leerzeichen zählt mit) -``` - -**Wichtig**: `length` ist eine Eigenschaft, keine Methode – keine Klammern! - ---- - -## 2. `indexOf()` und `lastIndexOf()` - -### `indexOf(searchValue, fromIndex)` -Sucht ein Zeichen oder Substring von links nach rechts. Gibt den **Index** (Position) zurück. Wenn nicht gefunden: **-1**. - -```javascript -const text = "Hallo Welt"; - -// Einzelnes Zeichen -console.log(text.indexOf("H")); // 0 (erstes Zeichen) -console.log(text.indexOf("o")); // 4 (erste "o") - -// Substring -console.log(text.indexOf("Welt")); // 6 -console.log(text.indexOf("xyz")); // -1 (nicht gefunden) - -// Optional: Startposition angeben -console.log(text.indexOf("l", 3)); // 3 (erste "l" ab Position 3) -``` - -### `lastIndexOf(searchValue, fromIndex)` -Sucht von rechts nach links – gibt **letztes** Vorkommen zurück. - -```javascript -const text = "Hallo Welt"; - -console.log(text.lastIndexOf("o")); // 9 (letzte "o") -console.log(text.lastIndexOf("l")); // 9 (letzte "l") -console.log(text.lastIndexOf("Welt")); // 6 -console.log(text.lastIndexOf("xyz")); // -1 (nicht gefunden) - -// Optional: Position von rechts -const text2 = "banana"; -console.log(text2.lastIndexOf("a", 4)); // 3 (letzte "a" bis Position 4) -``` - -**Unterschied**: -- `indexOf()` → erstes Vorkommen von links -- `lastIndexOf()` → letztes Vorkommen von rechts - ---- - -## 3. `search()` - -Sucht mit **regulärem Ausdruck** (Regex). Gibt Index des ersten Matches zurück, sonst **-1**. - -```javascript -const text = "Hallo123Welt"; - -// Einfache Suche nach Ziffer -console.log(text.search(/\d/)); // 5 (erste Ziffer) - -// Groß-/Kleinschreibung ignorieren -console.log(text.search(/welt/i)); // 8 - -// Mehrere Zeichen -console.log(text.search(/[0-9]+/)); // 5 - -// Nicht gefunden -console.log(text.search(/xyz/)); // -1 -``` - -**Unterschied zu indexOf()**: -- `indexOf()` → exakte String-Suche, einfach und schnell -- `search()` → Regex-Suche, mächtiger und komplexer - ---- - -## 4. `slice(start, end)` - -Extrahiert einen Teil des Strings. `end` ist **exklusiv** (wird nicht mit einbezogen). - -```javascript -const text = "Hallo Welt"; -// 01234567890 - -// slice(start) -console.log(text.slice(0)); // "Hallo Welt" (ab Position 0) -console.log(text.slice(6)); // "Welt" (ab Position 6) - -// slice(start, end) -console.log(text.slice(0, 5)); // "Hallo" (Position 0 bis 4) -console.log(text.slice(6, 10)); // "Welt" (Position 6 bis 9) - -// Negative Indizes (von hinten) -console.log(text.slice(-4)); // "Welt" (letzte 4 Zeichen) -console.log(text.slice(0, -5)); // "Hallo " (alles außer letzten 5) -console.log(text.slice(-4, -1)); // "Wel" (2. bis 4. Zeichen von hinten) -``` - -**Wichtig**: `slice()` erstellt einen **neuen String**, der ursprüngliche wird nicht verändert! - ---- - -## 5. `substring(start, end)` - -Ähnlich wie `slice()`, mit kleinen Unterschieden: -- `end` ist auch **exklusiv** -- Unterstützt **keine negativen Indizes** (werden als 0 interpretiert) -- Vertauscht automatisch `start` und `end`, wenn `start > end` - -```javascript -const text = "Hallo Welt"; - -// Normal -console.log(text.substring(0, 5)); // "Hallo" -console.log(text.substring(6, 10)); // "Welt" - -// Ohne end (bis zum Ende) -console.log(text.substring(6)); // "Welt" - -// Negative Werte → werden 0 -console.log(text.substring(-5, 5)); // "Hallo" (negativ ignoriert) - -// Vertauschte Parameter -console.log(text.substring(5, 0)); // "Hallo" (Parameter werden vertauscht) -``` - -**Unterschied zu slice()**: -- `slice()` → unterstützt negative Indizes, logischer -- `substring()` → keine negativen Indizes, bei Bedarf Parameter vertauschen - ---- - -## 6. `substr()` (Veraltet!) - -Extrahiert Zeichen basierend auf **Startposition** und **Länge** (nicht Ende). - -```javascript -const text = "Hallo Welt"; - -console.log(text.substr(0, 5)); // "Hallo" (ab Position 0, Länge 5) -console.log(text.substr(6, 4)); // "Welt" (ab Position 6, Länge 4) -console.log(text.substr(-4)); // "Welt" (letzte 4 Zeichen) -console.log(text.substr(-4, 2)); // "We" (ab -4, Länge 2) -``` - -**Warnung**: `substr()` ist **deprecated** (veraltet). Nutzen Sie stattdessen `slice()` oder `substring()`! - ---- - -## 7. `replace(searchValue, replaceValue)` - -Ersetzt das **erste** Vorkommen eines Strings/Regex durch einen anderen. - -```javascript -const text = "Hallo Hallo"; - -// Einfacher String -console.log(text.replace("Hallo", "Hi")); -// "Hi Hallo" (nur erstes Vorkommen!) - -// Mit Regex und "g" Flag (global → alle) -console.log(text.replace(/Hallo/g, "Hi")); -// "Hi Hi" (alle Vorkommen) - -// Groß-/Kleinschreibung ignorieren -console.log(text.replace(/hallo/i, "Hi")); -// "Hi Hallo" -``` - -**Wichtig**: -- `replace()` ersetzt nur das **erste** Vorkommen! -- Für alle: Regex mit `g` Flag verwenden -- Ursprünglicher String wird nicht verändert (neuer String wird zurückgegeben) - -```javascript -const result = "abc abc".replace(/abc/g, "xyz"); -console.log(result); // "xyz xyz" -``` - ---- - -## 8. `toUpperCase()` und `toLowerCase()` - -Wandelt String in GROSSBUCHSTABEN oder kleinbuchstaben um. - -```javascript -const text = "Hallo Welt"; - -// Großbuchstaben -console.log(text.toUpperCase()); // "HALLO WELT" -console.log("xyz".toUpperCase()); // "XYZ" - -// Kleinbuchstaben -console.log(text.toLowerCase()); // "hallo welt" -console.log("XYZ".toLowerCase()); // "xyz" - -// Mit Zahlen und Sonderzeichen -console.log("123!@#".toUpperCase()); // "123!@#" (keine Änderung) -``` - -**Wichtig**: Original wird nicht verändert! - -```javascript -const original = "Test"; -const upper = original.toUpperCase(); -console.log(original); // "Test" (unverändert!) -console.log(upper); // "TEST" -``` - ---- - -## 9. `concat(...strings)` - -Verbindet mehrere Strings zu einem neuen String. - -```javascript -const str1 = "Hallo"; -const str2 = "Welt"; - -// Mit concat() -console.log(str1.concat(" ", str2)); // "Hallo Welt" -console.log("a".concat("b", "c", "d")); // "abcd" - -// Mit mehreren Argumenten -console.log("Hello".concat(" ", "World", "!")); // "Hello World!" -``` - -**Gleich wie `+` Operator**: -```javascript -const text = "Hallo" + " " + "Welt"; // "Hallo Welt" -const text2 = "Hallo".concat(" ", "Welt"); // "Hallo Welt" -``` - -**Besser**: In der Praxis ist der `+` Operator oder Template Literals üblicher: -```javascript -const str1 = "Hallo"; -const str2 = "Welt"; - -// + Operator -const result1 = str1 + " " + str2; - -// Template Literals (empfohlen) -const result2 = `${str1} ${str2}`; - -// concat() (seltener) -const result3 = str1.concat(" ", str2); -``` - ---- - -## 10. `trim()` - -Entfernt Whitespace (Leerzeichen, Tabs, Zeilenumbrüche) vom **Anfang** und **Ende** eines Strings. - -```javascript -const text = " Hallo Welt "; - -console.log(text.trim()); // "Hallo Welt" (Außenleerzeichen weg) -console.log(text.length); // 14 -console.log(text.trim().length); // 11 - -// Mit Tabs und Zeilenumbrüchen -const messy = "\t\n Hallo \n\t"; -console.log(messy.trim()); // "Hallo" - -// Leerzeichen in der Mitte bleiben -const text2 = "Hallo Welt"; -console.log(text2.trim()); // "Hallo Welt" (Mitte unverändert) -``` - -**Wichtig**: `trim()` entfernt nur am **Anfang** und **Ende**, nicht in der Mitte! - -**Verwandte Methoden**: -```javascript -const text = " Hallo "; - -// trim() – beide Seiten -console.log(text.trim()); // "Hallo" - -// trimStart() oder trimLeft() – nur Anfang -console.log(text.trimStart()); // "Hallo " - -// trimEnd() oder trimRight() – nur Ende -console.log(text.trimEnd()); // " Hallo" -``` - ---- - -## 11. `charAt(index)` - -Gibt das Zeichen an einer bestimmten **Position** zurück. Wenn Index ungültig, leerer String `""`. - -```javascript -const text = "Hallo"; -// 01234 - -console.log(text.charAt(0)); // "H" -console.log(text.charAt(1)); // "a" -console.log(text.charAt(4)); // "o" -console.log(text.charAt(10)); // "" (zu weit, leerer String) -console.log(text.charAt(-1)); // "" (negative Index erlaubt nicht) -``` - -**Alternativ: Bracket-Notation** (einfacher): -```javascript -const text = "Hallo"; - -console.log(text[0]); // "H" -console.log(text[4]); // "o" -console.log(text[10]); // undefined (anders als charAt!) -``` - -**Unterschied**: -- `charAt(index)` → gibt `""` zurück bei ungültigem Index -- `text[index]` → gibt `undefined` zurück bei ungültigem Index - ---- - -## Vergleich und Zusammenfassung - -| Methode | Zweck | Rückgabewert | -|---------|-------|------------| -| `length` | Zeichenanzahl | Zahl | -| `indexOf()` | Erste Position eines Substrings | Index oder -1 | -| `lastIndexOf()` | Letzte Position eines Substrings | Index oder -1 | -| `search()` | Position eines Regex-Matches | Index oder -1 | -| `slice()` | Extrahiert Teil (Anfang bis Ende, exklusiv) | Neuer String | -| `substring()` | Wie slice, aber ohne negative Indizes | Neuer String | -| `substr()` | Extrahiert Teil (Position + Länge) | Neuer String (**veraltet!**) | -| `replace()` | Ersetzt erstes Vorkommen | Neuer String | -| `toUpperCase()` | In Großbuchstaben | Neuer String | -| `toLowerCase()` | In Kleinbuchstaben | Neuer String | -| `concat()` | Verbindet Strings | Neuer String | -| `trim()` | Entfernt äußere Whitespaces | Neuer String | -| `charAt()` | Zeichen an Position | Einzelnes Zeichen oder `""` | - ---- - -## Praktische Beispiele - -### Validierung einer E-Mail -```javascript -const email = " user@example.com "; -const cleaned = email.trim().toLowerCase(); - -if(cleaned.indexOf("@") > 0 && cleaned.indexOf(".") > cleaned.indexOf("@")){ - console.log("Gültige E-Mail"); -} else { - console.log("Ungültige E-Mail"); -} -``` - -### Dateiname aus Pfad extrahieren -```javascript -const path = "C:/Users/max/dokumente/file.txt"; - -// Letzten Schrägstrich finden -const lastSlash = path.lastIndexOf("/"); -const filename = path.slice(lastSlash + 1); - -console.log(filename); // "file.txt" -``` - -### URL-Parameter bereinigen -```javascript -const url = "https://example.com?id=123&name= Max "; - -if(url.indexOf("?") > -1){ - const params = url.slice(url.indexOf("?") + 1); - console.log(params); // "id=123&name= Max " -} -``` - -### Text durchsuchen (Regex) -```javascript -const text = "Kontakt: info@example.com oder 089-1234567"; - -// E-Mail finden -if(text.search(/@/) > -1){ - console.log("E-Mail vorhanden"); -} - -// Telefonnummer finden -if(text.search(/\d{3}-\d{4}/) > -1){ - console.log("Telefon vorhanden"); -} -``` - ---- - -## Häufige Fehler - -### ❌ Falscher Fehler 1: `replace()` ersetzt alle -```javascript -const text = "aaa"; -console.log(text.replace("a", "b")); // "baa" – nur erstes! -``` -**Korrekt**: -```javascript -console.log(text.replace(/a/g, "b")); // "bbb" -``` - -### ❌ Falscher Fehler 2: `length` ist keine Methode -```javascript -const text = "Hallo"; -console.log(text.length()); // TypeError! -``` -**Korrekt**: -```javascript -console.log(text.length); // 5 -``` - -### ❌ Falscher Fehler 3: Original wird nicht verändert -```javascript -let text = "hallo"; -text.toUpperCase(); -console.log(text); // "hallo" – immer noch klein! -``` -**Korrekt**: -```javascript -let text = "hallo"; -text = text.toUpperCase(); -console.log(text); // "HALLO" -``` - -### ❌ Falscher Fehler 4: `substr()` verwenden (veraltet) -```javascript -// Besser nicht: -const text = "Hello"; -console.log(text.substr(0, 3)); // "Hel" - -// Stattdessen: -console.log(text.slice(0, 3)); // "Hel" -``` - ---- - -## Zusammenfassung für die Praxis - -1. **Länge prüfen**: `length` -2. **Position suchen**: `indexOf()` oder `lastIndexOf()` (einfach), `search()` (Regex) -3. **Substring extrahieren**: `slice()` (mit negativen Indizes), `substring()` (ohne) -4. **Ersetzen**: `replace()` mit `g` Flag für alle -5. **Groß-/Kleinschreibung**: `toUpperCase()`, `toLowerCase()` -6. **Verbinden**: `+` oder Template Literals (nicht `concat()`) -7. **Bereinigen**: `trim()` für äußere Whitespaces -8. **Einzelnes Zeichen**: `charAt()` oder `[index]` - -**Wichtigste Regel**: Strings sind unveränderlich! Alle Methoden geben einen **neuen String** zurück. diff --git a/index.html b/index.html index 0cea06e..6ae109d 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,17 @@
+ +