Thursday, March 21, 2024

Distinction Between substr() and substring() in JavaScript

Must read


Introduction

On this planet 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 equivalent – each are used to extract components of a string. Nonetheless, they’ve refined variations in the way in which 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 components 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 begin the substring to be extracted. The size parameter is non-obligatory and specifies the variety of characters to extract. If size isn’t supplied, characters will likely be extracted to the top of the string.

This is an instance:

let textual content = "Hey, World!";
let end result = textual content.substr(7, 5);
console.log(end result); // 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 help unfavourable indexing. So if startIndex is a unfavourable quantity, it counts from the top of the string.

substring()

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

string.substring(indexStart, indexEnd)

Each indexStart and indexEnd parameters are non-obligatory. If indexEnd isn’t given, characters will likely be extracted to the top of the string, similar to with substr().

This is an instance:

let textual content = "Hey, World!";
let end result = textual content.substring(7, 12);
console.log(end result); // 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 components 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 unfavourable begin index, which is counted from the top of the string. Nonetheless, substring() doesn’t help unfavourable indices. If a unfavourable or NaN is handed, it is going to be handled as if it have been a 0.

This 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 unfavourable begin index as a place from the top of the string and returns “World”, whereas substring() treats the unfavourable 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’s best to use the substring() technique as an alternative. Nonetheless, it is nonetheless supported in main browsers, so it could possibly nonetheless be used if wanted, however I do not advocate it.

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

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

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

Alternatively, substring() could also be higher in case you’re coping with indexes as an alternative of lengths. If the beginning and finish indexes of the substring you need, substring() could be 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 will likely 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 usually higher when coping with lengths, particularly from the top of strings, whereas substring() is extra intuitive when working with identified indexes. Though, observe that substr() is technically deprecated, so substring() must be most well-liked.



Supply hyperlink

More articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest article