离谱,split方法的设计缺陷居然导致了生产bug!

科技   2024-11-27 22:42   福建  
需求简介
大家好前几天实现了这样一个需求:

根据后端「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分割空字符会得到一个包含空字符数组的问题」


前端工匠
我是浪里行舟,Github博客6000+star作者,掘金、CSDN社区活跃作者,致力于打造一系列能够帮助前端工程师提高的优质文章。
 最新文章