JS字符串轉(zhuǎn)換為數(shù)組的4 個(gè)方法

1、split() 方法

常見(jiàn)的轉(zhuǎn)換技術(shù)是split字符串方法，但這也是有問(wèn)題的一種
通過(guò)使用空字符串作為split方法的分隔符，我們可以將字符串轉(zhuǎn)換為字符數(shù)組。

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

該split方法無(wú)法正確處理采用兩個(gè)代碼單元（如表情符號(hào)）的字符。下面是一個(gè)例子。

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

2、展開(kāi)運(yùn)算符

展開(kāi)運(yùn)算符 ( …) 允許在需要多個(gè)元素（如數(shù)組文字）的地方擴(kuò)展諸如字符串之類(lèi)的可迭代對(duì)象。

這是將字符串?dāng)U展為字符數(shù)組的示例。正確處理采用兩個(gè)代碼單元的字符。

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

3、解構(gòu)賦值

解構(gòu)賦值語(yǔ)法可以將數(shù)組或可迭代對(duì)象中的值解包為不同的變量。
在解構(gòu)數(shù)組或可迭代對(duì)象時(shí)，我們可以使用 rest 模式將其剩余部分提取到單個(gè)變量中。

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

4、Array.from

Array.from輔助創(chuàng)建從陣列狀或迭代的對(duì)象的新數(shù)組。字符串既可迭代又類(lèi)似于數(shù)組，因此，可以成功地將其轉(zhuǎn)換為字符數(shù)組。

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

重點(diǎn)說(shuō)明

該split方法可能是將字符串轉(zhuǎn)換為字符數(shù)組的常用方法，但它不處理采用兩個(gè)代碼單元的字符。

我們可以使用對(duì)象字面量中的擴(kuò)展運(yùn)算符、使用數(shù)組解構(gòu)賦值語(yǔ)法中的剩余模式或Array.from實(shí)用程序?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ù)組元素連接起來(lái)以構(gòu)建一個(gè)字符串

一、 tostring()方法

數(shù)組中 toString() 方法能夠把每個(gè)元素轉(zhuǎn)換為字符串，然后以逗號(hào)連接輸出顯示。

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，說(shuō)明是字符串類(lèi)型

二 toLocaleString() 方法讀取數(shù)組的值。

toLocaleString() 方法與 toString() 方法用法基本相同，主要區(qū)別在于 toLocalString() 方法能夠使用用戶所在地區(qū)特定的分隔符把生成的字符串連接起來(lái)，形成一個(gè)字符串。

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ù)中國(guó)的使用習(xí)慣，
//先把數(shù)字轉(zhuǎn)換為浮點(diǎn)數(shù)之后再執(zhí)行字符串轉(zhuǎn)換操作。

三、join()方法

下面使用 join() 方法可以把數(shù)組轉(zhuǎn)換為字符串。

join() 方法可以把數(shù)組轉(zhuǎn)換為字符串，不過(guò)它可以指定分隔符。在調(diào)用 join() 方法時(shí)，可以傳遞一個(gè)參數(shù)作為分隔符來(lái)連接每個(gè)元素。如果省略參數(shù)，默認(rèn)使用逗號(hào)作為分隔符，這時(shí)與 toString() 方法轉(zhuǎn)換操作效果相同。

var a = [1,2,3,4,5];  //定義數(shù)組
var s = a.join("==");  //指定分隔符
console.log(s);  //返回字符串“1==2==3==4==5”

三、JSON對(duì)象/數(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 個(gè)方法的文章就介紹到這了,更多相關(guān)js字符串轉(zhuǎn)換數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論