说到字符串的 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