What's the scoop on String.slice vs String.substring?

javascript

string-methods

negative-parameters

substring-vs-slice

byAlex Kataev·Mar 12, 2025

Anchor your focus here first, 🎯: String.slice() is friendly with negative indexes making them start from the end, while String.substring() finds negatives quite unpalatable and converts them to 0. Enter slice, when end flips and becomes less than start, it hands out an empty string; but substring does you a favor and swaps start and end to keep the party going.

let text = "Mozilla";

// slice playing with negative index, more fun!
console.log(text.slice(-5)); // "zilla", Godzilla's cousin

// substring finds negative as yucky! Changes it to 0
console.log(text.substring(-5)); // "Mozilla", Like nothing ever happened

// substring swaps start and end, because why not?
console.log(text.substring(5, 2)); // "zil", It's a magic! 

// slice with end < start
console.log(text.slice(5, 2)); // "", Oopsie-daisy!

Taming the beast: Negative and Out-of-range parameters

Negative parameters: The different tastes

While String.slice(start, end) and String.substring(start, end) may look alike, their tastes differ when served negative values. If index goes on a vacation and is out of range, both will call upon the string's length to fill in:

slice treats a negative start as the tail of the chute, following the end of the string into the abyss. For a negative end index, it's a hop, skip and jump to string's length minus that naughty absolute index.
substring plays safe and treats negative or NaN parameters as 0. If it finds the start index to be larger than stop index, it just flips over the two.

Out-of-range parameters: The common stand

Whether you are a slice patron or a substring loyalist, if you want to ncmpress a segment right to the end of the string without specifying an end index, you're in luck. Both roll out the red carpet and default to slicing till the string's end.

A `substr` workaround

With substr() being shown the exit (Yes, it's deprecated), slice and substring are here to stay. Here's a replacement for substr using substring:

console.log(text.substring(2, 2 + 3)); // "zil", A 'len'-gthy workaround

Being mindful of your audience's browser makes quite a difference. slice seemingly is quite a modernist with negative parameters, trailing reluctantly only on IE8 and lower.

Taking charge: The finer approaches

Embracing negatives

Where you require the tail end, slice stands as your best bet:

let filename = "picture.jpg";
console.log(filename.slice(-4)); // ".jpg", file extension revealed!

Swapping salvation

slice would give you empty-handed if start is greater than end. Alternate route, substring, flips them to still offer some bounty:

let name = "John Doe";
console.log(name.substring(5, 2)); // "hn ", guess John wanted it that way!

The out-of-range savior

Incase you overshoot, both slice and substring won't leave you hanging. They rope in the string's length if an index goes too far:

let message = "Hello World";
console.log(message.slice(0, 50));       // "Hello World", This ain't Mars!
console.log(message.substring(0, 50));   // "Hello World", Keeps it real!

Picking the right tool

Your selection between slice and substring should hinge on the context. slice fares well with endings and substrings, especially from the rear. substring may hold ground where your parameters are more balanced and predictable.