Greetings All,

A programming language can’t be imagined without performing operations on strings. As we all know, the string is a special type of array including quite a new features.

Welcome back readers, this blog is a further continuation of my series of blogs i.e. “JavaScript Behaviour – Under the Hood”. Today, we are going to dig into dealing with sub-string in JavaScript. By finishing this blog you will found yourself as a master in sub-string concepts of JavaScript. You will also able to answer most tricky questions related to sub-string.

Let’s first go with basic definition with both methods.

substr(): This method returns a sub-string, beginning at the specified index (passed as the first argument) and to the specified length (passed as the second argument). The syntax is:

 mySting.substr(startIndex, length) 

Now, the second one:

substring(): This method also returns sub-string but with quite a bit different than earlier one. This returns sub-string between start index (passed as the first argument inclusive) and end index (passed as the second arguments exclusive). The syntax is quite similar.

 mySting.substring(startIndex, endIndex) 

At this stage, you might be thinking that a lot of theory is going on, which definitely not happens always on my blog. 🙂 🙂 . OK, no problem, let’s go to our favorite section i.e. code section.

I have given the possible explanation in the square bracket after output in my code section. Now, it’s time to go what is happening under the hood? 

I will explain the things in point which let you understand “How the things are exactly working?

A. substr(): Some tricky points are discussed as below. 

Point 1: if there is a negative number in the first parameter of substr() then it will be treated as (total_length_of_string – first_argument)

 mySting.substr(-10, 5) // -10 will be translated into 24-10 = 14 (here, 24 is total_length of mySting) 

Here, the output will be:  “rpose”. It gives 5 number of characters string from index number 14.

Point 2: If we are not passing the second argument or it is undefined then return a sub-string that will contain all characters from startIndex i.e. passed as the first argument.

Point 3: If the second argument is 0 or a negative number then an empty string (“”) will be returned.

Point 4: If any of the argument is NaN (not a number) then it will be converted to 0 (zero). Let’s see some examples:


B. substring(): Now it’s time to discuss tricky things about substring()

Point 1: If both arguments are equals then an empty string will be returned.

Point 2: If we are passing a negative number to any of the arguments then it will be treated as 0 (zero).

Point 3: If the first argument is greater than the second argument then arguments will be swapped.

Point 4: If the second argument is missing or passing as the undefined then whole string from the startIndex (passed as the first argument)  will be returned.

Point 5: If we are passing any of the arguments greater than total_length_of_string then it will be translated to total_length_of_string.

Point 6: Finally. if we are passing any argument as NaN then it will be converted into the 0 (zero). Let’s see examples:

Congratulation! you have finished the blog and now you can do more practice with more examples on your console.

Please encourage me by typing in the comment box if you are really enjoying this series of blog i.e. “JavaScript Behaviour – Under the Hood“. Any type of feedback will be appreciated and feel free to ask if any doubts are there.

Thanking you,

Hope to see you soon, until then Happy Learning.…….. 🙂 🙂