JavaScript字符串转数组的4种方法及数组转字符串详解
本文详解JavaScript中将字符串转换为字符数组的4种常用方法，包括split、展开运算符、解构赋值和Array.from，重点分析处理多代码单元字符（如Emoji）时的差异。同时补充数组转字符串的toString、toLocaleString、join方法以及JSON序列化转换，帮助开发者根据实际需求选择最佳方案。
JavaScript中将字符串转换为数组的4种方法示例小结
1、split() 方法
最常用的转换技术是使用字符串的split方法，但这种方法存在局限性。通过传入空字符串作为分隔符，可以将字符串拆分为字符数组。
const text = "abc";
const chars = text.split('');
console.log(chars);
//['a', 'b', 'c']然而，split方法无法正确处理由两个代码单元组成的字符（例如某些Emoji表情）。示例如下。
const text = "abc????";
const chars = text.split('');
console.log(chars);
//(7) ['a', 'b', 'c', '?', '?', '?', '?']2、展开运算符
展开运算符（...）允许在需要多个元素的位置（如数组字面量）展开可迭代对象，例如字符串。
这是将字符串展开为字符数组的示例。该方法能正确处理由两个代码单元组成的字符。
const text = "abc????";
const chars = [ ...text ];
console.log(chars);
//(7) ['a', 'b', 'c', '?', '?', '?', '?']3、解构赋值
解构赋值语法可以将数组或可迭代对象中的值解包到不同的变量中。在解构数组或可迭代对象时，可以使用剩余模式（rest pattern）将剩余部分提取到单个变量中。
const text = "abc????";
const [ ...chars ] = text;
console.log(chars);
//(7) ['a', 'b', 'c', '?', '?', '?', '?']4、Array.from
Array.from用于从类数组或可迭代对象创建新数组。由于字符串既是可迭代的又具有类似数组的结构，因此可以成功地将其转换为字符数组。
const text = "abc????";
const chars = Array.from(text);
console.log(chars);
//(7) ['a', 'b', 'c', '?', '?', '?', '?']重点说明
split方法可能是将字符串转换为字符数组的常用手段，但它无法处理由两个代码单元组成的字符。
我们可以使用对象字面量中的扩展运算符、数组解构赋值语法中的剩余模式或Array.from工具函数，将字符串正确转换为字符数组。
补充：
JS中字符串和数组的相互转换
一、字符串转数组的四种方法
一、字符串.split(' ')
二、ES6的新方法：Object.values(str);
三.Array.from(str)
四.ES6中的扩展运算符（...）
二、数组转成字符串
| 数组方法 | 说明 |
|---|---|
| toString() | 将数组转换成一个字符串 |
| toLocaleString() | 把数组转换成本地约定的字符串 |
| join() | 将数组元素连接起来以构建一个字符串 |
将数组元素连接起来以构建一个字符串
一、toString()方法
数组中的toString()方法能够将每个元素转换为字符串，然后以逗号连接输出显示。
var a = [1,2,3,4,5,6,7,8,9,0]; //定义数组
var s = a.toString(); //把数组转换为字符串
console.log(s); //返回字符串“1,2,3,4,5,6,7,8,9,0”
console.log(typeof s); //返回字符串string，说明是字符串类型二 toLocaleString() 方法读取数组的值。
toLocaleString()方法与toString()方法用法基本相同，主要区别在于toLocaleString()方法能够使用用户所在地区特定的分隔符把生成的字符串连接起来，形成一个字符串。
var a = [1,2,3,4,5]; //定义数组
var s = a.toLocaleString(); //把数组转换为本地字符串
console.log(s); //返回字符串“1,2,3,4,5,6,7,8,9,0”
//在上面示例中，toLocaleString() 方法根据中国的使用习惯，
//先把数字转换为浮点数之后再执行字符串转换操作。三、join()方法
下面使用join()方法可以把数组转换为字符串。
join()方法可以把数组转换为字符串，不过它可以指定分隔符。在调用join()方法时，可以传递一个参数作为分隔符来连接每个元素。如果省略参数，默认使用逗号作为分隔符，这时与toString()方法转换操作效果相同。
var a = [1,2,3,4,5]; //定义数组
var s = a.join("=="); //指定分隔符
console.log(s); //返回字符串“1==2==3==4==5”三、JSON对象/数组与JSON字符串之间的相互转换
一、JSON.stringify()
JSON.stringify({}); // '{}'
JSON.stringify(true); // 'true'
JSON.stringify("foo"); // '"foo"'
JSON.stringify([1, "false", false]); // '[1,"false",false]'
JSON.stringify({ x: 5 }); // '{"x":5}'
JSON.stringify({x: 5, y: 6});
// "{"x":5,"y":6}"二，JSON.parse()
JSON.parse('{}'); // {}
JSON.parse('true'); // true
JSON.parse('"foo"'); // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null'); // null到此这篇关于JS字符串转换为数组的4个方法的文章就介绍到这了，更多相关js字符串转换数组内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00