JavaScript 中的字符串切片操作（slice、substr、substring）

// 首先定義一個字符串
var str1 = 'Hello World!'

來看一下所需要傳遞的參數

slice(start,end)

substr(start,length)

subtring(start,stop)

注意：由於字符串是不可變的類型，所以這三個方法的返回值都是新的字符串

可以看出第一個參數都是start，所以

傳入一個參數的時候
當這個參數是非負值 或者不傳遞參數時，返回的結果都一樣

console.log(str1.slice(4))        //  o World!
console.log(str1.substr(4))        //  o World!
console.log(str1.substring(4))        //  o World!

console.log(str1.slice(0))        //  Hello World!
console.log(str1.substr(0))        //  Hello World!
console.log(str1.substring(0))        //  Hello World!


console.log(str1.slice())        //  Hello World!
console.log(str1.substr())        //  Hello World!
console.log(str1.substring())        //  Hello World!

注意，如果這個參數如果大於過等於字符串的長度，則返回值為空字符串

console.log(str1.slice(12))      //  ""
console.log(str1.substr(12))      //  ""
console.log(str1.substring(12))      //  ""

 當傳遞的參數為負值的時候：

console.log(str1.slice(-4))      //  rld!
console.log(str1.substr(-4))      //  rld!
console.log(str1.substring(-4))      //  Hello World!
console.log(str1.substri ng(-6))      //  Hello World!


console.log(str1.slice(-12))      //  Hello World!
console.log(str1.substr(-12))      //  Hello World!
console.log(str1.substring(-12))      //  Hello World!

由上述例子可以看出，如果傳遞的負值參數的絕對值大於或等於該字符串的長度，則會返回完整的字符串；如果傳遞的負值參數的絕對值小於該字符串的長度，slice() 和substr() 方法都會根據該值大小，倒敘截取字符串的長度，而對於substring()， 則無論傳入的是什么負值參數，都是返回完整的字符串。

 

當傳入兩個參數時

slice(start, end) 根據傳入參數均是下標，具體情況如下：

// 相同符號的參數，如果第二個參數小於等於第一個參數，則返回空字符串，比如：
console.log(str1.slice(-1, -4))      //  ""
console.log(str1.slice(5, 3))      //  ""
// 第二個參數為0，或第一個參數大於等於字符串的長度，或第二個參數小於等於長度的負數（比如長度為12，第二個參數小於等於-12），則返回是空字符
console.log(str1.slice(3, 0))      //  ""
console.log(str1.slice(-5, 0))      //  ""
console.log(str1.slice(12, 15))      //  ""
console.log(str1.slice(-15, -12))      //  ""
//  第二個參數大於第一個參數，則截取他們區間的元素，如：
console.log(str1.slice(-4, -1))      //  "rld"
console.log(str1.slice(3, 5))      //  "lo"


// 不同符號的參數，正參數不變，負參數計算與長度的和，同樣進行第二個參數與第一個參數進行比較，比如：
console.log(str1.slice(3,-4))      // 相當於 str1.slice(3, 8)
console.log(str1.slice(-5, 11))      // 相當於 str1.slice(7, 11)
console.log(str1.slice(6, -11))      // 相當於 str1.slice(6, 1)

substr(start, length)  第一個參數是下標，第二個參數是要截取的長度

// 如果第二個參數為非正數，則一定返回空字符串
console.log(str1.substr(4, -2))      //  ""
console.log(str1.substr(3, -14))      //  ""
console.log(str1.substr(-4, 0))      //  ""
console.log(str1.substr(5, 0))      //  ""
// 如果第一個參數為負數，則以該參數與字符串的長度的和為起始下標，截取第二個參數長度，直到截取超過長度范圍
console.log(str1.substr(-4, 3))      //  相當於 str1.substr(8,3)      即為 'rld'
console.log(str1.substr(-3, 5))      //  相當於str1.substr(9, 5)     即為 'ld!'

substring(start, stop) 兩個參數都是下標，那么這個方法與slice(start, end)的區別在哪呢？

// 在傳入的參數為正數的時候，兩個方法的返回值是一樣的，如：
console.log(str1.slice(4))      //  'o World!'
console.log(str1.substring(4))      //  'o World!'
console.log(str1.slice(3, 6))      //  'lo'
console.log(str1.substring(3, 6))      //  'lo'

// 在傳入的參數為負數的時候，substring 會把負數參數換算成 0，如：
console.log(str1.substring(-3))      // 相當於 str1.substring(0)    即為 'Hello World!'

// 如果是兩個參數中有一個為負數的話，則會將該負數參數換算成  0，並把該參數作為起始位置，另一個非負參數，作為終止位置，比如：
console.log(str1.substring(-4, 5))      //  相當於 str1.substring(0, 5)    即為 'Hello'
console.log(str1.substring(5, -6))      //  相當於    str1.substring(0, 5)    即為 'Hello' 

 

 

參考資料：

JS中substr()，substring()，slice()區別 https://blog.csdn.net/u013270347/article/details/80751874

javascript中String類的subString()方法和slice()方法 https://www.easck.com/cos/2019/0615/303661.shtml