Js字符串截取三姐妹：slice()，substr()，substring()

您所在的位置：网站首页 › js字符串切割 › Js字符串截取三姐妹：slice()，substr()，substring()

Js字符串截取三姐妹：slice()，substr()，substring()

2023-10-02 23:09| 来源: 网络整理| 查看: 265

通用示例代码，文章后面用到 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

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

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

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

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

【本文地址】

Js字符串截取三姐妹：slice()，substr()，substring()

Js字符串截取三姐妹：slice()，substr()，substring()

今日新闻

推荐新闻