Thursday, January 26, 2023

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 coursesIt's one of the best and hands-on resources to learn ES 6 and other new JavaScript features.

Difference between SubStr vs SubString function in JavaScript - Tutorial Example




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"

Difference between SubStr vs Substring method in JavaScriptHere, 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


3 comments :

Unknown said...

Howdy great along with revealing post.Thanks for the purpose of posting this type of a fantastic post. Sensitive Word wide web Pattern allows for a persons to see sites through whatever show at a intuitive manner.With an upswing about cellular devices reactive website design began to enjoy a lot more natural part inside the model industry.


For more information about attorney general website and Website for 500, do check out my friend's website Website for 500. There's lots of useful information and he offers a complimentary service too!

Poetro said...

Don't use any of the two methods for your own sanity. Use slice as it does the same thing as on arrays, and you can give negative indices for both start and end. And you wont be confused by almost the same name.

Unknown said...

Good one

Post a Comment