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 good JavaScript question and frequently asked web developers during HTML, CSS, and JavaScript interviews, along with how to prevent multiple submissions of form data.
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.
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 :
By the way, this is also a good JavaScript question and frequently asked web developers during HTML, CSS, and JavaScript interviews, along with how to prevent multiple submissions of form data.
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
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"

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.
3 comments :
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!
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.
Good one
Post a Comment