JS split切割后出现空字符串怎么过滤

图 0：JavaScript 字符串切分后空字符串清洗流整体概览

一、为什么 split 切割后会产生空字符串？

很多初学者在调用 str.split(',') 时，会直觉地认为“没有字符的位置就不应该产生数组元素”。然而在 ECMAScript 规范定义中，split 并不是“提取有意义的单词”，而是根据分隔符严格把原字符串切成若干段，每一个切分点两边的内容都会被完整保留为独立的数组元素。

具体来看，空字符串通常在以下三种典型场景下生成：

• 首尾带有分隔符：例如 ",apple,banana,"。第一个逗号左侧与最后一个逗号右侧都没有字符，因此切分出来的首项和尾项均为长度为 0 的空字符串 ""。
• 连续出现多个分隔符：例如 "apple,,banana"。两个相邻逗号之间的字符索引偏移差为 0，切分出来的中间元素同样为 ""。
• 空字符串自身执行 split：特别注意 "".split(",")，由于没有任何逗号被匹配到，它会把整个空串原样作为数组的唯一元素返回，得到 [""]，长度为 1，而不是空数组 []。

图 1：split 切割产生空字符串的三种核心场景图解

二、核心解法：使用 filter(Boolean) 快速过滤

针对已经切割完毕的数组，最常用且写法最简洁的解决方案就是链式调用数组的 filter 方法，并将 JavaScript 内置的 Boolean 构造函数作为判定依据：

// 示例 1：基础使用 filter(Boolean) 过滤空串
const rawStr = ",apple,,banana,orange,";
const result = rawStr.split(',').filter(Boolean);

console.log(result);
// 示例输出: ["apple", "banana", "orange"]
console.log(result.length);
// 示例输出: 3

原理解释：Boolean 在这里起到了什么作用？

Array.prototype.filter 要求传入一个回调函数 (element, index, array) => boolean。当回调返回 true 时元素被保留，返回 false 时被剔除。

在 JavaScript 中，内置的 Boolean 函数如果直接作为函数调用（即 Boolean(value)），会将传入的值进行类型转换并返回布尔值：

• 空字符串 "" 属于 JavaScript 中的虚值（Falsy），Boolean("") === false；
• 非空字符串（如 "apple"）属于真值（Truthy），Boolean("apple") === true。

因此，.filter(Boolean) 本质上等价于 .filter(item => Boolean(item))，所有的 "" 都会因为布尔转值为 false 被直接丢弃，仅保留非空项。

图 2：使用 filter(Boolean) 逐项判定与剔除空串的操作流程

三、进阶场景：纯空格字符串的处理（结合 trim）

在真实业务（例如用户表单输入或 CSV 导入）中，字符串往往不仅包含纯粹的 ""，还可能包含由空格、制表符组成的无效空白项，例如 ",apple, ,banana,"。

此时如果直接使用 filter(Boolean)，就会出现漏网之鱼：

// 常见陷阱：包含空格的字符串属于真值
console.log(Boolean("   ")); // 示例输出: true

const input = ",apple,   ,banana,";
const badFilter = input.split(',').filter(Boolean);
console.log(badFilter);
// 示例输出: ["apple", "   ", "banana"]（纯空格项依然残留）

因为 " " 的长度为 3，并非空字符串，所以 Boolean(" ") 返回 true。为了彻底清除此类无效项并顺带去除有效项前后的冗余空格，应该配合 trim() 先进行清洗：

// 推荐方案：结合 map(s => s.trim()) 深度过滤
const input = ",apple,   ,banana,";

const cleanResult = input
  .split(',')
  .map(item => item.trim())
  .filter(Boolean);

console.log(cleanResult);
// 示例输出: ["apple", "banana"]

这段代码的执行逻辑是：map(item => item.trim()) 会先把 " " 转换为纯空串 ""，然后再经由 filter(Boolean) 统一将所有空串移除，同时还能确保 " apple " 变成整洁的 "apple"。

图 3：纯空串与纯空格串在判定机制下的关键差异与应对策略

四、源头规避：使用正则表达式进行分割

如果切割条件本身存在不确定性（例如分隔符前后可能伴随任意空格，或者允许连续分隔符），我们也可以直接在 split 中传入正则表达式，从源头上减少空字符串的生成。

1. 切割连续空白字符

当需求是按空格分割一句话或一行字符时，不要使用 str.split(' ')，因为多个连续空格会切出大量 ""。此时推荐先对原字符串两端进行 trim()，再配合正则 /\s+/：

// 示例：按任意连续空格切分
const sentence = "   JavaScript    is   great   ";
const words = sentence.trim().split(/\s+/);

console.log(words);
// 示例输出: ["JavaScript", "is", "great"]

\s+ 会将一个或多个连续的空白符号合并视作单一分隔符，只要通过 trim() 提前剥除首尾空格，切分后就完全不会产生空字符串。

2. 多重分隔符与连续符号合并

若字符串允许逗号、分号及空格混合分割，可以使用字符集正则：

// 示例：支持逗号、分号及空格混合切割
const complexStr = "apple, , banana; ; orange";
const items = complexStr.split(/[,;\s]+/).filter(Boolean);

console.log(items);
// 示例输出: ["apple", "banana", "orange"]

五、方案选型与对比总结

根据数据来源的可靠性以及分隔符的特征，我们可以选择最合适的代码方案：

图 4：JavaScript split 过滤空字符串策略决策树

六、边界问题与验证要点

在实际工程代码中，建议牢记以下两个易错边界条件：

1. 对空字符串调用的防御判断： 正如前文所述，"".split(",") 会输出 [""]。如果随后没有加 .filter(Boolean)，数组长度为 1，在遍历或判断 arr.length > 0 时就会产生逻辑错误。因此，涉及动态变量分割时，要么前置判断 if (!str) return [];，要么务必链式添加 .filter(Boolean)。
2. 长文本高频执行的性能权衡： .split(',').filter(Boolean) 会产生一次中间数组创建和一次全量过滤，这在绝大多数前端业务和接口数据处理场景中耗时仅为微秒级，完全可以忽略。在极少数超大规模文本（如几十万行日志解析）中，若追求极限内存占用，可采用单次 while 循环结合 indexOf 或手动指针收集非空片段。