你不知道的 `split()`

说到字符串的 split() 方法，大家一定不会感到陌生，很多时候，我们都用它切分字符串，比如：

const str = 'a,b,c'
const result = str.split(',')
// ['a', 'b', 'c']

在大多数情况下，我们用 split() 做的都是这种简单的切分，以至于我对 split() 的认知也一直停留在这种简单的用法上（很有可能你也是👀）。但实际上，split() 能做的事远不如此。

`split()` 的参数

先来看下 MDN 给出的 split() 调用方式：

split(separator)
split(separator, limit)

也就是说，split() 支持两个参数：

1. `sperator`

切分器，表示应该从什么地方切分字符串。
值的注意的是，该参数除了能传字符串，还支持其他两种参数：

正则表达式
例如有一段字符串 "hello,world;你好,世界", 文字中既有逗号，又有分号，那么该如何对字符串进行切分呢？这种情况下，我们可以使用正则表达式进行切分
```
const str = "hello,world;你好,世界"
const result = str.split(/[,;]+/)
// ["hello", "world", "你好", "世界"]
```
一个实现了 Symbol.split 方法的对象
分割器可以是一个包含 Symbol.split 的方法，该方法的第一个参数就是调用 split() 的字符串，第二个参数就是 split() 方法的第二个参数，限制返回数组的长度：
```
const sperator = {
    [Sybmol.split](str, limit) {
        // ...
    }
}
```

2. `limit`

可选参数，表示返回结果的长度限制
例如有一段字符串 "hello,world,你好,世界", 如果我们切分后只想保留英文部分，便可以通过该参数限制返回结果的长度：

  const str = "hello,world,你好,世界"
  const result = str.split(',', 2)
  // ["hello", "world"]

至此，你已经是一个成熟的 split() 老司机了，接下来，让我来考考你😈

一个具体的例子

现有字符串"hello1world22你好335世界"，思考下面的问题：

如何以数字切分该字符串，得到 ["hello", "world", "你好", "世界"]?
我们知道 sperator 可以是一个正则表达式，所以可以通过 /\d+/ 进行切分
```
  const str = "hello1world22你好335世界"
  const result = str.split(/\d+/)
  // ["hello", "world", "你好", "世界"]
```
如何在结果中包含切分部分，即 ["hello", "1", "world", "22", "你好", "335", "世界"] ?

这里涉及到正则表达式中的一个概念——捕获组，即正则表达式中的括号。这里不对捕获组深挖，先演示一个简单的例子，看下捕获组会对匹配结果产生什么样的影响：
```
const str = "哈哈你好小明哈哈"

const regex1 = /你好小明/
const result1 = str.match(regex1)
// ["你好小明"]

const regex2 = /你好(小明)/
const result2 = str.match(regex2)
// ["你好小明", "小明"]
```
可以看到，第二个正则表达式 regex2 中包含一个捕获组，导致匹配的结果除了完整匹配之外，还包含捕获组匹配的部分。同理，如果想在 split() 的结果中包含切分部分，也需要使用捕获组，把正则表达式改为 /(\d+)/
```
const str = "hello1world22你好335世界"
const result = str.split(/(\d+)/)
// ["hello", "1", "world", "22", "你好", "335", "世界"]
```
这种使用方法在某些场景下有妙用，比如我的上一篇文章如何给字符串中的数字添加样式？，评论区中有位同学就利用这种切分方式巧妙的简化了问题。感兴趣的同学可以去看下👀

结语

对于一些更复杂的场景，可以自定义一个实现了 Symbol.split 方法的对象，实现更复杂的切分。
嗯，更复杂的场景…, 比如？我暂时也没想到一个不得不用split()，同时也能达到很好的演示效果例子😅。感兴趣的同学可以看下 MDN 网站上的例子

希望这篇文章能帮助你对 split() 有了新的理解，如果你喜欢这篇文章，记得点赞收藏。

原文链接：https://juejin.cn/post/7344245516023676967 作者：OneMoreJack

你不知道的 `split()`

split() 的参数

1. sperator

2. limit

一个具体的例子

结语

相关推荐

发表回复

`split()` 的参数

1. `sperator`

2. `limit`