JavaScript怎么使用split按分隔符切割字符串

作者：异步漫步

时间：2026-11-03

深入讲解 JavaScript 中 String.prototype.split() 方法的完整用法。涵盖按单字符、多字符和正则表达式切割字符串、限制分割次数、Emoji 特殊字符处理以及 4 种常见边界坑点排查。

文章目录

方法归属：String.prototype.split() 返回值：Array 运行环境：所有主流浏览器与 Node.js

在 JavaScript 中，将一个字符串按照特定标识拆分为多个片段，最直接且标准的方法是调用字符串实例的 split() 方法。它接受一个分隔符（可以是普通字符、长子串或正则表达式）和一个可选的截取数量限制参数，将匹配到的分隔符全部剔除，将其两侧的文本依次存入新数组返回，且绝不会修改原字符串的内容。

图 1：split() 方法的基本执行机制与数据流向模型

一、split() 的基础语法与单字符切割

split() 是挂载在 String.prototype 上的原型方法。其标准调用语法如下：

str.split([separator[, limit]])

其中 separator 代表切分边界。如果省略该参数，split() 不会对文本做任何切割，而是直接返回一个仅包含该原始字符串的单元素数组。

1. 按单个常见字符（逗号、破折号、空格）切割

这是日常开发中最普遍的需求，例如解析后端传来的逗号分隔 ID 串、CSV 行数据或破折号日期：

// 示例 1：按逗号切分标签
const tagString = "javascript,typescript,vue,react";
const tagList = tagString.split(",");
console.log(tagList);
// 示例输出: ["javascript", "typescript", "vue", "react"]

// 示例 2：按破折号切分年月日
const dateStr = "2026-11-01";
const dateParts = dateStr.split("-");
console.log(dateParts);
// 示例输出: ["2026", "11", "01"]

// 示例 3：按单个空格切分英文单词
const sentence = "Learn JavaScript step by step";
const words = sentence.split(" ");
console.log(words);
// 示例输出: ["Learn", "JavaScript", "step", "by", "step"]

2. 按多字符子串切割

分隔符并不局限于单个字符，它可以是任意长度的固定子串。例如日志输出中经常使用 " -> " 或 "::" 作为模块与事件的分隔标识：

const logEntry = "AuthService -> LoginController -> VerifyToken";
const nodes = logEntry.split(" -> ");
console.log(nodes);
// 示例输出: ["AuthService", "LoginController", "VerifyToken"]

此时 split() 会把匹配到的整个 " -> " 子串当作切割边界予以剥离，不会误伤其中的空格或箭头字符。

二、字符串扫描与切分提取的执行细节

理解 split() 在底层是如何移动游标、比对边界并构造结果数组的，有助于写出性能更优、更具健壮性的数据清洗代码。

图 2：split() 遍历扫描、匹配分隔符与切片入栈的 4 个步骤

正如上图所示，引擎在执行切分时遵循以下固定步骤：

游标定位：内部维护一个搜寻起始偏移量（初始为 0）和一个空结果数组。
模式匹配：从当前偏移量向后搜索第一个与 separator 完全一致的子串位置。
切片入栈：使用类似于 str.slice(start, matchIndex) 的操作提取子串压入结果数组。
游标跨越：将起始偏移量推进到匹配项之后（即 matchIndex + separator.length），继续重复搜索直至字符串末尾。
尾部封包：当字符串扫描触底时，将游标后剩余的所有字符作为最后一个元素压入数组并返回。

三、使用 limit 参数限制返回数组的长度

split() 允许传入第二个非负整数参数 limit，用来限定最终返回数组中最多包含多少个分割元素。

const path = "home/user/documents/projects/web";

// 仅获取前 2 个片段
const topLevels = path.split("/", 2);
console.log(topLevels);
// 示例输出: ["home", "user"]

// 当 limit 为 0 时，返回空数组
const emptyResult = path.split("/", 0);
console.log(emptyResult);
// 示例输出: []

注意截断行为：limit 参数并不是让字符串在切满指定次数后把剩下的内容作为一个整体保留。达到 limit 上限后，引擎会直接停止后续匹配并丢弃剩余全部内容。如果你需要“切出前 N 个，剩下作为一个整体保留”，应该结合 indexOf() 或正则来处理，而不是依赖 limit。

四、使用正则表达式作为复合分隔符

现实中的文本往往并不规范。例如一段待清洗的数据可能混杂了中英文逗号、分号以及多个连续空格。此时传入普通字符串无法一次性切分，必须使用正则表达式。

1. 匹配多重与不规则空白分隔符

使用字符集合 [ ,;]+ 或正则元字符 \s+，可以轻松把任意数量的空白和标点统一切割：

// 原始文本中同时存在逗号、分号及长短不一的空格
const rawInput = "apple, banana; orange   grape,pear";

// 使用正则 [ ,;]+ 匹配一个或多个逗号、分号或空格
const fruits = rawInput.split(/[ ,;]+/);
console.log(fruits);
// 示例输出: ["apple", "banana", "orange", "grape", "pear"]

2. 捕获括号在 split 中的特殊行为

正则表达式中若包含捕获括号 (...)，split() 会把匹配到的分隔符本身也一并追加到结果数组中。这一特性在实现公式解析器或词法分析器时非常有用。

图 3：常规正则切分与带捕获括号正则切分的输出结构差异

const formula = "100+50-25*4";

// 1. 无捕获组：纯抽取数字
const numbers = formula.split(/[\+\-\*\/]/);
console.log(numbers);
// 示例输出: ["100", "50", "25", "4"]

// 2. 带捕获组：运算符同时被保留进数组
const tokens = formula.split(/([\+\-\*\/])/);
console.log(tokens);
// 示例输出: ["100", "+", "50", "-", "25", "*", "4"]

如果你的正则需要括号来组织逻辑（例如 /(?:abc|def)/）但又不希望分隔符混入结果数组中，请务必使用非捕获括号 (?:...)。

五、空字符串切分与 Emoji/Unicode 特殊字符考量

把分隔符指定为空字符串 ""，常被用于将文本逐字拆分成单个字符组成的数组。例如：

const str = "hello";
console.log(str.split(""));
// 示例输出: ["h", "e", "l", "l", "o"]

警惕 Emoji 与多字节 Unicode 乱码：split("") 是按照 UTF-16 代码单元（Code Units）进行物理切割的。现代表情符号（如 👍、👨‍👩‍👧）或罕见汉字占用了 4 个字节（即一对代理对 Surrogate Pair）。使用 split("") 会将代理对硬生生拆开，导致得到未配对的代理区编码片段。

在需要安全地按自然字符切割的现代 JavaScript 项目中，推荐使用展开运算符或 Array.from() 代替 split("")：

const textWithEmoji = "Hi👍JS";

// 错误示范：split("") 破坏代理对
console.log(textWithEmoji.split(""));
// 示例输出: ['H', 'i', '\uD83D', '\uDC4D', 'J', 'S'] (长度变为 6，表情乱码)

// 推荐方案：Array.from 或 [...str] 正确识别 Unicode 码点
console.log(Array.from(textWithEmoji));
// 示例输出: ['H', 'i', '👍', 'J', 'S'] (长度为 5，表情完整)

console.log([...textWithEmoji]);
// 示例输出: ['H', 'i', '👍', 'J', 'S']

六、4 种最容易踩坑的边界场景与应对方案

在处理外部用户输入或动态接口时，各种边界值容易导致 split() 返回出人意料的结果。

图 4：4 种典型边界情况与返回结果对照分析

1. 空字符串被切分时返回 `[""]` 而不是 `[]`

初学者最常犯的错误是认为 "".split(",") 会得到一个长度为 0 的空数组。事实上，根据 ECMAScript 规范，它返回的是包含一个空字符串元素的数组 [""]（length 为 1）。

因此，如果你使用 if (arr.length > 0) 来判断是否有数据，就会命中假阳性。正确的防御方式是在切分前先做空值检查：

function parseTags(input) {
  if (!input || input.trim() === "") {
    return [];
  }
  return input.split(",");
}

console.log(parseTags("")); 
// 示例输出: []

2. 首尾与连续分隔符产生的大量空串

当字符串开头、结尾包含分隔符，或者中间出现连续分隔符时（如 ",apple,,banana,"），split() 会忠实地将两两分隔符之间的“无字符区域”提取为 ""：

const dirtyList = ",apple,,banana,";
const rawArray = dirtyList.split(",");
console.log(rawArray);
// 示例输出: ["", "apple", "", "banana", ""] (共 5 项)

// 实用对策：链式调用 filter(Boolean) 快速剔除无效空项
const cleanArray = dirtyList.split(",").map(s => s.trim()).filter(Boolean);
console.log(cleanArray);
// 示例输出: ["apple", "banana"] (共 2 项)

七、字符串分割技术选型决策

为了在不同业务场景下快速做出正确的选择，可以参考下面的选型决策树：

图 5：JavaScript 字符串切分技术选型与最佳实践决策树

对照总结清单：

需求场景	推荐写法	典型输出结果	核心优势与说明
标准固定分隔符	`str.split(",")`	`["a", "b", "c"]`	语法简单直观，单字符匹配性能最优
连续或多种混合标点	`str.split(/[,;\s]+/)`	`["a", "b", "c"]`	自动合并相邻分隔符，避免产生空字符串项
需要连同分隔符一同保留	`str.split(/([+\-*/])/)`	`["1", "+", "2"]`	正则捕获组特性，适合构建轻量词法解析
逐字拆分（含 Emoji/复合符号）	`Array.from(str)`	`["A", "👍", "B"]`	避免 `split("")` 对代理对字符造成破坏
含有多余空白与空项的脏数据	`str.split(',').filter(Boolean)`	`["valid1", "valid2"]`	快速过滤首尾及连续空项，保证数组纯净

八、总结

在 JavaScript 中按分隔符切割字符串首选 split() 方法。对于简单明确的固定符号直接传入字符串字面量；对于复杂排版和混杂标点改用正则表达式；当遇到可能包含 Emoji 的逐字切分时，改用 Array.from() 或扩展运算符。同时牢记 "".split(",") 会返回 [""] 这一特殊机制，在切分脏数据时结合 .filter(Boolean) 进行过滤，即可保证代码的高效与健壮。