JS字串擷取函式slice(),substring(),substr()的區別

在JS中,slice()、substring()、substr()都有擷取字串的作用，那他們有哪些用法上的區別呢？如果你也有疑惑，這篇文章或許能夠幫助到你。

一、substring()

substring()方法返回一個索引和另一個索引之間的字串，語法如下：

str.substring(indexStart, [indexEnd])

下面有六點需要注意：

• substring()從提取的字元indexStart可達但不包括 indexEnd
• 如果indexStart 等於indexEnd，substring()返回一個空字串。
• 如果indexEnd省略，則將substring()字元提取到字串的末尾。
• 如果任一引數小於0或是NaN，它被視為為0。
• 如果任何一個引數都大於stringName.length，則被視為是stringName.length。
• 如果indexStart大於indexEnd，那麼效果substring()就好像這兩個論點被交換了一樣； 例如，str.substring(1, 0) == str.substring(0, 1)

以下是一些示例程式碼：

var str = 'abcdefghij';
console.log('(1, 2): '   + str.substring(1, 2)); // '(1, 2): b' console.log('(1, 1): ' + str.substring(1, 1)); // '(1, 1): ' console.log('(-3, 2): ' + str.substring(-3, 2)); // '(-3, 2): ab' console.log('(-3): ' + str.substring(-3)); // '(-3): abcdefghij' console.log('(1): ' + str.substring(1)); // '(1): bcdefghij' console.log('(-20, 2): ' + str.substring(-20, 2)); // '(-20, 2): ab' console.log('(2, 20): ' + str.substring(2, 20)); // '(2, 20): cdefghij' console.log('(20, 2): ' + str.substring(20, 2)); // '(20, 2): cdefghij'
 

二、substr()

substr()方法返回從指定位置開始的字串中指定字元數的字元，語法如下：

str.substr(start, [length])

下面有四點需要注意：

• substr()會從start獲取長度為length字元（如果擷取到字串的末尾，則會停止擷取）。
• 如果start是正的並且大於或等於字串的長度，則substr()返回一個空字串。
• 若start為負數,則將該值加上字串長度後再進行計算（如果加上字串的長度後還是負數，則從0開始擷取）。
• 如果length為0或為負數，substr()返回一個空字串。如果length省略，則將substr()字元提取到字串的末尾。

以下是一些示例程式碼：

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): '

需要注意的是，Microsoft的JScript不支援起始索引的負值。如果要使用此功能，可以使用以下相容性程式碼來解決此錯誤：

// only run when the substr() function is broken
if ('ab'.substr(-1) != 'b') { /** * Get the substring of a string * @param {integer} start where to start the substring * @param {integer} length how many characters to return * @return {string} */ String.prototype.substr = function(substr) { return function(start, length) { // call the original method return substr.call(this, // did we get a negative start, calculate how much it is from the beginning of the string // adjust the start parameter for negative value start < 0 ? this.length + start : start, length) } }(String.prototype.substr); }

三、substring()與substr()的主要區別

substring()方法的引數表示起始和結束索引，substr()方法的引數表示起始索引和要包含在生成的字串中的字元的長度,示例如下：

var text = 'Mozilla';
console.log(text.substring(2,5)); // => "zil" console.log(text.substr(2,3)); // => "zil"

四、slice()

slice()方法返回一個索引和另一個索引之間的字串，語法如下：

str.slice(beginIndex[, endIndex])

下面有三點需要注意：

• 若beginIndex為負數,則將該值加上字串長度後再進行計算（如果加上字串的長度後還是負數，則從0開始擷取）。
• 如果beginIndex大於或等於字串的長度，則slice()返回一個空字串。
• 如果endIndex省略，則將slice()字元提取到字串的末尾。如果為負，它被視為strLength + endIndex其中strLength是字串的長度。

以下是一些示例程式碼：

var str = 'abcdefghij';
console.log('(1, 2): '   + str.slice(1, 2)); // '(1, 2): b' console.log('(-3, 2): ' + str.slice(-3, 2)); // '(-3, 2): ' console.log('(-3, 9): ' + str.slice(-3, 9)); // '(-3, 9): hi' console.log('(-3): ' + str.slice(-3)); // '(-3): hij' console.log('(-3，-1): ' + str.slice(-3，-1)); // '(-3，-1): hi' console.log('(0，-1): ' + str.slice(0，-1)); // '(0，-1): abcdefghi' console.log('(1): ' + str.slice(1)); // '(1): bcdefghij' console.log('(-20, 2): ' + str.slice(-20, 2)); // '(-20, 2): ab' console.log('(20): ' + str.slice(20)); // '(20): ' console.log('(20, 2): ' + str.slice(20, 2)); // '(20, 2): '

在JS中,slice()、substring()、substr()都有擷取字串的作用，那他們有哪些用法上的區別呢？如果你也有疑惑，這篇文章或許能夠幫助到你。

一、substring()

substring()方法返回一個索引和另一個索引之間的字串，語法如下：

str.substring(indexStart, [indexEnd])

下面有六點需要注意：

• substring()從提取的字元indexStart可達但不包括 indexEnd
• 如果indexStart 等於indexEnd，substring()返回一個空字串。
• 如果indexEnd省略，則將substring()字元提取到字串的末尾。
• 如果任一引數小於0或是NaN，它被視為為0。
• 如果任何一個引數都大於stringName.length，則被視為是stringName.length。
• 如果indexStart大於indexEnd，那麼效果substring()就好像這兩個論點被交換了一樣； 例如，str.substring(1, 0) == str.substring(0, 1)

以下是一些示例程式碼：

var str = 'abcdefghij';
console.log('(1, 2): '   + str.substring(1, 2)); // '(1, 2): b' console.log('(1, 1): ' + str.substring(1, 1)); // '(1, 1): ' console.log('(-3, 2): ' + str.substring(-3, 2)); // '(-3, 2): ab' console.log('(-3): ' + str.substring(-3)); // '(-3): abcdefghij' console.log('(1): ' + str.substring(1)); // '(1): bcdefghij' console.log('(-20, 2): ' + str.substring(-20, 2)); // '(-20, 2): ab' console.log('(2, 20): ' + str.substring(2, 20)); // '(2, 20): cdefghij' console.log('(20, 2): ' + str.substring(20, 2)); // '(20, 2): cdefghij'

二、substr()

substr()方法返回從指定位置開始的字串中指定字元數的字元，語法如下：

str.substr(start, [length])

下面有四點需要注意：

• substr()會從start獲取長度為length字元（如果擷取到字串的末尾，則會停止擷取）。
• 如果start是正的並且大於或等於字串的長度，則substr()返回一個空字串。
• 若start為負數,則將該值加上字串長度後再進行計算（如果加上字串的長度後還是負數，則從0開始擷取）。
• 如果length為0或為負數，substr()返回一個空字串。如果length省略，則將substr()字元提取到字串的末尾。

以下是一些示例程式碼：

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): '

需要注意的是，Microsoft的JScript不支援起始索引的負值。如果要使用此功能，可以使用以下相容性程式碼來解決此錯誤：

// only run when the substr() function is broken
if ('ab'.substr(-1) != 'b') { /** * Get the substring of a string * @param {integer} start where to start the substring * @param {integer} length how many characters to return * @return {string} */ String.prototype.substr = function(substr) { return function(start, length) { // call the original method return substr.call(this, // did we get a negative start, calculate how much it is from the beginning of the string // adjust the start parameter for negative value start < 0 ? this.length + start : start, length) } }(String.prototype.substr); }

三、substring()與substr()的主要區別

substring()方法的引數表示起始和結束索引，substr()方法的引數表示起始索引和要包含在生成的字串中的字元的長度,示例如下：

var text = 'Mozilla';
console.log(text.substring(2,5)); // => "zil" console.log(text.substr(2,3)); // => "zil"

四、slice()

slice()方法返回一個索引和另一個索引之間的字串，語法如下：

str.slice(beginIndex[, endIndex])

下面有三點需要注意：

• 若beginIndex為負數,則將該值加上字串長度後再進行計算（如果加上字串的長度後還是負數，則從0開始擷取）。
• 如果beginIndex大於或等於字串的長度，則slice()返回一個空字串。
• 如果endIndex省略，則將slice()字元提取到字串的末尾。如果為負，它被視為strLength + endIndex其中strLength是字串的長度。

以下是一些示例程式碼：

var str = 'abcdefghij';
console.log('(1, 2): '   + str.slice(1, 2)); // '(1, 2): b' console.log('(-3, 2): ' + str.slice(-3, 2)); // '(-3, 2): ' console.log('(-3, 9): ' + str.slice(-3, 9)); // '(-3, 9): hi' console.log('(-3): ' + str.slice(-3)); // '(-3): hij' console.log('(-3，-1): ' + str.slice(-3，-1)); // '(-3，-1): hi' console.log('(0，-1): ' + str.slice(0，-1)); // '(0，-1): abcdefghi' console.log('(1): ' + str.slice(1)); // '(1): bcdefghij' console.log('(-20, 2): ' + str.slice(-20, 2)); // '(-20, 2): ab' console.log('(20): ' + str.slice(20)); // '(20): ' console.log('(20, 2): ' + str.slice(20, 2)); // '(20, 2): '