JavaScript String slice, substring and substr Methods

JavaScript String holds the sequence of charters.

 var str = "This is Sample String"; 

To Extract portion of a String in javascript we have 3 methods avilable. They are

• String.slice(start, end)
• String.substring(start, end)
• String.substr(start, length) 

String.slice()

This Method Extracts the part of a String and returns the extracted part as String.
It takes 2 arguments for start index and end index.

• If we give negative arguments, String.slice method will extract the String from end position to start position
• if we give single positive argument, then String.slice extracts the String from that position to the End of the String.
• if we give single negative argument, then String.slice extracts the String from End of the String to those many characters specified in the argument.
• If we Specify the out of index, It will return the empty String.

See below for Example of String.Slice behavior

 var str = "This is Sample String";
console.log("slice(8,14) : "+str.slice(8,14));
console.log("slice(-13,-7) : "+str.slice(-13,-7));
console.log("slice(8) : "+str.slice(8));
console.log("slice(-7) : "+str.slice(-7));
console.log("slice() : "+str.slice());
console.log("slice(50) : "+str.slice(50));

Output for Above :- 

 slice(8,14) : Sample
slice(-13,-7) : Sample
slice(8) : Sample String
slice(-7) :  String
slice() : This is Sample String
slice(50) :

String.substring()

JavaScript substring method is similar to slice, except behavior is different for negative argument.
Unlike Slice method which takes relative index from end of the String for negative arguments, substring method treats them from starting position of the String.
Say if i have a String str = "abc", and i am performaing str.substring(-3,-7), then Javascript will try to substring the str @ index between -13 and -7 and we don't have any characters at that indexes, it will return null.
However, If we use str.subgtring(-3), javaScript tries to return the SubString from -7 index to length of the String and we have String available from 0^th Index, It will return the entire String.

 See below for Example of String.substring() behavior

var str = "This is Sample String";
console.log("substring(8,14) : "+str.substring(8,14));
console.log("substring(-13,-7) : "+str.substring(-13,-7));
console.log("substring(8) : "+str.substring(8));
console.log("substring(-7) : "+str.substring(-7));
console.log("substring() : "+str.substring());
console.log("substring(50) : "+str.substring(50));

 Output for Above :-

substring(8,14) : Sample
substring(-13,-7) :
substring(8) : Sample String
substring(-7) : This is Sample String
substring() : This is Sample String
substring(50) :

String.substr()

JavaScript substr method is similar to slice, except the second argument specifies the length of the string.
Also Behaviour of subStr() and Slice() methods changes based on the negative argument supplied.
If we pass only one argument and is negative to the subStr(), then it works similar like slice() method to from end of the String but it will return String with the length specified foe Ex:- str.subStr(-7) means it will return the String of 7 characters from End of the String str.
 If we pass 2 negative arguments to the substr() method, it will return the String from first argument position from end of the String to the lenght specified in second argument.

 See below for Example of String.substr() behavior for clear understanding.

var str = "This is Sample String";
console.log("substr(8,14) : "+str.substr(8,14));
console.log("substr(-11,7) : "+str.substr(-11,7));
console.log("substr(8) : "+str.substr(8));
console.log("substr(-7) : "+str.substr(-7));
console.log("substr() : "+str.substr());
console.log("substr(50) : "+str.substr(50));

 Output for Above :-

substr(8,14) : Sample String
substr(-11,7) : mple St
substr(8) : Sample String
substr(-7) :  String
substr() : This is Sample String
substr(50) :

From Above examples, we can conclude that If we want to perform operation based on indices, then we can go for slice() or subString() keeping in mind the behavior of the negative arguments. If we want to perform operation based on length then we go for substr().

For those who want to know the performance of these 3 methods here is a good jsperf comparison. http://jsperf.com/slice-vs-substr-vs-substring-methods-long-string/3