点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群
原文链接: https://juejin.cn/post/7439189795614916658
作者授权转载：石小石
需求简介
大家好！前几天实现了这样一个需求：
根据后端images字段返回的图片字符，提取图片key查找图片链接并渲染。
由于后端返回的是用逗号分隔的字符，所以获取图片的key使用split方法非常方便。
if(data.images != null || data.images != undefined){
// 将字符通过split方法分割成数组
const picKeyList = 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（可选）：整数，限制返回的数组的最大长度。如果超过限制，多余的部分将被忽略。
基本用法
使用字符串作为分隔符
const text = "苹果,华为,小米";
const result = text.split(",");
console.log(result);
// 输出: ['苹果', '华为', '小米']
使用正则表达式作为分隔符
const text = "苹果,华为,小米";
const result = text.split(/[,; ]+/); // 匹配逗号、分号或空格
console.log(result);
// 输出: ['苹果', '华为', '小米']
使用限制参数
const text = "苹果,华为,小米";
const result = text.split(",", 2);
console.log(result);
// 输出: ['苹果', '华为'] （限制数组长度为 2）
没有找到分隔符
const text = "hello";
const result = text.split(",");
console.log(result);
// 输出: ['hello'] （原字符串直接返回）
split方法常见踩坑点
空字符串的分割
const result = "".split(",");
console.log(result);
// 输出: [''] （非空数组，包含一个空字符串）
原因：
空字符串没有内容，split() 默认返回一个数组，包含原始字符串。
解决方案：
const result = "".split(",").filter(Boolean);
console.log(result);
// 输出: [] （使用 filter 移除空字符串）
多余分隔符
const text = ",,苹果,,华为,,";
const result = text.split(",");
console.log(result);
// 输出: ['', '', '苹果', '', '华为', '', '']
原因：
连续的分隔符会在数组中插入空字符串。
解决方案：
const text = ",,苹果,,华为,,";
const result = text.split(",").filter(Boolean);
console.log(result);
// 输出: ['苹果','华为']
filter(Boolean) 是一个非常常用的技巧，用于过滤掉数组中的假值。
分割 Unicode 字符
const text = "👍😊👨👩👦";
const result = text.split('');
console.log(result);
// 输出: ['👍', '😊', '👨', '', '👩', '', '👦']
原因：split("") 按字节分割，无法正确识别组合型字符。
解决方案：
const text = "👍😊👨👩👦";
const result = Array.from(text);
console.log(result);
// 输出: ['👍', '😊', '👨👩👦'] （完整分割）
总结
这篇文章通过本人的生产事故，向介绍了split方法使用可能存在的一些容易忽略的bug，希望大家能有所收获。一定要注意split分割空字符会得到一个包含空字符数组的问题！
我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一波👍
