463 lines
12 KiB
Markdown
463 lines
12 KiB
Markdown
# 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.
|