Detailed explanation of usage and difference comparison examples of three interception string functions in JavaScript

In JavaScript, substring extraction is mainly through one of the three methods: Slice, Substring, and Substr.

// slice 
// 语法: string.slice(start [, stop])
"Good news, everyone!".slice(5,9); 
// 'news'
// substring 
// 语法: string.substring(indexA [, indexB])
"Good news, everyone!".substring(5,9); 
// 'news'
// substr
// 语法: string.substr(start [, length])
"Good news, everyone!".substr(5,4); 
// 'news'

Enter a start index parameter and an optional end index (or length) parameter among the three methods.

But they differ in some important aspects:
1. The substr() method extracts the specified number of characters from the specified position.
param: start is the position index to start extracting characters, length is the number and length of extracted characters.
return: A new string. length characters starting at start.
There are inconsistent performances in different browsers. Modern browsers allow the start index parameter to be a negative number to indicate the number of characters to be extracted starting from the end of the string. However, in browsers of IE8 and below, the minimum start index parameter is calculated from 0. [substr is an additional ECMAScript feature for web browsers. It is not recommended to use it when the start index is a negative value]

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

2.substring() method is used to extract the subset between one index of the string and another , or until the end of the string.
param: indexA, indexB The value range of the two parameters is an integer between 0 and the length of the string.
return: Return a new string, starting from the small index to the large index, including the characters at the small index position, excluding the characters at the large index position.
The parameters of substring are reversible. It always starts with a small parameter value and ends with a large parameter value. If the argument is less than 0 or NaN, it is treated as 0, if the argument is greater than the length of the string, it is treated as the length value of the string.

// assumes a print function is defined
var anyString = "Mozilla";
// Displays "Moz"
console.log(anyString.substring(0,3));
console.log(anyString.substring(3,0));
// Displays "lla"
console.log(anyString.substring(4,7));
console.log(anyString.substring(7,4));
// Displays "Mozill"
console.log(anyString.substring(0,6));
// Displays "Mozilla"
console.log(anyString.substring(0,7));
console.log(anyString.substring(0,10));

3.slice Extracts a part of the string.
param: The position index at which beginSlice starts to extract characters, which can be negative. If it is a negative value, it is regarded as (sourceLength-beginSlice). sourceLength is the length of the string, that is: the position endSlice starting from the end of the string. The position index of the character at which the extraction ends. If omitted, extraction ends. If negative, it is treated as (sourceLength-endSlice).
return: Return a new string, starting with start (including start) and ending with end (excluding end).
All parameters can be negative. If the index is negative, it will be counted from the end of the string.

var str1 = "The morning is upon us.";
console.log(str1.slice(4, -2));   //  morning is upon u
var str = "The morning is upon us.";
str.slice(-3);     // "us."
str.slice(-3, -1); // "us"
str.slice(0, -1);  // "The morning is upon us"

The above is the detailed content of Detailed explanation of usage and difference comparison examples of three interception string functions in JavaScript. For more information, please follow other related articles on the PHP Chinese website!