String.prototype.substr() vs String.prototype.substring()

#javascript #tutorial #beginners

String.prototype.substr()

This method extracts a portion of the given string from the specified index and returns the specified number of characters

Syntax:

str.substr(start, length)

let str = "The quick brown fox jumps over the lazy dog";

console.log(str.substr(4,7))
// OUTPUT: quick b

console.log(str.substr(4))
// OUTPUT: quick brown fox jumps over the lazy dog

Parameters:

start

The starting index from where the characters will be extracted in the given string

length(Optional)

The number of characters that will be extracted from starting index onward

Parameter values:

If start is negative, the new substring will be extracted from the end of the string.

console.log(str.substr(-8,6))      
// OUTPUT:lazy d

Here, start's value is equal to subtracting its absolute value(value without negative sign) from the length of the string

//start = str.length - start's absolute value
console.log(str.length)        //43
console.log(str.length-8)      //43-8=35
console.log(str.substr(35,6))  // OUTPUT:lazy d

If the length is negative, it will be treated as zero and will return an empty string.

console.log(str.substr(4,-7))  //length=0
// OUTPUT:

If the parameters are NaN they will be treated as zero .

The start will become zero and therefore extract characters from index zero.

console.log(str.substr(NaN,7))  //start=0
// OUTPUT:The qui

The length will become zero and return an empty string.

console.log(str.substr(4,NaN))     //length=0
// OUTPUT:

String.prototype.substring()

This method returns a portion of the string between specified indexes (excluding the end-index).

Syntax : str.substring(start, end)

console.log(str.substring(4))
// OUTPUT:quick brown fox jumps over the lazy dog

console.log(str.substring(4,13))
// OUTPUT:quick bro
console.log(str.indexOf('o'))
// OUTPUT:12   
//index of last character in substring is 12           
//This shows that the end-index(13) is excluded

Parameters:

start

The starting index from where the characters will be extracted in the given string

end(Optional)

The index(excluding) upto where the characters will be extracted

Parameter values:

If any parameter is NaN or negative it is treated as zero.
If start > end then they will be swapped .i.e start will become end and end will become start.

console.log(str.substring(NaN,10))  //start=0
// OUTPUT:


console.log(str.substring(4,NaN))     
//end=0, start=4  => start=0,end=4  
//start and end gets swapped since start becomes greater than end
// OUTPUT:The quick



console.log(str.substring(-5,15))    //start=0
// OUTPUT:The quick brown


console.log(str.substring(5,-15))     
//end=0, start=5  => start=0, end=5  
//start and end gets swapped since start becomes greater than end
// OUTPUT:The q

Top comments (3)

peerreynders • Oct 13 '21

Forget that String.prototype.substr() even exists.

It's not part of the of the official Properties of the String Prototype Object in the ECMAScript specification.

Since ECMAScript 3 (2000) it has been banished to the Additional ECMAScript Features for Web Browsers annex:

This annex describes various legacy features and other characteristics of web browser ECMAScript hosts. All of the language features and behaviours specified in this annex have one or more undesirable characteristics and in the absence of legacy usage would be removed from this specification. However, the usage of these features by large numbers of existing web pages means that web browsers must continue to support them. The specifications in this annex define the requirements for interoperable implementations of these legacy features.

These features are not considered part of the core ECMAScript language. Programmers should not use or assume the existence of these features and behaviours when writing new ECMAScript code. ECMAScript implementations are discouraged from implementing these features unless the implementation is part of a web browser or is required to run the same legacy ECMAScript code that web browsers encounter.

B.2.2 Additional Properties of the String.prototype Object

So in your future coding it's String.prototype.substring() all the way.