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