Difference Between substr() and substring() in JavaScript

Introduction

In the world of JavaScript, there are lots of ways to manipulate strings as JS provides many methods to do so. Two of those methods are substr() and substring(). At first glance, they might seem identical - both are used to extract parts of a string. However, they have subtle differences in the way they work. This Byte aims to shed light on these two methods, their differences, and when to use each.

substr()

The substr() method in JavaScript is used to extract parts of a string, starting from the index specified and extending for a given number of characters afterwards. Its syntax is as follows:

string.substr(startIndex, length)

The startIndex parameter is required and specifies where to start the substring to be extracted. The length parameter is optional and specifies the number of characters to extract. If length is not provided, characters will be extracted to the end of the string.

Here's an example:

let text = "Hello, World!";
let result = text.substr(7, 5);
console.log(result); // Outputs: "World"

In this example, substr() starts at the index 7 of the string and returns 5 characters, resulting in "World".

Note: substr() does support negative indexing. So if startIndex is a negative number, it counts from the end of the string.

substring()

The substring() method, on the other hand, also extracts characters from a string between two indices. Its syntax is as follows:

string.substring(indexStart, indexEnd)

Both indexStart and indexEnd parameters are optional. If indexEnd is not given, characters will be extracted to the end of the string, just like with substr().

Here's an example:

let text = "Hello, World!";
let result = text.substring(7, 12);
console.log(result); // Outputs: "World"

In this example, substring() starts at index 7 and ends at index 12, which returns "World".

Comparing substr() and substring()

Although both substr() and substring() are used for extracting parts of a string, they do have their differences, mostly in how their parameters work.

The second parameter in substr() is the number of characters to extract, whereas in substring(), it is the index where to stop the extraction.

Also, substr() can accept a negative start index, which is counted from the end of the string. However, substring() does not support negative indices. If a negative or NaN is passed, it will be treated as if it were a 0.

Here's a code snippet demonstrating these differences:

let text = "Hello, World!";

let substrResult = text.substr(-6, 5);
console.log(substrResult); // Outputs: "World"

let substringResult = text.substring(-6, 5);
console.log(substringResult); // Outputs: "Hello"

You can see that substr() treats the negative start index as a position from the end of the string and returns "World", while substring() treats the negative index as 0 and returns "Hello".

When to Use Each

I should start off by saying that the substr() method is deprecated, so by default you should use the substring() method instead. However, it's still supported in major browsers, so it can still be used if needed, but I don't recommend it.

The substr() method is great for when you want to extract a string from the end. For instance, if you want to retrieve the last four characters of a string, substr() is your go-to method since it supports negative indexing.

let str = "Hello, World!";
let lastFour = str.substr(-4);  // "rld!"
console.log(lastFour);

In this case, we're passing a negative value to substr(), which starts counting from the end of the string. The output will be "rld!".

On the other hand, substring() may be better if you're dealing with indexes instead of lengths. If you know the start and end indexes of the substring you want, substring() may be the better choice.

let str = "Hello, World!";
let world = str.substring(7, 12);  // "World"
console.log(world);

In this case, we're passing the start and end indexes to substring(). The output will be "World".

Conclusion

In this Byte we compared the string manipulation methods substr() and substring(). Both methods have their own strengths and use-cases. substr() is typically better when dealing with lengths, especially from the end of strings, while substring() is more intuitive when working with known indexes. Although, note that substr() is technically deprecated, so substring() should be preferred.