Distinction Between substr() and substring() in JavaScript

Introduction

On the earth of JavaScript, there are many methods to govern strings as JS gives many strategies to take action. Two of these strategies are substr() and substring(). At first look, they may appear similar – each are used to extract elements of a string. Nonetheless, they’ve refined variations in the best way they work. This Byte goals to make clear these two strategies, their variations, and when to make use of every.

substr()

The substr() technique in JavaScript is used to extract elements of a string, ranging from the index specified and lengthening for a given variety of characters afterwards. Its syntax is as follows:

string.substr(startIndex, size)

The startIndex parameter is required and specifies the place to start out the substring to be extracted. The size parameter is optionally available and specifies the variety of characters to extract. If size just isn’t offered, characters might be extracted to the top of the string.

Here is an instance:

let textual content = "Hey, World!";
let outcome = textual content.substr(7, 5);
console.log(outcome); // Outputs: "World"

On this instance, substr() begins on the index 7 of the string and returns 5 characters, leading to “World”.

Be aware: substr() does assist destructive indexing. So if startIndex is a destructive quantity, it counts from the top of the string.

substring()

The substring() technique, alternatively, additionally extracts characters from a string between two indices. Its syntax is as follows:

string.substring(indexStart, indexEnd)

Each indexStart and indexEnd parameters are optionally available. If indexEnd just isn’t given, characters might be extracted to the top of the string, similar to with substr().

Here is an instance:

let textual content = "Hey, World!";
let outcome = textual content.substring(7, 12);
console.log(outcome); // Outputs: "World"

On this instance, substring() begins at index 7 and ends at index 12, which returns “World”.

Evaluating substr() and substring()

Though each substr() and substring() are used for extracting elements of a string, they do have their variations, largely in how their parameters work.

The second parameter in substr() is the variety of characters to extract, whereas in substring(), it’s the index the place to cease the extraction.

Additionally, substr() can settle for a destructive begin index, which is counted from the top of the string. Nonetheless, substring() doesn’t assist destructive indices. If a destructive or NaN is handed, it is going to be handled as if it had been a 0.

Here is a code snippet demonstrating these variations:

let textual content = "Hey, World!";

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

let substringResult = textual content.substring(-6, 5);
console.log(substringResult); // Outputs: "Hey"

You may see that substr() treats the destructive begin index as a place from the top of the string and returns “World”, whereas substring() treats the destructive index as 0 and returns “Hey”.

When to Use Every

I ought to begin off by saying that the substr() technique is deprecated, so by default it is best to use the substring() technique as a substitute. Nonetheless, it is nonetheless supported in main browsers, so it may possibly nonetheless be used if wanted, however I do not suggest it.

The substr() technique is nice for once you need to extract a string from the top. As an example, if you wish to retrieve the final 4 characters of a string, substr() is your go-to technique because it helps destructive indexing.

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

On this case, we’re passing a destructive worth to substr(), which begins counting from the top of the string. The output might be “rld!”.

However, substring() could also be higher when you’re coping with indexes as a substitute of lengths. If the beginning and finish indexes of the substring you need, substring() stands out as the more sensible choice.

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

On this case, we’re passing the beginning and finish indexes to substring(). The output might be “World”.

Conclusion

On this Byte we in contrast the string manipulation strategies substr() and substring(). Each strategies have their very own strengths and use-cases. substr() is often higher when coping with lengths, particularly from the top of strings, whereas substring() is extra intuitive when working with identified indexes. Though, notice that substr() is technically deprecated, so substring() needs to be most popular.