Big guy reveals secrets Java Where are people planted ？ Click to get it for free 《 Interview list of large factories 》, Overcome the interview difficulties ~>>>

JavaScript in String Of slice(),substr(),substring() The three difference

something in common

Take a fragment from a given string , And return the new string object of this fragment , And it doesn't change the original string .

Specific differences

slice()

str.slice(beginIndex[, endIndex])

describe ：

slice() Extract a string from a string and return a new string . Changes in one string do not affect another string . in other words ,slice The original string will not be modified （ Only a new string containing part of the original string will be returned ）.

slice() The extracted new strings include beginIndex But does not include endIndex. Here are two examples .

example 1：str.slice(1, 4) Extract the second character to the fourth character （ The index of the extracted character （index） In turn 1、2, and 3）.

example 2：str.slice(2, -1) Extract the third character to the last character .

Example ：

var str1 = 'The morning is upon us.', // str1 The length of length yes 23.
str2 = str1.slice(1, 8),
str3 = str1.slice(4, -2),
str4 = str1.slice(12),
str5 = str1.slice(30);
console.log(str2); // Output ：he morn
console.log(str3); // Output ：morning is upon u
console.log(str4); // Output ：is upon us.
console.log(str5); // Output ：""
// A negative value is passed in as the index 
var str = 'The morning is upon us.';
str.slice(-3); // return 'us.'
str.slice(-3, -1); // return 'us'
str.slice(0, -1); // return 'The morning is upon us'

substr()

str.substr(start[, length])

Warning ： Even though String.prototype.substr(…) Not strictly abandoned (as in "removed from the Web standards"), But it is considered a legacy function and should be avoided if possible . It's not JavaScript Part of the core language , It may be removed in the future . If you can , Use substring() Replace it .

describe ：

start It's an index of a character . The index of the first character is 0, The index of the last character is The length of a string minus 1.substr from start Position begins to extract characters , extract length Characters （ Or until the end of the string ）.

1. If start Positive value , And is greater than or equal to the length of the string , be substr Returns an empty string .
2. If start negative , be substr Think of it as a character index starting at the end of a string . If start Is negative and abs(start) Greater than the length of the string , be substr Use 0 As the index to start extracting .
3. If length by 0 Or negative value , be substr Returns an empty string . If you ignore length, be substr Extract characters , Until the end of the string .

Example ：

var str = "abcdefghij";
console.log("(1,2): " + str.substr(1,2)); // (1,2): bc
console.log("(-3,2): " + str.substr(-3,2)); // (-3,2): hi
console.log("(-3): " + str.substr(-3)); // (-3): hij
console.log("(1): " + str.substr(1)); // (1): bcdefghij
console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab
console.log("(20, 2): " + str.substr(20,2)); // (20, 2):

substring()

str.substring(indexStart[, indexEnd])

describe ： substring Extract from indexStart To indexEnd（ barring ） Characters between . Specially ：

• If indexStart be equal to indexEnd,substring Returns an empty string .
• If omitted indexEnd,substring Extract characters all the way to the end of the string .
• If any parameter is less than 0 Or for NaN, It's treated as 0.
• If any parameter is greater than stringName.length, It's treated as stringName.length.
• If indexStart Greater than indexEnd, be substring The execution effect of is like two parameters swapping . See the following example .

Example ：

var anyString = "Mozilla";
// Output "Moz"
console.log(anyString.substring(0,3));
console.log(anyString.substring(3,0));
console.log(anyString.substring(3,-3));
console.log(anyString.substring(3,NaN));
console.log(anyString.substring(-2,3));
console.log(anyString.substring(NaN,3));
// Output "lla"
console.log(anyString.substring(4,7));
console.log(anyString.substring(7,4));
// Output ""
console.log(anyString.substring(4,4));
// Output "Mozill"
console.log(anyString.substring(0,6));
// Output "Mozilla"
console.log(anyString.substring(0,7));
console.log(anyString.substring(0,10));
// The following example uses String.length Property to get the reciprocal element of the specified string .
// Obviously, this method is easier to remember , Because you no longer remember the starting position and the final position like the example above .
// Displays 'illa' the last 4 characters
var anyString = 'Mozilla';
var anyString4 = anyString.substring(anyString.length - 4);
console.log(anyString4);
// Displays 'zilla' the last 5 characters
var anyString = 'Mozilla';
var anyString5 = anyString.substring(anyString.length - 5);
console.log(anyString5);

Reference material

1. String.prototype.slice() - JavaScript | MDN
2. String.prototype.substr() - JavaScript | MDN
3. String.prototype.substring() - JavaScript | MDN
4. JavaScript in substr(),substring(),slice() difference