This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

4 common ways to get a substring from a string in JavaScript

2:38 JavaScript lesson by

There are four common ways to get a substring from a string in JavaScript, substring, substr, slice, and split + join. In this lesson you'll learn what the API to each of these methods is and how they compare.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

There are four common ways to get a substring from a string in JavaScript, substring, substr, slice, and split + join. In this lesson you'll learn what the API to each of these methods is and how they compare.

Avatar
press0

Great demo. JsBin auto-complete looks very useful. For example, function substring() parameters automatically popup as you type. How did you enable auto-complete in JsBin ?
Thanks

In reply to egghead.io
Avatar
Kent C.

I tweeted my answer :-) https://twitter.com/kentcdodds/status/681327223278702592

Protip, turn on Tern.js in JSBin settings for some helpful autocomplete and intellisense :-)

In reply to press0

There's several ways to substring a string in Javascript. We're going to turn "The quick brown fox jumps over the lazy dog" into "The fox jumps over dog" by getting rid of "quick", "brown", and "the lazy" from this phrase.

We have the expect library from npm loaded onto the page to do our assertions. We also have this handy gif.

Let's start with substring. The API accepts a start index and an end index. To get "the " with a space, we'll start at 0 and end at 4. For the next section, we'll start with index 16 and go to index 31. That will leave us with "fox jumps over". For the final section, we'll start with index 40 and we can omit the second argument, which will default to the length of the strength. That gets our test passing.

Now with substr, the API accepts a start index, just like substring, but the second argument is the length of the resulting substring. For the word "the " with a space, it's actually just like substring with a starting index of 0 and a length of 4.

Then for the middle bit, we'll start at index 16 and have a length of 15 characters. To wrap this one up, we'll start at index 40, and we'll omit the second argument, which will default to the length of the string, just like substring.

For slice, it's actually very much like substring, so we can pretty much just copy paste and get the same results. There are a few interesting differences between slice and substring. One interesting or odd behavior with substring is if you provide a larger start index than end index, substring will swap them for you. If you do this with slice, it will return an empty string.

Also with substring, if either argument is negative or not a number, it will be treated as 0. We see the entire string where "dog" should be in this case. However, in the slice scenario, if we say -4, it will actually do the last four characters in the string. So, we can put -3 and get our test passing.

Finally, we can call split with a space character, and this will create an array of all the words in our input. From there, we can treat that array as a normal array. For our contrived example, we'll write a simple filter function. To turn this back into a string, we'll simply call join on the array, and we'll join these words back into a single string separated by spaces.

This is obviously a contrived example, but the point is once you get your string turned into an array, you have all the power of arrays to manipulate the string.

There you are. Four different ways to substring a string in Javascript using the built-in functions substring, substr, slice, and split plus join.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?