Substring sucks—sometimes.
It promises a simple string slice. Grabs chars between indices. Returns a fresh string. No mutations, since strings don’t change anyway. But oh boy, the gotchas. Developers trip here daily, even after a decade slinging JS.
Take this beauty from the docs:
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.
Straightforward? Sure. Until you feed it bad inputs.
Why Does substring() Swap Your Arguments?
Picture this: “Hello, World!”.substring(5, 0). You’d expect garbage—or an error. Nope. It spits back “Hello”. Swapped the args for you. Nice nanny state, JS. But slice()? Clamps to empty string. substr() (RIP) barfs errors on negatives.
It’s forgiving. Too forgiving. Newbies love it—no crashes. Pros hate it—predictability matters. Here’s the mess:
const str = "Hello, World!";
console.log(str.substring(5, 0)); // "Hello" — swapped!
console.log(str.slice(5, 0)); // ""
console.log(str.substring(-3)); // Whole string — negatives become 0
And NaN? Also 0. Index past length? Caps at .length. It’s like JS saying, “Eh, you’ll thank me later.” You won’t.
This auto-swap? Unique to substring. Born in Netscape days, when browsers crashed on whims. Historical baggage—we’re lugging 1990s leniency into 2024.
One paragraph. Boom.
String indices: zero-based, obvious. “JavaScript”: J=0, a=1, …, t=9. substring(start, end) grabs [start, end). Exclusive end, like array.slice or for-loops.
Visualize gaps:
|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”. Length? 4-0=4. Duh.
But wander into negatives, and poof—start=0. No slicing from end. Want that? Use slice(-3). substring pretends you meant from beginning. Sneaky.
JavaScript substring() vs slice(): The Eternal Debate
Slice is substring’s cooler sibling. Handles negatives. No swapping. Stricter, saner. From end? slice(-5) nails it. substring(-5)? Full string.
const lang = "JavaScript";
console.log(lang.slice(0,4)); // "Java"
console.log(lang.slice(-6)); // "Script" — end-slice magic
console.log(lang.substring(-6)); // "JavaScript" — fail
Why use substring? Legacy code. Or that swap-forgiveness in parsers. But modern JS? Slice all day. substring feels like using innerHTML over textContent—works, but why?
Performance? Negligible. Both O(n). Benchmarks show slice edging ahead in loops, but who slices billions? My unique hot take: substring survives because tutorials copy-paste 2005 MDN. Echo chamber. Predict this—in ES2030, string views kill both. No more copies.
Real use: URL hacks. Path.substring(1) drops leading slash. Email parsing:
const email = "[email protected]";
const at = email.indexOf('@');
const user = email.substring(0, at); // "dev"
const domain = email.substring(at+1); // "example.com"
Handy. But indexOf fails on malformed? Crashes your app. Validate first, champ.
Truncation: title.substring(0,50) + ‘…’. Fine—until multibyte UTF-8. “😂”.length=1? Nope, 4 bytes. substring mangles emojis. Use grapheme clusters or libraries. JS strings: code points, not characters. 2015 called—upgrade.
Common traps. Off-by-one: substring(0, len) grabs all. But len=string.length? Good. Mistype? Partial. Swaps hide bugs: substring(10,5) works like (5,10). Masked error.
TypeScript? string.substring(start?: number, end?: number): string. Loose. Add overloads for 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? Yeah. But substring’s chaos begs it.
Is substring() Actually Obsolete?
Not dead. Powers regex replaces, DOM text grabs. But slice wins 90% cases. Substr? Deprecated 2013—avoid.
Pitfall parade: NaN inputs full-string. Great for defaults, hell for debugging. console.log(‘abc’.substring(NaN, 42)); // “abc”
Edge: empty string. “”.substring(0,5) => “”. substring(0) => “”.
Single char: str.substring(i,i+1) === str[i] === str.charAt(i). Pick charAt for intent.
In loops? Build arrays, join. Strings + = quadratic hell.
// Bad
let result = '';
for(...) result += sub;
// Good
const parts = [];
for(...) parts.push(sub);
result = parts.join('');
DevTools tip: Sources panel, watch substring calls. Profile ‘em.
Why quirks persist? Backward compat. Break billions of sites? No. My critique: TC39 sleeps on string ergonomics. Python slices [-3:]? Bliss. JS? Roll your own.
Bold call: By 2027, proposal for sane strings—views, graphemes native. Substring? Museum relic.
FAQ
What does JavaScript substring() do?
Extracts string portion from start to end index (exclusive). Swaps args if start > end, treats negatives/NaN as 0.
substring vs slice JavaScript
Slice handles negatives, no swaps. Substring forgiving but quirky—use slice for modern code.
JavaScript substring negative index
Treats as 0. No end-slicing—use slice(-n) instead.
