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字符串转换数组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
通过网页title来提示用户有新消息这个功能很常见，下面有个不错的示例，大家可以参考下2014-03-03
记录我看到之后，不得不赞的代码片段。本贴板内容将不断更新，欢迎关注2013-06-06
这篇文章主要介绍了JavaScript的内存释放问题详解的相关资料,需要的朋友可以参考下2015-01-01
自己辛辛苦苦写的文章，轻易就被别人复制－粘贴去了，是不是很伤心呢？小编今天给大家整理了两个方法，让别人复制自己的文章时，自动在文章的结尾添加自己的版权信息。2016-08-08
下面小编就为大家带来一篇js return返回多个值,通过对象的属性访问方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
本文记录下JS中产生标识符方式的演变，从ES5到ES6，ES5及其之前是一种方式，只包含两种声明（var/function），ES6则增加了一些产生标识符的关键字，如 let、const、class。2015-06-06
本篇文章主要介绍了深入理解ES7的async/await的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本篇文章主要介绍了JavaScript中 DOM操作方法小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要为大家详细介绍了JS实现canvas简单小画板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
静态的动态续篇之来点XML...2006-12-12
最新评论