Difference between SubStr vs SubString function in JavaScript - Tutorial Example

Hello guys, if you are wondering what is difference between SubStr() and SubString() function in JavaScript then you have come to the right place. JavaScript provides two similar-looking String manipulation functions, substr and substring, though both are used to get a substring from a String, there is a subtle difference between substring and substr method in JavaScript. If you look at their signature, both substr(to, length) and substring(to, from) both take two parameters, but substr takes the length of the substring to be returned, while substring takes end index (excluding) for substring. This main difference will be more clear when we will see a couple of examples of using substr and substring in JavaScript code.

By the way, this is also a popular JavaScript question and frequently asked web developers during HTML, CSS, and JavaScript interviews, along with how to prevent multiple submissions of form data, and difference between == vs === and difference between var, let, and const keyword in JavaScript. I have discussed them before, if you haven't read them you can also check them. 

Because of the extensive uses of String, this knowledge is not only important from the interview point of view but also from a development point of view. It also helps to reduce subtle bugs in JavaScript code, which is introduced because of incorrect use of substr or substring method.

And, If you want to learn Modern JavaScript or level up your skills then I suggest you join these top JavaScript online courses. It's one of the best and hands-on resources to learn ES 6 and other new JavaScript features.

Difference between SubString and SubStr method in JavaScript

As I said in the first paragraph, the main difference between substring and substr JavaScript method is in there the second parameter, substring accept index of last character + 1, while substr() method gets expected length of the substring. Let's  take a look at following examples :

var str = "JavaScript";

alert(str.substring(0, 4));  // would print "Java"

Since JavaScript indexes are zero-based, In the above example starting index is zero (including), which is the first character, and the end index is 4 (excluding), so substring would be "Java". On the other hand, if we apply a similar argument to substr method, we will get the same result, but on different way.

var str = "JavaScript"

alert(str.substr(0, 4));  // this will also return "Java"

Though this code also returns Java, here logic is different, as here starting index is zero and the length of the substring is 4, which means four characters long string, which starts from the first character, that's why "Java". If we apply different arguments we will get different results e.g.

var str = "JavaScript"

alert(str.substr(4, 6)); // this will return Script

alert(str.substring(4, 6)); // this will return "Sc"

Here, you can clearly see that both substr and substring are returning different results because the starting index is not zero. Because of this many web developers often confuse and think that substr and substring behave identically, which is not true. 

You should be very careful while using substr() and substring(), otherwise it will create hard to find subtle bugs. There is another method called slice() which can also be used for creating smaller substring from String in JavaScript, and you can think of it to avoid any confusion between substring and substr in JavaScript.

That's all about the difference between substr and substring methods in JavaScript, just remembers that the difference is in the second argument. The second argument of the substring method takes the end index, which is excluded from the final substring, while the second argument of substr method takes the maximum length of the expected substring.

Other JavaScript articles and tutorials you may like

• My favorite free Courses to learn Angular and React
• My favorite books to learn React.js in depth
• Top 5 Websites to learn React.js for Beginners
• 5 Courses to learn Object-Oriented Programming for Free
• The React Developer RoadMap
• 5 Best courses to learn React Native in depth
• The 2021 Frontend and Backend Developer RoadMap
• 5 Courses to Learn Ruby and Rails for Free
• 10 Books and Courses to learn Angular
• 5 Free Docker Courses for Java and DevOps Engineer
• 5 Online training courses to learn Angular for Free
• 5 Free Courses to learn Kubernetes in depth
• 10 Courses to learn AWS for beginners
• 3 Books and Courses to Learn RESTful Web Services in Java

If you like these resources then pleas share with your friends and colleagues.