这个问题问得很实在 👍
JS 里“字符串 → 数组”不是只有一种方式，而是看你想怎么拆。我给你做一份从基础到进阶、从最常用到最容易踩坑的完整指南。
JavaScript 将字符串转换为数组的实现方式（全景版）
一、最常用：split()（99% 业务首选）
1️⃣ 按指定字符拆分
const str = "a,b,c";
const arr = str.split(",");
console.log(arr); // ["a", "b", "c"]
常见分隔符
"," // CSV
"|" // 管道
" " // 空格
"\n" // 换行
2️⃣ 按空字符拆分（逐字符）
"hello".split("");
// ["h", "e", "l", "l", "o"]
⚠️ 对 emoji / 部分 Unicode 字符不安全（后面说）
3️⃣ 使用正则拆分（进阶）
const str = "a, b; c|d";
str.split(/[,;|\s]+/);
// ["a", "b", "c", "d"]
二、ES6 推荐：扩展运算符 ...（更语义化）
[..."hello"];
// ["h", "e", "l", "l", "o"]
✅ 比 split("") 更安全
✅ 支持大多数 Unicode 字符
三、Array.from()（可控性最强）
Array.from("hello");
// ["h", "e", "l", "l", "o"]
带映射（一步到位）
Array.from("123", Number);
// [1, 2, 3]
四、按“单词”拆分（真实业务高频）
const str = " Hello world JS ";
str.trim().split(/\s+/);
// ["Hello", "world", "JS"]
五、字符串本身是“数组字面量 / JSON”时
1️⃣ JSON 字符串（正确姿势）
const str = '["a","b","c"]';
const arr = JSON.parse(str);
// ["a", "b", "c"]
❌ 千万不要用 eval
2️⃣ 逗号字符串 → 数字数组
"1,2,3".split(",").map(Number);
// [1, 2, 3]
六、特殊需求：按字符但支持 emoji
❌ 错误方式
"👍👍".split("");
// ["�", "�", "�", "�"]
✅ 正确方式
[..."👍👍"];
// ["👍", "👍"]
Array.from("👍👍");
// ["👍", "👍"]
七、性能 & 适用场景对比
| 方式 | 是否推荐 | 适用场景 |
|---|---|---|
split() | ⭐⭐⭐⭐⭐ | 分隔字符串 |
split("") | ⚠️ | ASCII |
[...str] | ⭐⭐⭐⭐ | 字符级 |
Array.from() | ⭐⭐⭐⭐ | 字符 + 映射 |
| 正则 split | ⭐⭐⭐⭐ | 复杂规则 |
JSON.parse | ⭐⭐⭐⭐ | JSON 字符串 |
eval | ❌ | 禁用 |
八、选择口诀（直接背）
有分隔符 →
split
拆字符 →...或Array.from
是 JSON →JSON.parse
要处理 emoji → 别用split("")
九、真实项目推荐组合
表单 / URL / 输入框
input.trim().split(/\s*,\s*/);
CSV
line.split(",");
字符处理 / 算法题
[...str]
如果你愿意，我可以继续帮你：
- 🔥 对比性能（10 万字符）
- 🔥 字符串 ↔ 数组互转速查表
- 🔥 前端面试常考陷阱题
你是 写业务代码、刷算法题，还是 准备前端面试？