12
实不相瞒,对于字符串中的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系列三:数组的陷阱


moddx
1.3k 声望70 粉丝

勤能补拙是良训