JS字符串转数组：split()方法详解与正则分隔技巧

图 0：JavaScript 字符串转数组核心机制概览

在 JavaScript 开发中，将字符串拆分为数组是最常见的文本解析需求之一，例如解析用户输入的标签列表、处理 CSV 格式数据、解析 URL 路径参数或提取富文本中的有效标记。原生提供的 String.prototype.split() 是完成该任务最直接、最核心的方法。它既支持简单的单字符字面量切分，也能结合正则表达式实现复杂符号匹配与格式容错。本文将系统拆解 split() 的执行机制、核心参数规则、常见边界陷阱，并深入演示正则表达式在多样化切分场景下的实用技巧。

一、split() 基础语法与核心参数机制

split() 方法用于通过指定的分隔符将一个字符串分割成子字符串数组，并返回这个新数组。原字符串不会被修改（保持字符串的不可变性）。

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

1. separator（分隔符参数）

separator 指定了拆分字符串的位置标识，可以是普通字符串或正则表达式：

• 省略或传入 undefined：原字符串不会被分割，直接返回包含原字符串单个元素的数组，即 [str]。
• 传入空字符串 ""：将字符串逐字符拆开，每个字符作为一个独立的数组元素。
• 传入普通子串：以该子串为边界进行精确匹配切割，匹配到的子串本身不保留在数组中。
• 传入正则表达式：按照正则规则进行模式匹配切分，支持模糊匹配与多种符号组合。

2. limit（结果长度限制参数）

limit 是一个非负整数，用来限定返回数组中元素的最大数量。当切分出的子串数量达到 limit 时，切分操作立即停止。

const text = "apple,banana,orange,grape";

// 基础切分：返回全部 4 项
const listAll = text.split(",");

// 传入 limit = 2：仅截取前 2 项，后续项丢弃
const listTwo = text.split(",", 2);

// 未传分隔符：原字符串整体作为单元素
const listOne = text.split();

图 1：String.prototype.split() 内部执行生命周期与流程步骤

二、普通字符串分隔的边界行为与关键机制对比

在使用普通的字符串字面量作为分隔符时，有几类看似不起眼却极易引发线上 Bug 的边界场景需要特别注意。

1. 首尾分隔符与连续分隔符的空字符串陷阱

当原字符串的开头、结尾包含分隔符，或者中间出现连续的分隔符时，split() 会在对应位置生成空字符串 "" 项：

const rawCsv = ",name,,age,";
const result = rawCsv.split(",");

如果业务逻辑只想要有意义的数据，必须在切分后结合 filter(Boolean) 进行后置清洗，或者改用下文介绍的正则表达式切分技巧。

2. 关键机制对比：split('') 与展开运算符 [...str] 处理 Unicode 代理对

许多教程推荐使用 str.split('') 来将文本打散为单个字符数组。然而在现代前端应用中，用户输入经常包含表情符号（Emoji）或生僻字，这两种实现方式在相同输入条件下存在本质差异。

• 方式 A：str.split('')：基于底层 UTF-16 代码单元（Code Unit）进行截取。JavaScript 字符串内部每个单元为 16 位（2 字节）。常见的 ASCII 与基础汉字只需要一个代码单元；而 Emoji（如 🚀、👨‍💻）和部分生僻字属于辅助平面字符，占用 4 个字节，必须由一个“高位代理（High Surrogate）”和一个“低位代理（Low Surrogate）”成对表示。split('') 会机械地将这两个单元强行切断，造成代理对损坏，产生两个无意义的乱码项。
• 方式 B：[...str] 或 Array.from(str)：遵循 ES6 的 Unicode 码点（Code Point）迭代协议。迭代器会自动识别并维护完整的代理对，将其作为一个不可分割的字元整体产出。

const greeting = "Hi 🚀";

// 方式 A：split('') 导致代理对断裂
const broken = greeting.split("");

// 方式 B：展开运算符基于 Unicode 码点安全拆解
const safeSpread = [...greeting];
const safeArrayFrom = Array.from(greeting);

图 2：split('') 与 Unicode 码点迭代器处理代理对字符的底层机制对比

三、正则表达式切分实战技巧

当分隔模式具有多样性、不可预测性或需要容错时，正则表达式是释放 split() 威力的最佳工具。

技巧 1：应对连续多空白字符（/\s+/）

在解析命令行参数、用户填写的标签或从日志文件中提取字段时，词与词之间的空格数量往往并不固定，还可能夹杂制表符 。如果传入普通单空格 split(' ')，每一个连续空格都会生成一个多余的空项。改用 /\s+/ 可以将任意长度的连续空白视为单一分隔符整体处理：

const logLine = "2026-10-31   INFO   user_login	200";

// 普通空格切分：包含多余空项
const badSplit = logLine.split(" ");

// 正则空白集与量词：自动折叠任意空白与制表符
const cleanSplit = logLine.split(/\s+/);

技巧 2：处理混杂分隔符与周边空白清洗

在国际化或宽松输入的表单场景中，用户可能会随手输入英文逗号 ,、中文逗号 ，、分号 ; 或竖线 |，且符号两端常带有随机空格。使用字符集结合量词能够一步完成“多符号支持 + 两侧去空白”：

const rawTags = "JavaScript , CSS ; HTML ； React | Vue";

// 匹配中英文逗号、分号、竖线，并自动吞噬符号两旁的任意空白
const tags = rawTags.trim().split(/\s*[,;，；|]\s*/);

技巧 3：利用捕获括号保留分隔符本身

默认情况下，无论用字符串还是正则，作为分隔符的文本都会被剔除。但是在词法解析、数学算式求值或模板引擎中，我们往往需要同时保留操作符与操作数。

根据 ECMAScript 规范，如果 split() 传入的正则表达式中包含捕获圆括号 (pattern)，那么每次匹配成功后，捕获组内的内容会被依次推入结果数组中，与切片交替排列。如果不需要保留，而仅需在正则中表达逻辑分组，则应使用非捕获组 (?:pattern)。

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

// 方案 A：普通非捕获，仅提取数字
const numbersOnly = formula.split(/[+\-*\/]/);

// 方案 B：使用捕获括号 ()，将操作符一并保留至产物数组
const tokens = formula.split(/([+\-*\/])/);

图 3：正则表达式捕获括号与非捕获括号在 split 中的切分行为机制

技巧 4：零宽断言在特定位置切分（不消耗字符）

如果希望在特定特征的位置切开字符串，但又不能吃掉任何字符（例如驼峰命名转单词），可以利用正则表达式的正向前瞻断言 (?=...)：

const camelName = "userNameAndUserId";

// 在每个大写字母前的位置进行切割，零宽匹配不消耗大写字母本身
const words = camelName.split(/(?=[A-Z])/);

四、方案对比与选型决策指南

为了在实际业务开发中兼顾代码可读性与执行效率，下表总结了各类常见需求的推荐实现方案：

图 4：JavaScript 字符串转数组常用方案与技术选型总结

综上所述，String.prototype.split() 是一个简单却内涵丰富的 API。在日常开发中，针对固定字符首选普通字符串切分以保证极致性能；涉及未知输入与格式容错时，灵活运用正则表达式的字符集、量词与捕获机制能够大幅减少后续的清洗代码；而当任务涉及单字符逐字遍历且包含 Unicode 字符时，采用 ES6 迭代器规范才是杜绝字符损坏的最佳实践。