Substring nervt – manchmal.
Verspricht simplen String-Ausschnitt. Holt Zeichen zwischen Indizes. Gibt frischen String zurück. Keine Mutationen, Strings ändern sich eh nicht. Aber die Fallen! Entwickler stolpern täglich darüber, selbst nach zehn Jahren JS.
Dieses Juwel aus der Doku:
The substring() method extracts a portion of a string between a start index and an end index, returning the extracted part as a new string. The original string is never modified – strings in JavaScript are immutable.
Klingt simpel? Klar. Bis du Mist reinschickst.
Warum tauscht substring() deine Argumente?
Stell dir vor: “Hello, World!”.substring(5, 0). Erwartest Müll – oder Fehler. Fehlanzeige. Raus kommt “Hello”. Hat Argumente getauscht. Netter Babysitter, JS. Slice()? Macht leeren String draus. substr() (Ruhe in Frieden) kotzt bei Negativen.
Zu nachsichtig. Anfänger jubeln – kein Crash. Profis hassen’s – Vorhersagbarkeit zählt. Der Wahnsinn:
const str = "Hello, World!";
console.log(str.substring(5, 0)); // "Hello" — getauscht!
console.log(str.slice(5, 0)); // ""
console.log(str.substring(-3)); // Ganzer String — Negativ wird 0
NaN? Auch 0. Index über Länge? Bleibt bei .length. JS zuckt die Achseln: „Eh, du wirst’s danken.“ Tust du nicht.
Dieser Auto-Tausch? substring-Spezialität. Aus Netscape-Zeit, als Browser bei Laune abstürzten. Altlast – wir schleppen 90er-Jahre-Milde ins Jahr 2024.
Ein Absatz. Peng.
String-Indizes: nullbasiert, klar. “JavaScript”: J=0, a=1, …, t=9. substring(start, end) holt [start, end). End ausschließlich, wie array.slice oder for-Schleifen.
Lücken visualisieren:
|J|a|v|a|S|c|r|i|p|t| 0 1 2 3 4 5 6 7 8 9 10
substring(0,4): ^----^ “Java”. Länge? 4-0=4. Logisch.
Bei Negativen? Start=0. Kein Slice vom Ende. Dafür slice(-3). substring tut, als wär’s vom Anfang. Fies.
JavaScript substring() gegen slice(): Der ewige Streit
Slice ist der coole Bruder von substring. Meistert Negativzahlen. Kein Tausch. Strenger, vernünftiger. Vom Ende? slice(-5) sitzt. substring(-5)? Voller String.
const lang = "JavaScript";
console.log(lang.slice(0,4)); // "Java"
console.log(lang.slice(-6)); // "Script" — End-Slice-Zauber
console.log(lang.substring(-6)); // "JavaScript" — Fehlschlag
Warum substring? Altkram. Oder Tausch-Vergebung in Parsers. Modernes JS? Immer slice. substring fühlt sich an wie innerHTML statt textContent – funktioniert, aber wieso?
Performance? Vernachlässigbar. Beide O(n). Benchmarks: slice leicht vorn in Loops, aber wer slicet Milliarden? Mein heißer Take: substring lebt, weil Tutorials 2005-MDN kopieren. Echokammer. Wetten: In ES2030 killen String-Views beides. Keine Kopien mehr.
Praxis: URL-Hacks. Path.substring(1) killt führenden Slash. E-Mail-Parsing:
const email = "[email protected]";
const at = email.indexOf('@');
const user = email.substring(0, at); // "dev"
const domain = email.substring(at+1); // "example.com"
Praktisch. Aber indexOf floppt bei Fehlern? App kracht. Erst validieren, Kumpel.
Abschneiden: title.substring(0,50) + ‘…’. Geht – bis Multibyte-UTF-8. “😂”.length=1? Nee, 4 Bytes. substring zerhackt Emojis. Grapheme-Cluster oder Libs nutzen. JS-Strings: Codepoints, keine Zeichen. 2015 ruft – upgraden.
Typische Fallen. Off-by-one: substring(0, len) holt alles. len=string.length? Top. Vertippt? Halb. Tausch versteckt Bugs: substring(10,5) läuft wie (5,10). Maskierter Fehler.
TypeScript? string.substring(start?: number, end?: number): string. Lasch. Overloads für Safety.
function safeSub(str: string, start: number, end?: number): string {
const s = Math.max(0, start);
const e = end === undefined ? str.length : Math.max(0, end);
return str.substring(Math.min(s,e), Math.max(s,e));
}
Overkill? Jo. Aber substrings Chaos schreit danach.
Ist substring() wirklich überholt?
Nicht tot. Treibt Regex-Replaces, DOM-Text-Grabs. Aber slice gewinnt 90 Prozent. Substr? Deprecated 2013 – meiden.
Fallenparade: NaN-Eingaben → voller S
