你不知道的 `split()`

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

js 复制代码
const str = 'a,b,c'
const result = str.split(',')
// ['a', 'b', 'c']

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

split() 的参数

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

js 复制代码
split(separator)
split(separator, limit)

也就是说,split() 支持两个参数:

1. sperator

切分器,表示应该从什么地方切分字符串 。

值的注意的是,该参数除了能传字符串,还支持其他两种参数:

  • 正则表达式

    例如有一段字符串 "hello,world;你好,世界", 文字中既有逗号,又有分号,那么该如何对字符串进行切分呢?这种情况下,我们可以使用正则表达式进行切分

    js 复制代码
    const str = "hello,world;你好,世界"
    const result = str.split(/[,;]+/)
    // ["hello", "world", "你好", "世界"]
  • 一个实现了 Symbol.split 方法的对象

    分割器可以是一个包含 Symbol.split 的方法,该方法的第一个参数就是调用 split() 的字符串,第二个参数就是 split() 方法的第二个参数,限制返回数组的长度:

    js 复制代码
    const sperator = {
        [Sybmol.split](str, limit) {
            // ...
        }
    }

2. limit

可选参数,表示返回结果的长度限制

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

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

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

一个具体的例子

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

  1. 如何以数字切分该字符串,得到 ["hello", "world", "你好", "世界"]?

    我们知道 sperator 可以是一个正则表达式,所以可以通过 /\d+/ 进行切分

    js 复制代码
      const str = "hello1world22你好335世界"
      const result = str.split(/\d+/)
      // ["hello", "world", "你好", "世界"]
  2. 如何在结果中包含切分部分, 即 ["hello", "1", "world", "22", "你好", "335", "世界"] ?

    这里涉及到正则表达式中的一个概念------捕获组,即正则表达式中的括号。这里不对捕获组深挖,先演示一个简单的例子,看下捕获组会对匹配结果产生什么样的影响:

    js 复制代码
    const str = "哈哈你好小明哈哈"
    
    const regex1 = /你好小明/
    const result1 = str.match(regex1)
    // ["你好小明"]
    
    const regex2 = /你好(小明)/
    const result2 = str.match(regex2)
    // ["你好小明", "小明"]

    可以看到,第二个正则表达式 regex2 中包含一个捕获组,导致匹配的结果除了完整匹配之外,还包含捕获组匹配的部分。同理,如果想在 split() 的结果中包含切分部分,也需要使用捕获组,把正则表达式改为 /(\d+)/

    vbscript 复制代码
    const str = "hello1world22你好335世界"
    const result = str.split(/(\d+)/)
    // ["hello", "1", "world", "22", "你好", "335", "世界"]

    这种使用方法在某些场景下有妙用,比如我的上一篇文章如何给字符串中的数字添加样式?,评论区中有位同学就利用这种切分方式巧妙的简化了问题。感兴趣的同学可以去看下👀

结语

对于一些更复杂的场景,可以自定义一个实现了 Symbol.split 方法的对象,实现更复杂的切分。

嗯,更复杂的场景..., 比如?我暂时也没想到一个不得不用split(),同时也能达到很好的演示效果例子😅。感兴趣的同学可以看下 MDN 网站上的例子

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

相关推荐
风骏时光牛马11 分钟前
大模型综合能力多维评测:性能、逻辑与落地表现对比
前端
liuchangng19 分钟前
React 19 + Vite 6 实战:从教材 PDF 到 866 词间隔重复单词 App
前端·react.js·pdf·vite·开源项目
Dwzun33 分钟前
基于SpringBoot3+Vue3的油莎豆种植管理系统
java·前端·vue.js·spring boot·后端·python·计算机网络
小码哥_常6 小时前
一套自己部署的 IM,客户端是同一份 Flutter
前端·后端
蜗牛攻城狮9 小时前
微前端四大方案选型对比与最佳实践:qiankun、micro-app、wujie、Module Federation
前端·微前端·qiankun·前端架构·micro-app·wujie
她说可以呀10 小时前
Vue插槽
前端·javascript·vue.js
qq_4480111610 小时前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
aixingpan10 小时前
aixingpan.cn API开发文档:前端查询夏令时和时区接口指南
前端·php
2601_9583529011 小时前
23.5×19mm 换掉一整条音频链?|A-68 集成了什么:ADC / DAC / 24.576MHz 时钟 / AEC / 波束降噪,主控仅需 6 根线
前端·音视频·ai降噪·回声消除·语音模块
2分钟速写快排11 小时前
ggg! 潜行摸鱼被 Trae 爆改成 3D!
人工智能·程序员·数据可视化