JavaScript String substring() method – How it works

What is the substring() method in JavaScript?

substring() method is one of the inbuilt methods of the JavaScript String which is basically used to return the part of the String on the basis of provided start and end index and results in a new String.

substring() method

1. Extracts characters between the given indices (start to end or in between any two indexes) and returns the new String
2. Doesn’t change the original String.

Syntax

string.substring(start);
string.substring(start, end);
Code language: JavaScript (javascript)

Let’s look into the Parameters of the substring() method now

start:- It is the starting index of the string which denotes the first character from where it should start fetching the string. It is the required value in the method.

end:- It is the ending index of the string which denotes the position up to which you need to extract the string. The character of the end index is not included. It is completely optional whether you want to include the end index or not.

What will be the Return Value?

It will return a new String which will be the extracted part of the original string

⏲ for some Hands-On ?‍?

Example 1 (start and end as args in substring() & start < end)

<p>&lt;script></p>
<p>var name = "Aman Chopra";</p>
<p>console.log(name.substring(0, 4));</p>
<p>&lt;/script></p>
Code language: HTML, XML (xml)

Output

Aman

In this example, we have given both start and end index values i.e (0, 4) and thus it is extracting a string from the original string and returning the value of indexes 0, 1, 2, and 3.

Example 2 (start and end as args in substring() & start > end)

<p>&lt;script></p><p>var name = "Aman Chopra";</p>
<p>console.log(name.substring(4, 0));</p>
<p>&lt;/script</p>
Code language: HTML, XML (xml)

Output

Aman

In this example start index is greater than the end index, hence swapped the values and return the extracted string as (0, 4) i.e. “Aman”.

Example 3 (only start index as args in substring() )

<p>&lt;script></p>
<p>var name = "Aman Chopra";</p>
<p>console.log(name.substring(5));</p>
<p>&lt;/script></p>
Code language: HTML, XML (xml)

Output

Chopra

In this example, we have provided only the start index and then it has extracted the whole string after the start value since no end index is being provided.

Example 4 (only start index as args with a negative value in substring() )

<p>&lt;script></p><p>var name = "Aman Chopra";</p>
<p>console.log(name.substring(-5));</p>
<p>&lt;/script></p>
Code language: HTML, XML (xml)

Output

Aman Chopra

In this example, we have given the -ve value in the arguments and thus it will return the whole string.

Example 5 (when taken string length as args in substring() )

<p>&lt;script></p>
<p>var name = "Aman Chopra";</p>
<p>console.log(name.substring(name.length - 6));</p>
<p>&lt;/script></p>
Code language: HTML, XML (xml)

Output

Chopra

In this example, we have taken the argument as (string length – value); first, it is counting the value of the whole string then subtracting the given value and from that index only it is returning the new string.

The code above explained serves as an explanation for different situations one can use the substring method.

Conclusion

The substring() method extracts the substring from the original string and returns it as per the passed start and index (optional) value as the parameters in the method.