首页 > 网络编程 > JavaScript > javascript技巧 > js字符串转换数组

JS字符串转换为数组的4 个方法示例小结

2023-12-25 12:04:12 作者：都挺好，刚刚好

这篇文章主要介绍了JS字符串转换为数组的4 个方法示例小结,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

JS字符串转换为数组的4 个方法

1、split() 方法

常见的转换技术是split字符串方法，但这也是有问题的一种
通过使用空字符串作为split方法的分隔符，我们可以将字符串转换为字符数组。

const text = "abc";
const chars = text.split('');
console.log(chars);
//['a', 'b', 'c']

该split方法无法正确处理采用两个代码单元（如表情符号）的字符。下面是一个例子。

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 模式将其剩余部分提取到单个变量中。

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() 方法用法基本相同，主要区别在于 toLocalString() 方法能够使用用户所在地区特定的分隔符把生成的字符串连接起来，形成一个字符串。

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字符串转换数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

JS字符串转换为数组的4 个方法示例小结