What’s the Difference Between Slice, Substring, and Substr in Javascript?

Tremaine Eto
Oct 26, 2020 · 5 min read
Original photo by NESA by Makers on Unsplash; illustration by Tremaine Eto

If you’re trying to manipulate strings in Javascript, then you’ll most likely be using — or at the very least, considering — using the built in string manipulation functions.

Among these areslice(), substring(), and substr(), and what can be confusing is the fact that all are somewhat similar in functionality. The natural question thus arises: what exactly is different about these? Are they pretty much interchangeable? At the end of the article, you will ideally know the answer.

A note about substr()

First of all, substr() is considered deprecated and thus not suitable for use in new websites. That simplifies things, doesn’t it? However, you might be finding its usage in legacy code or something, so I think it’s still somewhat valuable to be aware of what it does.

I certainly would not dedicate too much headspace to it, though.

Input parameters: how to call them

slice()

start is an integer where you choose the index of the character you want to start slicing from. end is an integer where you choose the index of the character you want to end the slicing at.

substring()

You’ll notice that the parameters here are exactly the same as in slice(). This is absolutely right; they’re called the same, and they achieve the same results. To reiterate, start is an integer where you choose the index of the character you want to start the substring from. end is an integer where you choose the index of the character you want to end the substring at.

substr()

substr() is slightly different; start is still the same parameter as with the previous two methods in that it’s the index of the string where you want to start the substring from. However, the second argument is not the index of the string where you want the substring to end. Rather, it’s a length that counts the characters until your desired end point.

For example, if you specify 3 for the second parameter, it will count three characters from the specified index in the first parameter.

In a nutshell

Parameter-wise, slice() and substring() are the exact same. substr() is unique in that the second parameter is not the end index number.

Input parameters: the order you put them in

An interesting difference between the functions is the different functionalities depending on the order that you put the input parameters in.

slice()

If start is greater than end, you may be confused as to what happens because it doesn’t really make sense to have a starting index after the ending index. With slice(), you’re correct here; the function won’t perform, and it will actually return the empty string ("").

substring()

If start is greater than end, substring() actually has special logic where it automatically switches the values. Essentially, the below calls would yield the exact same results — in other words, do the exact same thing.

Both lines 3 and 4 return bo.

Now that I think about it, this might somehow make a good little bet with a programmer friend, because naturally, it’s hard to imagine these end up the same.

substr()

The order here certainly matters in that the second argument isn’t end; rather, it’s the length or the amount of characters you want to navigate after the index you specify as the first parameter. Thus, you shouldn’t mix the two, and there’s no fundamental or logical issue if the first parameter is greater than the second one.

Input parameters: using only one argument

Good news: if you omit the second argument — and that means only providing one input parameter — then that means all three functions do the exact same thing.

What they all do is get a substring starting from the index in the provided argument. That means for all three of these in the example above, the return result is end.

Input parameters: negative arguments

slice()

start or end are allowed to be negative, but what happens when you do that? Let’s say start is -3 and end is -1.

When the arguments are negative with slice(), you count from the back (the end) of the string. So in this case, you count three characters from the back (note that it does not mean you inverse the negative and start at the index of 3) for the start of the slice, and you count one character from the back for the end of the slice.

So for the start of -3, let’s count three characters back. That would mean we go past t, go past o, and then go past r and stop there. We’re on r now for the start.

For the end, we go past t.

We now have the start at r and the end at o.

Your return string is thus ro.

substring()

Negative arguments are different than for slice(). Actually, negative arguments immediately resolve to 0. Thus, if you have start as -3 and end as -1, then it’s the same as having them both as 0.

In other words, it doesn’t actually work, and your return string is "" in this case.

If only one argument is negative, then only that argument turns into 0. The other one remains its positive value.

For substring(), just basically don’t use negative values, unless you want to write some confusing code.

substr()

First of all, if the second argument (length in the above example) is negative, then the function simply does not work. The return value will be an empty string (""). This makes sense logically because a negative length is nonsensical.

The first argument can be negative, and it basically means you start counting from the back of the string, just like for slice().

Thus, if you have start as -3 and length as 2 , then we start three characters from the back (at the second a) and then literally count two characters — but to the right. It’s important to know that the function still does what it’s designed to do, and that’s to get the substring to the right.

A negative number in the first argument doesn’t suddenly make the function go backwards to get a substring. It just tells Javascript where to start.

Thus, the output will be al.

The Startup

Get smarter at building your thing. Join The Startup’s +792K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Tremaine Eto

Written by

Full-time software engineer since 2016. UCLA Computer Science B.S. with Atmospheric and Oceanic Sciences minor, class of ‘16.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.

Tremaine Eto

Written by

Full-time software engineer since 2016. UCLA Computer Science B.S. with Atmospheric and Oceanic Sciences minor, class of ‘16.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +792K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store