JavaScript : String.slice() vs String.substring() vs String.substr()

In this blog, we will discuss a 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:-

1. slice()
2. substring()
3. substr()

All these methods extract parts of a string and return 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. The 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) was 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.

1 2 3

var numbers="0123456789"; console.log(numbers.slice(2,4));   // shows 23 console.log(numbers.slice(-7,-3)); // shows 3456

If the end is omitted, slice extracts chars to the end of the string.

1 2	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.

1 2 3 4 5

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

1 2 3 4

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.

1 2	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.

1	console.log(numbers.substring(3,5)); // shows 34

If to is omitted, substring extracts characters to the end of the string.

1	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.

1 2 3 4 5

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.

1 2	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.

1 2 3

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.

1 2	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.

1 2	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.

1 2 3 4 5 6 7

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.

1	console.log(numbers.substr(NaN,3)); // shows 012