JavaScript Substring Vs Substr Vs Slice Differences With Examples

JavaScript substring(),substr(),slice() are predefined methods in string prototype used to get the substring from a string.In this tutorial, we will understand each one of them & differences between them using examples.

On this page

JavaScript substring(): #

JavaScript substring() method returns part of the string between startIndex & endIndex (excluding endIndex character) or upto the end of the string if endIndex not provided

JavaScript substring() syntax: #

JavaScript substring() method takes two parameters start index and end index. And second parameter end index is optional.

And the return value is a new string between start, end indexes.

string.substring(startIndex[, endIndex])

JavaScript substring() Description: #

1. If we are not passing any parameters the method will return the same given string
2. If endIndex is not passed then it will return the substring starting from start index to end of the string.
3. If startIndex and endIndex are same then JavaScript substring() method return an empty string
4. If the startIndex or endIndex less than 0 (negative value) they are treated as 0.
5. If the startIndex or endIndex greater than string.length substring() method treats them as string.length
6. If startIndex or endIndex is NaN they treated as 0.

Go through the below examples to understand it further.

Javascript substring() Examples: #

We will take a string variable and see how JavaScript substring() method works.

var string = "substring method example";

//No parameters passed
var substring = string.substring();
console.log(substring);
//"substring method example"

//Both paramters passed
var substring = string.substring(0,9); 
console.log(substring);
//substring

//endIndex is Missed
var substring = string.substring(0);
console.log(substring);
//substring method example

//StartIndex and EndIndex are equal
var substring = string.substring(0,0);
//""

//StartIndex is greater than endIndex
var substring = string.substring(9,0);
//Nothing but string.substring(0,9);
//substring

//StartIndex is negative value less than 0
var substring = string.substring(-5,9); 
//Nothing but string.substring(0,9)
//substring

//EndIndex is negative value
var substring = string.substring(0,-9); 
//Nothing but string.substring(0,0); 
//""

var substring = string.substring(9,-19);
//Nothing but string.substring(9,0) => string.substring(0,9)
//Substring

//String Length
var length = string.length;
//22

//StartIndex greater than string length
var substring = string.substring(string.length+1,9);
// Nothing But string.substring(string.length,9) => string.substring(9,string.length)
//" method usage" 

//endIndex greater than string length
var substring = string.substring(9,string.length+1);
//Nothing But string.substring(9,string.length)
//" method usage" 

JavaScript substring() Browser Support: #

JavaScript substring() method works in almost all browsers starting from IE 6+, Microsoft Edge, Chrome, Mozilla, Opera, Safari. And also Mobile browsers like Android webView, Chrome for Android, Edge mobile, Firefox for Android, Opera Android, iOS Safari and Samsung Internet.

JavaScript Substring After a Character: #

To get the substring after a character in Javascript we can use IndexOf() method and substring() method.

Take a sample string

var testString = "JavaScript-Substring";

To get the substring after a character (For example dash(-)), we need to identify the index of character and pass it to the substring method as shown below.

var substring= testString.substring(testString.indexOf('-') + 1);
//substring

JavaScript Substring before a Character: #

To get the substring before a character in Javascript we can use IndexOf() method and substring() or substr() method.

For example in the below string to get substring before the character(say dash) i.e., Javascript

var testString = "JavaScript-Substring";

We can use the following methods

var substring= testString.substring(0,testString.indexOf('-'));
var substring= testString.substr(0,testString.indexOf('-')); 
//Javascript

JavaScript substr(): #

JavaScript substr() method returns part of the string starting from an index and number of characters after the start index.

JavaScript substr() Syntax: #

substr() method takes two parameters

• startIndex: Index of the first character
• length: number of characters to include in substring after the startIndex and it is optional

And the return value is a new string as per the given parameters.

string.substr(startIndex[, length])

JavaScript substr() Description: #

• If you are not passing any parameters return the same string
• If the length parameter not passed, substr() will return string starting from index to end of the string
• If the start index is less than 0 (negative value) it will be treated as (string.length-start) i.e., if the string length is 10 and if the index is -4. The start index is 10-4=6.
• If start index or length is NaN, substr() method treats them as 0.
• If the length is a negative number it is treated as 0
• If the length is undefined, substr() method return up to end of the string (as if length parameter not passed).

JavaScript substr() Examples: #

We will take a sample string and see how substr() works

var string= "substr method usage";

//No Parameters passed
string.substr()
//"substr method usage"

//Two parametes passed start index and lenght
string.substr(0,6)
//"substr"

//Only start index passed
string.substr(7)
//"method usage"

//Start index is negative value
string.substr(-5)
//Nothing but string.substr(string.length-5)
//"usage"

//Start index is negative value and length passed
string.substr(-12,6)
//Nothing but string.substr(string.length-12,6)
//"method"

//Length is negative value
string.substr(2,-5)
//=> string.substr(2,0)
//""

//Start index is NaN and length not passed
string.substr("test")
//=>string.substr(0) NaN
//"substr method usage"

//Start index is NaN and length passed
string.substr("test",6)
//=>string.substr(0,6)
//"substr"

//Length is NaN
//=>string.substr()
string.substr(5,"test")
//=>string.substr(5,0)
//""

JavaScript substr() Browser Support: #

Like substring() method, even substr() method supports all browsers IE 6+, Microsoft Edge, Chrome, Mozilla, Opera, Safari. And also Mobile browsers like Android webView, Chrome for Android, Edge mobile, Firefox for Android, Opera Android, iOS Safari and Samsung Internet.

JavaScript Substring From End: #

To get the substring from the end of the string, we can use substr() method by passing the start index as a negative value as shown below

var str = "substring From End"
// To get "End" 
str.substr(-3);
//End

JavaScript slice(): #

slice() method is similar to substring() method, returns partial string between start index & end index (excluding end index character) or up to the end of the string if end index not provided

JavaScript slice() Syntax: #

• slice() methods takes two parameters startIndex,endIndex
• endIndex is optional
• returns a new string without changing the existing string.

string.slice(startIndex[, endIndex])

JavaScript slice() Description: #

• If both parameters not passed then slice() method will return the same string
• If end index is not passed it extracts the string between start index and end of the string.
• If the start index or end index is a negative value, it is treated as (string.length-index). i.e., if the index is -5 its behaves as string.lenth-5.So if you want to read string from reverse we can use slice() method. See the below example and graphical representation.
• If start index and end indexes are same then slice() method will return an empty string.
• If start index is greater than end index, then an empty string will return.
• If start index is NaN or undefined it will be treated as 0.
• If end index is NaN an empty string will return.
• If end index is undefined then slice() method will return partial string between start index and end of the string.

Go through the below examples to understand it further.

JavaScript slice() Examples: #

We will take an example string and see how it works

var string = "slice method usage";

//without parameters 
string.slice();
//"slice method usage"

//Only Start Index Passed
string.slice(0);
//"slice method usage"

//If Both start and end passed
string.slice(0,5);
//"slice"

//If Start index is negative
string.slice(-5);
//=>string.slice(string.lenght-5)
"usage"

//IfEnd index is negative
string.slice(0,-5);
//=>string.slice(0,string.length-5)
//"slice method "

//If Start index is NaN
string.slice("a",5);
//=>string.slice(0,5)
//"slice"

//If end index is NaN
string.slice(0,"a");
//""

//If start index is greater than end index
string.slice(5,0);
//""

//If start index and end index are equal
string.slice(5,5);
//""

//If the start index is undefined
string.slice(undefined)
//=>string.slice(0)
//"slice method usage"

If the end index is undefined
string.slice(0,undefined)
//"slice method usage"

JavaScript slice() method with negative indexes: #

Use the negative indexes if you want parse string in reverse order. See the below graphical representation of slice method.

Negative indexes start from -1 and normal index starts from 0.

Always remember that start index should be less than end index.

string.slice(-5) //returns slice
string.slice(0) //return slice

Now in both cases, we ignored end index so slice() method returns the entire string starting from start index.

string.slice(-5,-3) //returns "sli"

now both indexes are false. and start index is less than end index. so it returned “sli” (excluding end index character)

string.slice(-5,-1) //returns "slic"
string.slice(-1) //returns "e"

string.slice(-1) prints only “e” because -1 is the end of the string.

JavaScript slice() Browser Support: #

slice() method works in almost all browsers starting from IE 6+, Microsoft Edge, Chrome, Mozilla, Opera, Safari. And also Mobile browsers like Android webView, Chrome for Android, Edge mobile, Firefox for Android, Opera Android, iOS Safari and Samsung Internet.

Differences between substring,slice and substr methods: #

There is no difference between string.substring() and string.slice() methods, both works in the same way but behavior might change depending upon the parameters we pass.

Similarities between JavaScript substring() and slice() methods: #

1. Both accepts two parameters startIndex and endIndex. And the behavior is same when both parameters are positive and startIndex less than endIndex.
2. Both methods do not change the original string.
3. In both, substring() and slice() methods endIndex is an optional parameter.
4. If endIndex is not passed both returns the characters up to the end of the string.
5. If startIndex or endIndex is greater than the string length they treated as string.length.
6. If startIndex and endIndex are equal both substring() and slice() methods returns an empty string.

Javascript substring() vs slice() differences: #

1. If statIndex is greater than endIndex (startIndex > endIndex) then substring() method will swap those parameters where as slice() method will return an empty string (No swapping).
2. If startIndex or endIndex is a negative value substring() method treats them as 0 whereas slice() method treats them as (string.length-index).Basically, it traverses string from the reverse as explained in above examples.

Why we have two different methods slice() and substring() in JavaScript? #

We might think why we need two different methods slice() and substring() as their behaviour is same. It is all about negative indexes.

The initial JavaScript created in Netscape 2.0 has only substring() method. If the parameters are negative they treated as 0. And the order of parameters does not matter. if start index is greater than end index it will swap those and performs the operation.

And in the next version of JavaScript 1.2 introduced in Netscape 4.0, they wanted to support negative indexes to traverse the string from the reverse.

And it is not a good idea to change the existing substring() function as it might break compatibility with existing scripts that expected negative indexes to treated as zero(0)

So they created a new function to handle negative indexes and called it as slice()

Generally, if you think of bread(food) we can slice it from start or from the end. The way we like. In the same way slice the string from start or end depending upon your requirement.

Javascript substring() vs substr() differences: #

In my opinion we should not compare substring()(or slice()) methods with substr() method. Both are useful depending upon our requirement

1. The second parameter in substr() method is the length of the string to return from start index.
2. Whereas the second parameter in substring() or slice() is, end index.

This is the only main difference between substring() or substr() methods.