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 :-

1. slice()
2. substring()
3. 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.