这是大冰块2021年第1篇原创文章，和大冰块一起在前端领域努力吧！！！
字符串截取和拼接是字符串最我们最常用也是最易错的方法。主要原因是 substr() 和 slice() 和 substring()的区别看起来很乱，有很多小伙伴还不太明白。
所以今天大冰块牺牲了摸鱼 时间，重新整理了一遍关于这三个截取字符串方法之间的区别。
首先来归纳总结一下三个方法的传参：
substr()：
参数一（必须）：一个整数，要开始截取字符的下标，如为负则代表从尾部开始截取。
参数二（可选）：一个整数，要截取字符的数量。如果省略该参数，则默认为string.length，即当前字符串的长度。
slice() ：
参数一（必须）：一个整数，要开始截取字符的下标，如为负则代表从尾部开始截取。
参数二（可选）：一个整数，要结束截取字符的下标，如为负则代表从尾部截取多少个字符。如果省略该参数，则默认为string.length，即当前字符串的长度。
substring() ：
参数一（必须）：一个非负的整数，要开始截取字符的下标。
参数二（可选）：一个非负的整数，要结束截取字符的下标。如果省略该参数，则默认为string.length，即当前字符串的长度。
下面从传参不同详细说下它们的区别：
两个参数都为正的时候：
它们的参数一都表示从某下标处开始截取。
substr() 的参数二代表一共截取多少位；
slice() 和substring() 的参数二则代表截取到某下标（不包含此下标处字符）。
两个参数都为负的时候：
substr() 和slice() 的参数一表示从尾部开始截取。
slice() 参数二表示从尾部第n个下标结束截取。
substr()参数二表示截取负数位，截取值为空 。
substring()则把参数一和参数二都转为0，截取为空。
只有一个参数且为正的时候：
它们的参数一都表示从某下标处开始截取。
参数二都默认为当前字符串的长度length。
只有一个参数且为负的时候：
substr() 和slice() 的参数一表示从尾部第n个下标开始截取；
substring()则把参数一转为0。
它们的参数二都默认为当前字符串的长度length。
第一个参数为正，但第二个参数为负的时候：
substr() 和slice() 的参数一都表示从某下标处开始截取。
substr()参数二表示截取负数位，截取值为空。
slice()参数二表示从尾部第n个下标结束截取。
substring() 则把第一个参数转为0，第二个参数改为第一个参数的值。
第一个参数为负，但第二个参数为正的时候：
substr() 和slice() 的参数一都表示从尾部第n个下标开始截取，substring()
则把参数一转为0，它们的参数二则代表截取到某下标（不包含此下标处字符）。
用法1： string.substr(start,length)
用法2： string*.slice(start,end)
用法3： string*.substring(start,end)
例子一： （两个参数都为正）
let str = '0123456789'
let result1 = str.substr(2,5) // 从下标2开始截取，截取5位
let result2 = str.slice(2,5) // 从下标2开始截取，截取到下标5（不含下标5）
let result3 = str.substring(2,5) // 从下标2开始截取，截取到下标5（不含下标5）
console.log(result1) // 控制台打印：23456
console.log(result2) // 控制台打印：234
console.log(result3) // 控制台打印：234
例子二： （两个参数都为负）
let str = '0123456789'
let result1 = str.substr(-2,-5) // 相当于 str.substr(str.length-2,-5)，相当于 str.substr(8,-5), 从下标8开始截取，截取-5位
let result2 = str.slice(-2,-5) // 相当于 str.substr(str.length-2,str.length-5)，相当于 str.substr(8,5), 从下标8开始截取，截取到下标5（不含下标5）
let result3 = str.substring(-2,-5) // 相当于 str.substr(0,0)
// 因为截取下标的区间都不存在元素，所以打印都为空
console.log(result1) // 控制台打印：
console.log(result2) // 控制台打印：
console.log(result3) // 控制台打印：
例子三： （只有一个参数且为正）
let str = '0123456789' // str.length为10
let result1 = str.substr(2) // 相当于 str.substr(2,str.length)，相当于 str.substr(2,10)，不足10位取到最后一位
let result2 = str.slice(2) // 相当于 str.slice(2,str.length)，相当于 str.slice(2,10)
let result3 = str.substring(2) // 相当于 str.substring(2，10)
console.log(result1) // 控制台打印：23456789
console.log(result2) // 控制台打印：23456789
console.log(result3) // 控制台打印：23456789
例子四： （只有一个参数且为负）
let str = '0123456789' // str.length为10
let result1 = str.substr(-2) // 相当于 str.substr(str.length-2,str.length)，相当于 str.substr(8,10)，不足10位取到最后一位
let result2 = str.slice(-2) // 相当于 str.slice(str.length-2,str.length)，相当于 str.slice(8,10)
let result3 = str.substring(-2) // 相当于 str.substring(0,10)
console.log(result1) // 控制台打印：89
console.log(result2) // 控制台打印：89
console.log(result3) // 控制台打印：0123456789
例子五： （第一个参数为正，但第二个参数为负）
let str = '0123456789' // str.length为10
let result1 = str.substr(2,-5) // 从下标2开始截取，截取-5个字符，为空
let result2 = str.slice(2,-5) // 从下标2开始截取，截取到str.length-5，即相当于 str.slice(2,5)
let result3 = str.substring(2,-5) // 相当于 str.substring(0,2) ，即当substring的第一个参数为正数，第二个参数为负数时，则会把第一个参数作为0，第二个参数改为第一个参数的值即2。
console.log(result1) // 控制台打印：
console.log(result2) // 控制台打印：234
console.log(result3) // 控制台打印：01
例子六： （第一个参数为负，但第二个参数为正）
let str = '0123456789' // str.length为10
let result1 = str.substr(-2,5) // 相当于 str.substr(str.length-2,5)，相当于 str.substr(8,5)
let result2 = str.slice(-2,5) // 相当于 str.slice(str.length-2,5)，相当于 str.substr(8,5)，为空
let result3 = str.substring(-2,5) // 相当于 str.substring(0,5)，即当substring的第一个参数为负数时，则会把第一个参数作为0。
console.log(result1) // 控制台打印：89
console.log(result2) // 控制台打印：
console.log(result3) // 控制台打印：01234
原创不易，如有错误欢迎指出。如果对你有帮助，请给大冰块来个三连吧~?