离谱，split方法的设计缺陷居然导致了生产bug！ 点击关注公众号，“技术干货”及时达！ 需求简介大家好，我是石小石！前几天实现了这样一个需求： ?根据后端「images」字段返回的图片字符，提取图片「key」查找图片链接并渲染。 ?由于后端返回的是用「逗号分隔」的字符，所以获取图片的key使用「split方法」非常方便。 if(data.images!=null||data.images!=undefined){ //将字符通过split方法分割成数组 constpicKeyList=data.images.split(",") picKeyList.forEach(key={ //通过图片key查询图片链接 //... }) } 乍一看，代码并没有问题，qa同学在测试环境也验证了没有问题！于是，当晚，我们就推送生产了。 生产事故几天后的一个晚上，我已经睡觉了，突然接到领导的紧急电话，说我开发的页面加载图片后白屏了！来不及穿衣服，我赶紧去排查bug。 ?通过断点排查，发现当后端返回的data.images是空字符“""”时，用split分割空字符，得到的picKeyList结果是 “[""]” ,这导致picKeyList遍历时，内部的 「key是空，程序执行错误」。 ?然后我用控制台验证了一下split分割空字符，我人傻了。 后来，我也成功的为这次生产事故背锅。我也无可争辩，是我没完全搞懂split方法的作用机制。 「ps：宝宝心里苦，为什么后端不直接返回图片的key数组！！为什么！！」 split方法吃一堑，长一智，我决定在复习一下「split方法的使用」，并梳理它的「踩坑点」及可能得解决方案。 语法split() 用于将字符串按照指定分隔符分割成数组 string.split(separator,limit) separator（可选）：指定分隔符，可以是字符串或正则表达式。如果省略，则返回整个字符串作为数组。limit（可选）：整数，限制返回的数组的最大长度。如果超过限制，多余的部分将被忽略。基本用法使用字符串作为分隔符 consttext="苹果,华为,小米"; constresult=text.split(","); console.log(result); //输出:['苹果','华为','小米'] 使用正则表达式作为分隔符 consttext="苹果,华为,小米"; constresult=text.split(/[,;]+/);//匹配逗号、分号或空格 console.log(result); //输出:['苹果','华为','小米'] 使用限制参数 consttext="苹果,华为,小米"; constresult=text.split(",",2); console.log(result); //输出:['苹果','华为']（限制数组长度为2） 没有找到分隔符 consttext="hello"; constresult=text.split(","); console.log(result); //输出:['hello']（原字符串直接返回） split方法常见踩坑点空字符串的分割const result = "".split(","); console.log(result); // 输出: [''] （非空数组，包含一个空字符串） 「原因：」 空字符串没有内容，split() 默认返回一个数组，包含原始字符串。 「解决方案：」 constresult="".split(",").filter(Boolean); console.log(result); //输出:[]（使用filter移除空字符串） 多余分隔符consttext=",,苹果,,华为,,"; constresult=text.split(","); console.log(result); //输出:['','','苹果','','华为','',''] 「原因：」 连续的分隔符会在数组中插入空字符串。 「解决方案：」 consttext=",,苹果,,华为,,"; constresult=text.split(",").filter(Boolean); console.log(result); //输出:['苹果','华为'] filter(Boolean) 是一个非常常用的技巧，用于「过滤掉数组中的假值」。 分割 Unicode 字符consttext="????????????"; constresult=text.split(''); console.log(result); //输出:['??','??','??','?','??','?','??'] 「原因：」 split("") 按字节分割，无法正确识别组合型字符。 「解决方案：」 consttext="????????????"; constresult=Array.from(text); console.log(result); //输出:['??','??','????????']（完整分割） 总结这篇文章通过本人的生产事故，向介绍了split方法使用可能存在的一些容易忽略的bug，希望大家能有所收获。「一定要注意split分割空字符会得到一个包含空字符数组的问题」！ 点击关注公众号，“技术干货”及时达！ 阅读原文