Confusing JavaScript: substring and substr

In this article, I shall talk about two pretty useful functions related to String library in JavaScript named substring and substr, but both of these functions, due to the manifestation of their name, cause confusion amongst the programmers. Therefore, I have decided to share my two bits about these functions as well to make things clear.

Without further ado, let us discuss them one by one.

substring

First, why not read the official document about the working of substring? According to the official reference documentation of JavaScript, substring is:

The method that returns the part of the string between the start and end indexes, or to the end of the string.

Syntax

str.substring(indexStart[, indexEnd])

Parameters

indexStart

The index of the first character to include in the returned substring.

indexEnd

Optional. The index of the first character to exclude from the returned substring.

Return value

A new string containing the specified part of the given string.

Examples

Case 1: With One Argument

With one argument passed to substring, we get the string starting from the specified index until the end of the string:

const string= 'JavaScript';

const newString= string.substring(2);

console.log(newString); 
// Output -> "vaScript"

Case 2: With Two Argument

With two arguments passed to the substring function, we will get a subset of the string from the starting index to the end index:

 const string= 'JavaScript';
    
 const newString= string.substring(0,3);
    
 console.log(newString); 
 // Output -> "Jav"

substr

First, why not read the official document about the working of substr? According to the official reference documentation of JavaScript, substr is:

The method that returns the part of a string between the start index and a number of characters after it.

Syntax

str.substr(start[, length])

Parameters

start

The index of the first character to include in the returned substring.

length

Optional. The number of characters to extract.

Return value

A new string containing the specified part of the given string.

Examples

Case 1: With Two Arguments

Here we want a 2-character string from a starting index of 2:

const string= 'JavaScript';
        
const newString= string.substring(2,2);
        
console.log(newString); 
// Output -> "va"

Case 2: With Negative Argument

The argument to substr can be a negative number. In this case the start of the returned string is counted from the end of the string.

const string= 'JavaScript';
        
const newString= string.substring(-4);
        
console.log(newString); 
// Output -> "ript"

Special Case: No Difference Between substring and substr

When the is only one argument, and that too is a positive number, In that case, substring and _substr_return the same value:

const string= 'JavaScript';

const newString= string.substring(2);
const newStrString= string.substr(2);

console.log(newString); 
console.log(newStrString); 
// Output -> "vaScript"
// Output -> "vaScript"

Summary

In this article, I have discussed substring and substr functions of the String class of JavaScript with many cases and examples. There is one special case in which both substring and substr behave alike. I hope the concept is now clear! That's it for this article!

AUTHOR

READ NEXT

Boostlog is an online community for developers
who want to share ideas and grow each other.

Delete an article

Deleted articles are gone forever. Are you sure?