《看完就懂系列》字符串截取方法substr() 、 slice() 和 substring()之间的区别和用法

这是大冰块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

写在后面

这是大冰块《看完就懂系列》的第1篇文章，《看完就懂系列》旨在把一些常见的概念或方法以通俗易懂的方式呈现出来。欢迎大家点击其他文章一起讨论学习：

原创不易，如有错误，欢迎指出。

如果有帮助到你，请给大冰块来个三连（点赞收藏评论）,让我们一起在前端的路上进步吧~🤭