How substring method works on a JavaScript String

This video covers how can you extract a portion of a string using substring() method in JavaScript and what are the caveats with its usage with code examples.

Code

let fruits = 'Banana,Strawberry,Apple,Peach';

//Length of fruits
let length = fruits.length;
console.log('Length of fruits: ', length);

//Without endIndex (default endIndex = length - 1)
console.log('Without endIndex => ', fruits.substring(2));

//startIndex and endIndex are same (returns empty string)
console.log('Same startIndex & endIndex => ',fruits.substring(3,3));

//index > length of the string (returns the length of the string)
console.log('startIndex > length => ',fruits.substring(length+1));
console.log('endIndex > length => ',fruits.substring(1,length+2));

//startIndex > endIndex (indexes are swapped)
console.log('startIndex > endIndex => ',fruits.substring(10, 2));

//startIndex || endIndex === NaN (index is treated as 0)
//startIndex || endIndex < 0 (index is treated as 0)
console.log('Invalid indexes => ',fruits.substring(-1));
console.log('Invalid indexes => ',fruits.substring(NaN));

Full Transcript

0:00 Hi there. Welcome to another video on JavaScript series and I'm Deeksha Sharma from bonsaiilabs. Today's video will cover how you can extract a portion of a string using substring method in JavaScript. Let's say we have a variable fruits which contains the string with fruit names that are comma separated. Now we want to know if there is a way to extract just the Apple, Peach substring from the given fruit string and we can do that using substring method available on JavaScript string. This method takes two arguments, a startIndex to indicate where to start extracting the substring and an endIndex to indicate when to stop extracting. The endIndex is never included so we need to be a bit careful. Also, endIndex is optional so when it's not provided it extracts till the end of the string. Here is the usage of substring with just the startIndex 18 and it returns Apple,Peach from the fruit string.

0:52 Let's try out some examples on the editor to see what are the things you should be aware of when using substring method. We will be using the same variable fruits which contains the comma separated fruit names inside a string. First, let's just calculate and print the length of the string. This piece of code will help us using the length instead of hard-coded index for certain use cases. We will run this code and we got the length. Next, we will try out a use case where we don't provide the endIndex when using substring. You will see that it'll return the entire string from startIndex to the end. In this example, we just provided the startIndex 2, and let's run it now. There you go. It extracted and returned the string starting from the second character till the end. So make sure when you're omitting the endIndex, this will be your outcome.

1:41 Let's move onto our next code example. What happens when we use the same start and endIndex when using substring method. It returns an empty string. Do you know why? That's because the endIndex is never included while extracting a substring. And since we give the same start and endIndex, it returned nothing but an empty string. So make sure you check the indexes when using this method. Now what if by mistake, we give the startIndex or endIndex that is greater than the length of the string itself. It is going to return a string up to its length. Let's try out this example without an endIndex and startIndex's length plus one. We will run this and it returned an empty string. That's because it started finding the string starting index 30 and the entire string length is 29 so we have this result.

2:30 Now let's try out another piece of code where startIndex is within the range, but endIndex is beyond the length of the string. We run this code and it returns string starting from index one till the end. So if we give an out of range endIndex, it extracts till the end of the string. So these are some of the scenarios where substring could possibly return strange results, and we must know why that happens. I've added the link for the documentation of this method in the description, and I hope this was helpful for you guys. So thanks for watching and be sure to subscribe if you haven't already. Until then, my friends keep learning and share your knowledge.