JS字符串轉(zhuǎn)換為數(shù)組的4 個方法示例小結(jié)
JS字符串轉(zhuǎn)換為數(shù)組的4 個方法
1、split() 方法
常見的轉(zhuǎn)換技術(shù)是split字符串方法，但這也是有問題的一種
通過使用空字符串作為split方法的分隔符，我們可以將字符串轉(zhuǎn)換為字符數(shù)組。
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、展開運(yùn)算符
展開運(yùn)算符 ( …) 允許在需要多個元素（如數(shù)組文字）的地方擴(kuò)展諸如字符串之類的可迭代對象。
這是將字符串?dāng)U展為字符數(shù)組的示例。正確處理采用兩個代碼單元的字符。
const text = "abc????"; const chars = [ ...text ]; console.log(chars); //(7) ['a', 'b', 'c', '?', '?', '?', '?']
3、解構(gòu)賦值
解構(gòu)賦值語法可以將數(shù)組或可迭代對象中的值解包為不同的變量。
在解構(gòu)數(shù)組或可迭代對象時，我們可以使用 rest 模式將其剩余部分提取到單個變量中。
const text = "abc????"; const [ ...chars ] = text; console.log(chars); //(7) ['a', 'b', 'c', '?', '?', '?', '?']
4、Array.from
Array.from輔助創(chuàng)建從陣列狀或迭代的對象的新數(shù)組。字符串既可迭代又類似于數(shù)組，因此，可以成功地將其轉(zhuǎn)換為字符數(shù)組。
const text = "abc????"; const chars = Array.from(text); console.log(chars); //(7) ['a', 'b', 'c', '?', '?', '?', '?']
重點說明
該split方法可能是將字符串轉(zhuǎn)換為字符數(shù)組的常用方法，但它不處理采用兩個代碼單元的字符。
我們可以使用對象字面量中的擴(kuò)展運(yùn)算符、使用數(shù)組解構(gòu)賦值語法中的剩余模式或Array.from實用程序?qū)⒆址_轉(zhuǎn)換為字符數(shù)組。
補(bǔ)充：
JS中字符串和數(shù)組的相互轉(zhuǎn)換
一、字符串轉(zhuǎn)數(shù)組的四種方法
一、字符串.split(' ')
二、es6的新方法：Object.values(str);
三.Array.from(str)
四.es6中的擴(kuò)展運(yùn)算符（...）
二、數(shù)組轉(zhuǎn)成字符串
| 數(shù)組方法 | 說明 |
|---|---|
| toString() | 將數(shù)組轉(zhuǎn)換成一個字符串 |
| toLocaleString() | 把數(shù)組轉(zhuǎn)換成本地約定的字符串 |
| join() | 將數(shù)組元素連接起來以構(gòu)建一個字符串 |
將數(shù)組元素連接起來以構(gòu)建一個字符串
一、 tostring()方法
數(shù)組中 toString() 方法能夠把每個元素轉(zhuǎn)換為字符串，然后以逗號連接輸出顯示。
var a = [1,2,3,4,5,6,7,8,9,0]; //定義數(shù)組 var s = a.toString(); //把數(shù)組轉(zhuǎn)換為字符串 console.log(s); //返回字符串“1,2,3,4,5,6,7,8,9,0” console.log(typeof s); //返回字符串string，說明是字符串類型
二 toLocaleString() 方法讀取數(shù)組的值。
toLocaleString() 方法與 toString() 方法用法基本相同，主要區(qū)別在于 toLocalString() 方法能夠使用用戶所在地區(qū)特定的分隔符把生成的字符串連接起來，形成一個字符串。
var a = [1,2,3,4,5]; //定義數(shù)組 var s = a.toLocaleString(); //把數(shù)組轉(zhuǎn)換為本地字符串 console.log(s); //返回字符串“1,2,3,4,5,6,7,8,9,0” //在上面示例中，toLocaleString() 方法根據(jù)中國的使用習(xí)慣， //先把數(shù)字轉(zhuǎn)換為浮點數(shù)之后再執(zhí)行字符串轉(zhuǎn)換操作。
三、join()方法
下面使用 join() 方法可以把數(shù)組轉(zhuǎn)換為字符串。
join() 方法可以把數(shù)組轉(zhuǎn)換為字符串，不過它可以指定分隔符。在調(diào)用 join() 方法時，可以傳遞一個參數(shù)作為分隔符來連接每個元素。如果省略參數(shù)，默認(rèn)使用逗號作為分隔符，這時與 toString() 方法轉(zhuǎn)換操作效果相同。
var a = [1,2,3,4,5]; //定義數(shù)組
var s = a.join("=="); //指定分隔符
console.log(s); //返回字符串“1==2==3==4==5”三、JSON對象/數(shù)組與JSON字符串之間的相互轉(zhuǎn)換
一、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到此這篇關(guān)于JS字符串轉(zhuǎn)換為數(shù)組的4 個方法的文章就介紹到這了,更多相關(guān)js字符串轉(zhuǎn)換數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Mysql如何獲取json字符串/數(shù)組的值
- JavaScript中判斷某個字符串、數(shù)組等是否包含某個值的五種方法
- 將JSON字符串?dāng)?shù)組轉(zhuǎn)對象集合方法步驟
- 利用js判斷數(shù)據(jù)是否是數(shù)組或字符串的常見方法
- JavaScript將數(shù)組轉(zhuǎn)為對象與JSON對象字符串轉(zhuǎn)數(shù)組方法詳解
- JavaScript實現(xiàn)字符串轉(zhuǎn)數(shù)組的6種方法總結(jié)
- 如何將JSON字符串?dāng)?shù)組轉(zhuǎn)對象集合
- JS數(shù)組轉(zhuǎn)字符串實現(xiàn)方法解析
- JS字符串和數(shù)組如何實現(xiàn)相互轉(zhuǎn)化
- JavaScript 中字符串和數(shù)組的概念解析與多角度對比區(qū)分
相關(guān)文章
一個網(wǎng)頁標(biāo)題title的閃動提示效果實現(xiàn)思路
通過網(wǎng)頁title來提示用戶有新消息這個功能很常見，下面有個不錯的示例，大家可以參考下2014-03-03
記錄我看到之后，不得不贊的代碼片段。本貼板內(nèi)容將不斷更新，歡迎關(guān)注2013-06-06
這篇文章主要介紹了JavaScript的內(nèi)存釋放問題詳解的相關(guān)資料,需要的朋友可以參考下2015-01-01
JavaScript實現(xiàn)復(fù)制文章自動添加版權(quán)
自己辛辛苦苦寫的文章，輕易就被別人復(fù)制－粘貼去了，是不是很傷心呢？小編今天給大家整理了兩個方法，讓別人復(fù)制自己的文章時，自動在文章的結(jié)尾添加自己的版權(quán)信息。2016-08-08
下面小編就為大家?guī)硪黄猨s return返回多個值,通過對象的屬性訪問方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本文記錄下JS中產(chǎn)生標(biāo)識符方式的演變，從ES5到ES6，ES5及其之前是一種方式，只包含兩種聲明（var/function），ES6則增加了一些產(chǎn)生標(biāo)識符的關(guān)鍵字，如 let、const、class。2015-06-06
本篇文章主要介紹了深入理解ES7的async/await的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
本篇文章主要介紹了JavaScript中 DOM操作方法小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)canvas簡單小畫板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
靜態(tài)的動態(tài)續(xù)篇之來點XML...2006-12-12