bibbank/STRING_METHODS_NOTES.md

JavaScript String-Methoden und -Eigenschaften – Notizen

1. length (Eigenschaft)

Gibt die Anzahl der Zeichen in einem String zurück.

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.

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.

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.

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).

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

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).

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.

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)

const result = "abc abc".replace(/abc/g, "xyz");
console.log(result); // "xyz xyz"

---

8. toUpperCase() und toLowerCase()

Wandelt String in GROSSBUCHSTABEN oder kleinbuchstaben um.

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!

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.

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:

const text = "Hallo" + " " + "Welt";  // "Hallo Welt"
const text2 = "Hallo".concat(" ", "Welt"); // "Hallo Welt"

Besser: In der Praxis ist der + Operator oder Template Literals üblicher:

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.

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:

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 "".

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):

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

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

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

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)

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

const text = "aaa";
console.log(text.replace("a", "b")); // "baa" – nur erstes!

Korrekt:

console.log(text.replace(/a/g, "b")); // "bbb"

❌ Falscher Fehler 2: length ist keine Methode

const text = "Hallo";
console.log(text.length()); // TypeError!

Korrekt:

console.log(text.length); // 5

❌ Falscher Fehler 3: Original wird nicht verändert

let text = "hallo";
text.toUpperCase();
console.log(text); // "hallo" – immer noch klein!

Korrekt:

let text = "hallo";
text = text.toUpperCase();
console.log(text); // "HALLO"

❌ Falscher Fehler 4: substr() verwenden (veraltet)

// 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.