Difference between SubStr vs SubString method in JavaScript - Tutorial Example

JavaScript provides two similar looking String manipulation function, substr and substring, though both are used to get substring from an String, there is a subtle difference between substring and substr method in JavaScript. If you look at there signature, both substr(to, length) and substring(to, from) both takes two parameters, but substr takes length of substring to be returned, while substring takes end index (excluding) for substring.This main difference will be more clear when we will see couple of examples of using substr and substring in JavaScript code.


By the way this is also a good JavaScript question and frequently asked to web developers during HTML, CSS and JavaScript interviews, along with how to prevent multiple submission of form data. 

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

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 substring. Let's  take a look at following examples :

var str = "JavaScript";

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

Since JavaScript index are zero based, In above example starting index is zero (including), which is first character and end index is 4 (excluding), so substring would be "Java". On the other hand, if we apply similar argument to substr method, we will get 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, but here logic is different, as here starting index is zero and length of substring is 4, which means four characters long string, which starts from first character, that's why "Java". If we apply different argument we will get different result 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 the different results because the starting index is not zero. Because of this many web developers often confuse and they 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 method in JavaScript, just remember that difference is in the second argument. The second argument of substring method takes end index, which is excluded from final substring, while second argument of substr method takes maximum length of expected substring.

Further Learning
JavaScript Fundamentals by Liam McLennan
ES6 Javascript: The Complete Developer's Guide
JavaScript: Understanding the Weird Parts