What is the Difference Between Substr and Substring in JavaScript

JavaScript is one of the most widely-used programming languages in the world, and it’s often used for web development.

One of the key functions in JavaScript is the ability to extract a portion of a string, which is known as “substring”.

In JavaScript, there are two methods to extract substrings: substr and substring.

Both of these methods have different syntaxes and return different results.

In this Javascript tutorial, we’ll dive into the differences between substr and substring in JavaScript, and provide code examples to help illustrate the concepts.

What is Substring in JavaScript?

The substring method in JavaScript is used to extract a portion of a string.

The syntax for the substring method is as follows:

string.substring(startIndex, endIndex)

The startIndex argument specifies the index of the first character that you want to include in the extracted string, while the endIndex argument specifies the index of the first character that you want to exclude from the extracted string.

For example, consider the following string:

var str = "Hello, World!";

If you wanted to extract the portion of the string that says “Hello”, you could use the following code:

var subStr = str.substring(0, 5);

The result would be:

"Hello"

What is Substr in JavaScript?

The substr method in JavaScript is also used to extract a portion of a string, but it has a slightly different syntax compared to the substring method.

The syntax for the substr method is as follows:

string.substr(startIndex, length)

The startIndex argument specifies the index of the first character that you want to include in the extracted string, while the length argument specifies the number of characters that you want to include in the extracted string.

For example, consider the following string:

var str = "Hello, World!";

If you wanted to extract the portion of the string that says “Hello”, you could use the following code:

var subStr = str.substr(0, 5);

The result would be:

"Hello"

Differences between Substr and Substring in JavaScript

There are several key differences between substr and substring in JavaScript. Some of the most important differences are listed below:

Syntax: The syntax for substr and substring is different. Substring requires two arguments (startIndex and endIndex), while substr requires two arguments (startIndex and length).
End Index: The endIndex argument in substring specifies the index of the first character that you want to exclude from the extracted string, while the length argument in substr specifies the number of characters that you want to include in the extracted string.
Negative Index: If you use a negative index as the startIndex argument in substr, it will count backwards from the end of the string. If you use a negative index as the startIndex argument in substring, it will be treated as 0.
Extracting from End of String: If you use a negative value for the startIndex argument in substr, it will extract the substring from the end of the string. With substring, you cannot extract a substring from the end of the string using a negative value for the startIndex argument.
Return Value: The return value for substr and substring can be different, depending on the arguments that you use. For example, if you use an endIndex that is less than the startIndex in substring, the method will automatically switch the two arguments. With substr, if you use a length argument that is greater than the length of the string, it will return the entire string starting from the startIndex.

Comparing Substr and Substring

Here is an example that compares the use of substr and substring in JavaScript:

var str = "Hello, World!";
// Using substring to extract a portion of the string var subStr1 = str.substring(0, 5); console.log(subStr1); // Output: "Hello"

// Using substr to extract a portion of the string var subStr2 = str.substr(0, 5); console.log(subStr2); // Output: "Hello"

In this example, both substr and substring are used to extract the portion of the string that says “Hello”.

As you can see, the output is the same for both methods.