三种 JavaScript 字符串截取方式：slice、substr 和 substring

通用示例代码，文章后面用到 demoString 的地方不再声明赋值：

let demoString = 'hello world!'
console.log(demoString.length)  // demoString的length等于12

前端开发中，字符串处理算是比较常见的，所以遇到三姐妹的情况也不少，要想轻松驾驭三姐妹，那就得摸清三姐妹的性格如何，摸清了性格，之后不就是随手拿捏，你说是吧，Hia Hia Hia~

1、大姐 slice

语法： demoString.slice(beginIndex [, endIndex])

slice() 可接收两个参数，其中第二个参数为可选参数。第一个参数指定从字符串的哪个位置开始截取 [注意：开始位置从 0 开始算，不是从 1]，第二个参数则指定到哪个位置截取结束 [ 注意：不包含结束位置的那个字符 ]。如果第二参数没有传，则默认从第一个参数指定的位置开始，截取后面所有的字符。

demoString.slice(2, 8)  // 'llo wo'
demoString.slice(2)     // 'llo world!'
demoString.slice(8, 2)  // ''

当第一个参数比第二个参数大时，结果将返回空字符串，因为开始位置大于结束位置，如上面代码块中的demoString.slice(8, 2)。上面都是的常规操作，下面我们来看看非常规操作，如果我们传入的参数是负数，那么截取的结果会是什么呢？

demoString.slice(-2)      // 'd!'
demoString.slice(0, -2)   // 'hello worl'
demoString.slice(-4, -2)  // 'rl'
demoString.slice(-2, 4)   // ''

当传入负数时，slice会自行的做运算，运算公式为： demoString.length + 负数参数。无论第一个参数还是第二个参数，只要参数是负数都会做此运算。

如代码 demoString.slice(-2) 运算过程如下

1. demoString.slice(demoString.length + (-2))
2. demoString.slice(12 + -2) // demoString的length等于12
3. demoString.slice(10)      // 最终截取结果为 'd!'

2、二姐 substr

语法： demoString.substr(beginIndex [, length])

substr() 可接收两个参数，其中第二个参数为可选参数。第一个参数指定从字符串的哪个位置开始截取 [注意：开始位置从 0 开始算，不是从 1]，第二个参数则指定截取的长度。如果第二参数没有传，则默认从第一个参数指定的位置开始，截取后面所有的字符。

demoString.substr(2, 8)    // 'llo worl'      从第二个位置开始截取8个字符
demoString.substr(2)       // 'llo world!'    从第二个位置开始截取后面所有的字符
demoString.substr(10, 10)  // 'd!'            从第十个位置开始截取10个字符
demoString.substr(14)      // ''              从第十四个位置开始截取后面所有字符

由于 demoString.length === 12 ，所以 demoString.substr(14) 将返回空字符串，因为起始位置超出了索引界限。如大姐一般，如果我们传入的参数是负数，那么二姐的反应又会如何呢？

demoString.substr(-2)      // 'd!'
demoString.substr(-8, 4)   // 'o wo'
demoString.substr(-8, 0)   // ''
demoString.substr(-8, -2)  // ''
demoString.substr(-14)     // 'hello world!'

如果第一个参数是负数，那么该参数指定从字符串的尾部开始算起始位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。

第一个参数为负数时有一种特殊情况，就是当第一个参数为负数时，且这个负数的绝对值大于字符串的 length 时，那么这个负数参数将会被转化为0。 所以 demoString.substr(-14) 的执行结果为 hello world! 因为 -14 的绝对值 Math.abs(-14) 大于 demoString.length = 12，因此 demoString.substr(-14) 等价于 demoString.substr(0)

如果第二个参数是负数，则那么它等价于0，也就是截取 0 个字符，所以如果第二个参数小于或等于0，那么 substr 的执行结果始终返回的是空字符串。

注意，二姐属于私生子，不怎么受待见，为什么呢？因为她不是 javascript 核心语言的一部分，并且ECMAscript 没有对该方法进行标准化，未来可能被移除，因此反对使用它。

3、三妹 substring

语法： demoString.substring(beginIndex [, endIndex])

substring() 可接收两个参数，其中第二个参数为可选参数。第一个参数指定从字符串的哪个位置开始截取 [注意：开始位置从 0 开始算，不是从 1]，第二个参数则指定到哪个位置截取结束 [ 注意：不包含结束位置的那个字符 ]。如果第二参数没有传，则默认从第一个参数指定的位置开始，截取后面所有的字符。

demoString.substring(2)      // 'llo world!'
demoString.substring(2, 8)   // 'llo wo'
demoString.substring(8, 2)   // 'llo wo'
demoString.substring(2, 2)   // ''
demoString.substring(2, 14)  // 'llo world!'    14 大于 length 12, 那么 14 会变为 12 相当于 substring(2, 12)
demoString.substring(-2)     // 'hello world!'  -2将会被转化为 0

三妹的性格比较古怪，要一个一个的分析才行：

1. 当第一个参数等于第二个参数时，直接返回空字符串
2. 当传入两个参数时，substring 会自动将较小的参数当作第一个参数，较大的那个当作第二个参数。意思就是说，当你传入的参数是 demoString.substring(8, 2) 时，substring 会自动转换为 demoString.substring(2, 8)
3. 如果任一参数为负数或者 NaN 时，自动将其转换为 0
4. 如果任一参数大于 demoString.length，则被当作 stringName.length

上面我们对三姐妹的性格分别进行了分析，毕竟是三姐妹，她们有不少的共同之处，比如：她们都可接收两个参数，并且第二个参数都是可选参数；又比如，她们都不会对原始字符串 demoString 进行修改，而是返回新的子集；还有二姐和三妹长的是如此的相像。

但是面对相同的传参，她们的反应又各不相同。至此，我们对三姐妹了解的也差不多了，能不能真的将她们拿下，就看各位好汉自己的本事了，哈哈哈，再见……