Today let’s talk about three convenient and very similar interception methods provided by strings:

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

They are similar in two ways:

  1. Function: both intercepts a string and both return a new string

  2. Arguments: Both support taking two arguments, the first of which represents the starting position of interception. The second argument, in addition to substr(), the other two slice() and substring(), represent the end of the interception

  3. When only one parameter is received, it is consistently truncated from the start position to the end

let str = 'abcdefg';
let sli = str.slice(2);
let sub = str.substr(2);
let subs = str.substring(2);
Copy the code

The code above illustrates the third common denominator mentioned above:

When only one parameter is received, it is consistently truncated from the start position to the end.

That is, their output is cDEFG

Ouch, so look, really like! What’s the difference?

— — — — — — — on the code

// Add the second argument as in the previous examplelet str = 'abcdefg';
let sli = str.slice(2, 5);  // 'cde'
let sub = str.substr(2, 5);  // 'cdefg'
let subs = str.substring(2, 5);  // 'cde'
Copy the code

From the above code, we can easily see the rebellious nature of substr: the second argument does not represent the end of the interception. Instead, it intercepts the length of the field.

So what happens if the end of the interception exceeds the index at the end of the string, does it get an error?

Curiosity led me to change the code:

let str = 'abcdefg';
let sli = str.slice(2, 10);  // 'cdefg'
let sub = str.substr(2, 10);  // 'cdefg'
let subs = str.substring(2, 10);  // 'cdefg'
Copy the code

These three methods are very powerful and do not give errors due to our unreasonable request. In order to verify whether the truncated length overflows, console.log each of them to check the length of 5, no problem

If the starting position is greater than the length of the string:

let str = '12345';
let sli = str.slice(6, 8);  // ' '
let sub = str.substr(6, 2);  // ' '
let subs = str.substring(6, 8);  // ' '
Copy the code

Obviously, when the initial position is greater than the length of the string, an empty string “” is intercepted.

So these three methods, when they reach the end of the interception, they stop the interception and don’t add a space after it

These are two of the special cases, and there is another case where the parameter is negative:

The three methods behave differently in this case, so let’s discuss them separately

1. Take a look at firstslice()In the case

let str = '12345';
let sli1 = str.slice(-3, 4);  // '34'
let sli1 = str.slice(3, -1);  // '4'
let sli1 = str.slice(-3, -1);  // '34'
Copy the code

You can see that the slice() method adds the negative number passed in to the length of the string to make it a positive number, as str.slice(-3, 4) is equivalent to str.slice(2, 4).

2. After thatsubstr()In the case

let str = '12345';
let sli1 = str.substr(-3, 2);  // '34'
let sli1 = str.substr(3, -1);  // ' '
let sli1 = str.substr(-3, -1);  // ' '
Copy the code

The first argument to substr() also adds the negative number passed to the length of the string to make it a positive number. The important thing is that the second argument, if negative, will default to a length of 0. So the last two statements return the empty string ”

3. The final issubstring()The performance of the

let str = '12345';
let sli1 = str.substring(-3, 3);  // '123'
let sli1 = str.substring(3, -1);  // '123'
let sli1 = str.substring(-3, -1);  // ' '
Copy the code

In this code, we notice two things:

(1) Substring () converts all received negative numbers to 0 and intercepts them.

(2) When receiving two parameters, the method will first compare the size of the two parameters (if there is a negative number, it will process and then compare), taking the smaller side as the beginning of the interception, and the larger side as the end of the interception

In particular, the second feature, slice(), does not compare two arguments and returns an empty string if the first argument is larger than the second

conclusion

After analyzing their performance under different parameters, they are finally summarized in a small way: The similarities have been summarized at the beginning of the article, and the differences are as follows:

  1. The slice() arguments represent the beginning and end of the interception, while the second argument to substr() represents the number of bits (or lengths) to be intercepted. Substring () compares the two arguments to determine the interception region

  2. All three methods stop intercepting if they reach the end, regardless of the end of the argument convention, or the length of the convention.

  3. When arguments are negative: Slice () adds the negative number to the length of the string and executes the code. The first argument to substr() also adds a negative number to the length of the string to get a positive number, and the second argument converts a negative number to 0. Substring () converts all negative arguments to 0