A deep analysis of JavaScript string manipulation methods Slice, substr, substring and their IE compatibility _javascript techniques

SUBSTR (), substring (), slice () methods are often used to intercept strings, and sometimes confusing usage, so summarized.

Reading Table of Contents
Slice ()
substring ()
substr ()
• Summary

Slice ()

Definition: Accepts one or two arguments, and the first parameter specifies the start position of the substring. The second parameter represents the end position of the substring (excluding the character at the end position), and if no second argument is passed, the length of the string is used as the ending position.

1, pass parameter is positive condition:

var str = "HelloWorld";
A parameter, the string length is used as the end position
alert (Str.slice (3));//"Loworld"
//two arguments, the character at 7 position is "R", but does not include the character at the end position

2, pass the parameter is negative condition:

The slice () method adds the Passed-in negative value to the length of the string.
 var str = "HelloWorld";
A parameter that is slice (7) alert (Str.slice ( -3)) with the length of the string, and//
"Rld"
//two parameters, added to the string length slice (3,6)

3, the second argument is less than the first parameter value:

The slice () method returns an empty string if the second argument passed in is smaller than the first argument.

var str = "HelloWorld";

4, IE compatibility

In the IE8 browser test, there is no problem, behavior and modern browser consistent.

SUBSTRING ()

Definition: Accepts one or two arguments, and the first parameter specifies the start position of the substring. The second parameter represents the end position of the substring (excluding the character at the end position), and if no second argument is passed, the length of the string is used as the ending position.

1, pass parameter is positive condition: and slice () method behavior is same

var str = "HelloWorld";
A parameter, the string length is used as the end position
alert (str.substring (3));//"Loworld"
//two arguments, the character at 7 position is "R", but does not include the character at the end position

2, pass the parameter is negative condition:

The substring () method converts all negative parameters to 0. Take a look at the example:

var str = "HelloWorld";
Two parameters,-4 will be converted to 0, equivalent to substring (3,0)--> is substring (0,3)
alert (str.substring (3,-4));//"Hel" 

The substring () method takes a smaller number as the starting position and a larger number as the ending position. As the above example substring (3,0) and substring (0,3) are the same effect.

4, IE compatibility

In the IE8 browser test, there is no problem, behavior and modern browser consistent.

SUBSTR ()

Definition: Accepts one or two arguments, and the first parameter specifies the start position of the substring. The second argument is somewhat different from the previous method, indicating the number of characters returned. If the second argument is not passed, the length of the string is used as the ending position. See examples:

1, pass parameter is positive condition:

var str = "HelloWorld";
A parameter, the string length is taken as the end position
alert (STR.SUBSTR (3));//"Loworld"
//two parameters, starting at position 3 to intercept the following 7 characters

2, pass the parameter is negative condition:

The substr () method adds a negative first argument to the length of the string and a negative second argument to 0.

var str = "HelloWorld";
The first negative parameter is added to the length of the string--->
/is: substr (7,5), 5 character
alert (Str.substr ( -3,5)) is intercepted from position 7;//"Rld"
// Converts the second argument to 0
//That is: substr (3,0), which intercepts 0 strings from position 3, returns an empty

3, IE compatibility

A problem occurs when the substr () method passes a negative value, and the original string is returned. The IE9 fixes the problem.

Summarize

The slice () and substring () behavior are consistent when the positive parameter is passed, and the substr () method is easily confused on the second parameter

In the case of passing negative parameters, the slice () method is added by the length of the string, conforming to the general thinking, substring () The second argument to 0 can be easily problematic, the starting position can be easily changed, and the substr () method is negative for IE compatibility problems.

In summary, the younger brother generally recommended the use of slice () method.

Here to introduce the difference between SLICE,SUBSTR and substring

First, they all receive two parameters, slice and substring receive the start and end positions (excluding the end position), and Substr receives the starting position and the length of the string to be returned. Look directly at the following example:

 var test = ' Hello World ';
  Alert (Test.slice (,));    O-w
  alert (test.substring (,));   O-w
  alert (Test.substr (,));   

Here's one thing to note: Substring is the starting position with the smaller of two parameters, and the larger argument as the end position.

Such as:

Alert (test.substring (7,4));   

Then, when the received parameter is a negative number, the slice adds the length of its string to the corresponding negative number, which is the result of the argument; substr simply adds the first argument to the string length as the first argument, and substring simply converts the negative parameters directly to 0. The test code is as follows:

var test = ' Hello World ';  
Alert (Test.slice (-));   Rld  
Alert (test.substring (-));  Hello World  
Alert (TEST.SUBSTR (-));  Rld  
Alert (Test.slice (,-));  Lo w  
alert (test.substring (,-));//hel  
alert (Test.substr (,-));  

Note: IE has the wrong handling for substr to receive negative values, and it returns the original string.