JavaScript from Kent
4 common ways to get a substring from a string in JavaScript
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.
[00:00] 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.
[00:14] We have the expect library from npm loaded onto the page to do our assertions. We also have this handy gif.
[00:20] 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 0and 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.
[00:47] 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 0and a length of 4.
[01:03] 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.
[01:16] 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.
[01:38] Also with substring, if either argument is negative or not a number, it will be treated as 0We 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.
[01:57] 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.
[02:19] 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.
[02:29] There you are. Four different ways to substring a string in Javascript using the built-in functions substring, substr, slice, and split plus join.