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

19 / Feb / 2015 by Vivek Garg 5 comments

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.

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

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

[java]
console.log(numbers.slice(3)); // shows 3456789
console.log(numbers.slice(-3)); // shows 789
[/java]

If begin and end are equal or begin is greater than end, slice gives empty string.

[java]
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)

[/java]

If either argument is greater than the string’s length, either argument will use the string’s length

[java]
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)
[/java]

If either argument is NaN, it is treated as if it were 0.

[java]
console.log(numbers.slice(NaN,8)); // shows 01234567
console.log(numbers.slice(1,NaN)); // shows (an empty string)
[/java]

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.

[java]
console.log(numbers.substring(3,5)); // shows 34
[/java]

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

[java]
console.log(numbers.substring(3)); // shows 3456789
[/java]

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.

[java]
console.log(numbers.substring(10));
console.log(numbers.substring(100));
console.log(numbers.substring(3,3));

//All of above shows (an empty string)

[/java]

If either argument is greater than the string’s length, either argument will use the string’s length.

[java]
console.log(numbers.substring(0,101)); // shows 0123456789
console.log(numbers.substring(100,100)); // shows (an empty string)
[/java]

If either argument is less than 0 or is NaN, it is treated as if it were 0.

[java]
console.log(numbers.substring(-3,5)); // shows 01234
console.log(numbers.substring(NaN,5)); // shows 01234
console.log(numbers.substring(-3)); // shows 0123456789
[/java]

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.

[java]
console.log(numbers.substr(2,5)); // shows 23456
console.log(numbers.substr(-5,3)); //shows 567
[/java]

if length is omitted than substr extracts characters to the end of the string.

[java]
console.log(numbers.substr(3)); // shows 3456789
console.log(numbers.substr(-3));// shows 789
[/java]

if start is >= string’s length Or length <= 0 or NaN than substr gives empty string.

[java]
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)

[/java]

if start is NaN, it is treated as if it were 0.

[java]
console.log(numbers.substr(NaN,3)); // shows 012
[/java]

Hope this blog was helpful. I would love to answer any of your queries regarding the methods discussed in this blog.

FOUND THIS USEFUL? SHARE IT

comments (5)

  1. Vipin

    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’

    Reply
  2. techbeamers

    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.

    Reply
  3. Rahul Sadi

    Thank You
    var str =”TOTHENEW”;
    console.log(str.substr(0,2));
    console.log(str.substring(2,5));
    console.log(str.slice(5,1000));

    Reply
    1. Shinji

      @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

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *