JavaScript : String.slice() vs String.substring() vs String.substr()
In this blog, we will discuss about few methods that are used in JavaScript for partial string extraction. You can also see my blog specific on Arrays which are used in JavaScript.
The following methods are :-
- slice()
- substring()
- substr()
All these methods extracts parts of a string and returns the extracted parts in a new string. And all of them does not change the original string.
1. slice() method can take 2 arguments:
Argument 1: begin, Required. The position where to begin the extraction. First character is at position 0. Use negative values to specify the position from the end of the string.
Argument 2: end, Optional. The position (up to, but not including) where to end the extraction. If omitted, slice() selects all characters from the start-position to the end of the string.Use negative numbers to select from the end of the string.
var numbers="0123456789"; console.log(numbers.slice(2,4)); // shows 23 console.log(numbers.slice(-7,-3)); // shows 3456
If end is omitted, slice extracts chars to the end of the string.
console.log(numbers.slice(3)); // shows 3456789 console.log(numbers.slice(-3)); // shows 789
If begin and end are equal or begin is greater than end, slice gives empty string.
console.log(numbers.slice(3,3)); console.log(numbers.slice(7,3)); console.log(numbers.slice(-3,-7)); // All of above shows (an empty string)
If either argument is greater than the string’s length, either argument will use the string’s length
console.log(numbers.slice(2,100)); // shows 23456789 //here end used the string's length that is 10. console.log(numbers.slice(100,101)); // shows (an empty string)
If either argument is NaN, it is treated as if it were 0.
console.log(numbers.slice(NaN,8)); // shows 01234567 console.log(numbers.slice(1,NaN)); // shows (an empty string)
2. substring() method can take 2 arguments:
Argument 1: from, Required. The position where to start the extraction. First character is at index 0.
Argument 2: to, Optional. The position (up to, but not including) where to end the extraction. If omitted, it extracts the rest of the string.
console.log(numbers.substring(3,5)); // shows 34
If to is omitted, substring extracts characters to the end of the string.
console.log(numbers.substring(3)); // shows 3456789
if from and to are equal or only from is provided with value greater than string’s length or equal to it, substring gives an empty string.
console.log(numbers.substring(10)); console.log(numbers.substring(100)); console.log(numbers.substring(3,3)); //All of above shows (an empty string)
If either argument is greater than the string’s length, either argument will use the string’s length.
console.log(numbers.substring(0,101)); // shows 0123456789 console.log(numbers.substring(100,100)); // shows (an empty string)
If either argument is less than 0 or is NaN, it is treated as if it were 0.
console.log(numbers.substring(-3,5)); // shows 01234 console.log(numbers.substring(NaN,5)); // shows 01234 console.log(numbers.substring(-3)); // shows 0123456789
3. substr() method can take 2 arguments:
Argument 1: start, Required. The position where to start the extraction. First character is at index 0. To extract characters from the end of the string, use a negative start number.
Argument 2: length,Optional. The number of characters to extract. If omitted, it extracts the rest of the string.
console.log(numbers.substr(2,5)); // shows 23456 console.log(numbers.substr(-5,3)); //shows 567
if length is omitted than substr extracts characters to the end of the string.
console.log(numbers.substr(3)); // shows 3456789 console.log(numbers.substr(-3));// shows 789
if start is >= string’s length Or length <= 0 or NaN than substr gives empty string.
console.log(numbers.substr(23,2)); console.log(numbers.substr(10,6)); console.log(numbers.substr(3,-6)); console.log(numbers.substr(3,0)); console.log(numbers.substr(3,NaN)); // All of above shows (an empty string)
if start is NaN, it is treated as if it were 0.
console.log(numbers.substr(NaN,3)); // shows 012
Hope this blog was helpful. I would love to answer any of your queries regarding the methods discussed in this blog.
I am little disagree with point 1, where stated that slice() takes 2 arguments. Lets have a example.
var name =’vipin';
const result = name.slice(1) // ‘ipin’
Same with substring and substr also.
const result = name.substring(1) // ‘ipin’
const result = name.substr(1) // ‘ipin’
Great! You have drawn a very good comparison of the various methods to slice up strings in JavaScript. Thanks for simplifying the differences in such a concise manner.
Thank You
var str =”TOTHENEW”;
console.log(str.substr(0,2));
console.log(str.substring(2,5));
console.log(str.slice(5,1000));
@Rahul Sadi,
var str = “TOTHENEW”
console.log(str.substr(0,2)); //TO
console.log(str.substring(2,5)); //THE
console.log(str.slice(5, 1000)); //NEW
Thank you for your most valuable post