吐槽Javascript系列一：slice()、substr()和 substring()

实不相瞒，对于字符串中的slice()、substr()和 substring()这三个方法，我自己很长一段时间都是理不清的，每次用都得查一下文档，因为他们长得实在是太像了。

特性

我们先来温习一下，他们的特性如下：

• 这三个方法都会返回被操作字符串的一个子字符串，而且也都接受一或两个参数
• 这三个方法都不会改变原字符串
• 第一个参数指定子字符串的开始位置，第二个参数（在指定的情况下）表示子字符串到哪里结束。具体来说，slice()和substring()的第二个参数指定的是子字符串最后一个字符后面的位置，而substr()的第二个参数指定的则是返回的字符个数

我们来看几个简单的例子：

const str = 'hello world'
console.log(str.slice(3)) // lo world
console.log(str.substring(3)) // lo world
console.log(str.substr(3)) // lo world

console.log(str.slice(3, 7)) // lo w
console.log(str.substring(3, 7)) // lo w
console.log(str.substr(3, 7)) // lo worl

吐槽

substring()：slice()和substr()二位兄台，非在下自大，你们能做的，我都能做！我感觉你们没有存在的必要！
slice()：我们在传入负值的时候，是不一样的。

console.log(str.slice(-3)) // rld
console.log(str.substring(-3)) // hello world

substring()：我们当然是有一些区别，但我想说的是你们能做的，我都能做！
substr()：非在下自大，我感觉你们能做的，我也都能做啊。
slice()：非在下自大，我感觉你们能做的，我也都能做啊。

点评

我们来看这样一个例子：给定一个字符串，要求去掉最后一个逗号。

let str = 'a,b,'
let newStr = str.substring(0, str.length - 1)

上面是substring()的写法，我们在来看看slice()的写法：

let str = 'a,b,'
let newStr = str.slice(0, str.length - 1)

再来看看substr()的写法：

let str = 'a,b,'
let newStr = str.substr(0, str.length - 1)

这三个方法都能做到，并且写法也完全一样，这正是让人容易困惑的地方！
还有一个要命的地方在于，数组中也有slice方法。
大胆假想一下，如果把substr()踢出去，就保留substring()和slice()，你还会懵吗？
或者更大胆一点，把substr()和slice()都踢出去，就只保留substring()，我反正感觉整个世界都清静了！

系列链接

吐槽Javascript系列一：slice()、substr()和 substring()
吐槽Javascript系列二：数组中的splice和slice方法
吐槽Javascript系列三：数组的陷阱