js字符串转数组空字符串返回空数组吗

一、直觉期望与真实表现的认知偏差

在编写业务代码时，许多开发者常有一种直觉假设：既然源字符串是一个没有任何内容的空字符串 ""，那么将其切分成数组后，结果自然应当是元素个数为 0 的空数组 []。

然而，当我们使用最普遍的定界符切分方式时，控制台的输出往往出人意料：

// 示例 1：指定非空定界符切分空字符串
const input = "";
const result = input.split(",");

console.log(result);         // 示例输出: [""]
console.log(result.length);  // 示例输出: 1
console.log(result[0]);      // 示例输出: ""

可以看到，result 并不是一个空数组 []，它的长度是 1，且下标为 0 的元素就是刚才切分的空字符串本身。

而如果使用其他转换方式，结果则完全不同：

// 示例 2：空字符串作为分隔符、展开语法与 Array.from
console.log("".split(""));     // 示例输出: [] (长度为 0)
console.log([...""]);          // 示例输出: [] (长度为 0)
console.log(Array.from(""));   // 示例输出: [] (长度为 0)

二、ECMAScript 规范原理解析：为什么 split 产生 [""]

要彻底理解为什么 "".split(",") 会返回 [""]，需要查阅 ECMAScript 规范中对 String.prototype.split ( separator, limit ) 的算法定义。

在规范定义的抽象操作中，切分过程遵循以下严格逻辑：

1. 空串与空分隔符的特殊判断： 如果目标字符串 S 的长度为 0，并且指定的分隔符 R 也为空字符串 ""，规范算法会直接返回一个空数组 []。这正是 "".split("") 返回 [] 的原因。
2. 非空分隔符的匹配扫描： 当分隔符 R 非空（例如逗号 ","）时，算法开始在字符串 S 中搜索 R 的匹配位置。由于 S 长度为 0，匹配位置 p 无法在字符串内找到任何匹配项。
3. 末尾剩余子串收尾处理： 匹配循环结束后，算法会将从最后一个匹配位置到字符串末尾的剩余子串截取出来，作为最终的元素存入数组结果集。由于此前一次匹配都未发生，剩余的子串就是整个原始字符串（即空字符串 ""）。算法执行 CreateDataPropertyOrThrow(A, "0", "")，最终返回包含该元素的单长度数组 [""]。

三、常见业务场景中的潜在隐患

将 [""] 误认为 [] 在实际业务中具有极强的隐蔽性，常见的破环性场景主要集中在以下三类：

1. 标签或分类解析（Tag List）

用户在表单中未填写任何标签，提交的内容为空字符串 tags = ""。后端或前端直接执行 tags.split(",") 后，数组中含有一个空字符串。页面在渲染标签列表时，会出现一个带有边框和样式的空白气泡；若后续调用接口，还会将空字符串作为 tagId 发送到数据库，引发脏数据写入。

2. 批量 ID 查询与 API 调用

// 示例 3：批量 ID 处理错误范例
const userIdsInput = ""; // 用户未在搜索框输入任何 ID
const idList = userIdsInput.split(",");

if (idList.length > 0) {
  // 误判进入分支！
  // 发送请求: /api/users/batch?ids=
  // 后端接收到 ids=[""]，尝试将 "" 转为数字 ID 时抛出 400 Bad Request
  fetchBatchUsers(idList);
}

3. 循环遍历与数据累加

使用 idList.forEach(...) 或 for (const item of idList) 时，开发者以为空字符串不会执行循环体，但由于 [""] 长度为 1，循环体必然执行一次，且 item 值为 ""，极易引发后续空指针或逻辑分支错误。

四、生产环境安全转数组的 3 种可靠方案

针对定界符切分中可能产生的空字符串陷阱，可以在生产代码中采用以下清晰规范的处理方案：

方案一：前置三元判断 / 短路表达式（适合简单场景）

在执行 split 之前，先显式检查字符串是否存在且非空。若为空则直接返回空数组：

// 示例 4：前置防御判断
function parseListSimple(rawStr) {
  // 兼顾 null、undefined 以及纯空白字符串
  if (!rawStr || !rawStr.trim()) {
    return [];
  }
  return rawStr.split(",");
}

// 示例运行
console.log(parseListSimple(""));          // 示例输出: []
console.log(parseListSimple("a,b,c"));     // 示例输出: ["a", "b", "c"]

方案二：链式过滤 filter(Boolean)（兼顾空串与连续逗号）

通过在 split 之后链式调用 .filter(Boolean)，不仅能将 "".split(",") 产生的 [""] 滤空，还能顺带剔除如 "a,,b" 中因连续逗号产生的冗余空项：

// 示例 5：链式过滤
const input = "";
const result = input.split(",").filter(Boolean);

console.log(result);        // 示例输出: []
console.log(result.length); // 示例输出: 0

方案三：封装通用健壮的切分工具函数（推荐工程级实践）

在团队项目中，通常建议封装统一的处理函数，同时兼顾输入类型防御、空串清洗以及各元素首尾空格去除（trim）：

// 示例 6：通用安全切分函数
function safeSplit(str, delimiter = ",") {
  if (typeof str !== "string" || !str.trim()) {
    return [];
  }
  return str
    .split(delimiter)
    .map(item => item.trim())
    .filter(item => item.length > 0);
}

// 示例运行检验
console.log(safeSplit(""));              // 示例输出: []
console.log(safeSplit("  "));            // 示例输出: []
console.log(safeSplit(null));            // 示例输出: []
console.log(safeSplit(" vue , react, ")); // 示例输出: ["vue", "react"]

五、常用方法行为对照与选型决策

为了在不同场景下做出合理选择，下表总结了 JavaScript 中主流字符串转数组手段在接收空字符串时的具体表现：