英文 | https://sanchithasr.medium.com/6-ways-to-convert-string-to-array-in-javascript-a57dac463464
翻譯 | 楊小愛
數組是 JavaScript 中最強大的資料結構，我發現自己通過将字元串轉換為數組來解決許多算法。是以我想到了整合和比較各種方法來做同樣的事情。
從字元串到數組的轉換總是使用 split() 方法完成，但是在 ES6 之後，我們可以使用許多工具來做同樣的事情。讓我們一一介紹每種方法，并讨論每種方法的優缺點。
1、 使用 .split('')：
split() 是一種字元串方法，可将字元串拆分為具有模式的有序清單的數組。這是一種 ES6 方法，是完成工作的最幹淨的方法。
////* Seperate string by space character(' ') *////
const myFavShow = 'The Office';
const myFavShowArray = myFavShow.split('');
console.log(myFavShowArray) //['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e'] 這種方式的另一個優點是我們可以用字元或空格分隔字元串。以下是我們如何做到這一點的示例。
////* Seperate string by whitespace(' ') *////
const myFavShow = 'The Office';
const myFavShowArray = myFavShow.split(' ');
console.log(myFavShowArray) //['The', 'Office']
////* Seperate string by a character '-' *////
const favDialogue = 'Thats-what-she-said';
const favDialogueArr = favDialogue.split('-');
console.log(favDialogueArr) //['Thats', 'what', 'she', 'said'] 它也适用于正規表達式，你可以在此處找到 split() 的完整文檔。
這種方式完美地将字元串元素分離到一個數組中，但它有其局限性。
注意：此方法不适用于不常見的 Unicode 字元。此方法傳回字元的 Unicode 而不是實際字元，這可能會使我們的工作變得更複雜，但 MDN 文檔已更新，是以，如果我們僅包含 u 标志，我們就可以使其與 Unicode 一起使用。
"😄😄".split(/(?:)/); // [ "\ud83d", "\ude04", "\ud83d", "\ude04" ]
"😄😄".split(/(?:)/u); // [ "😄", "😄" ] 2、使用擴充文法 ([…str])
這是 ES2015 的特性，它使轉換變得非常容易。
const myFavShow = 'The Office'
const myFavShowArray = [...myFavShow]
console.log(myFavShowArray)
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e'] 在這裡消除了我們在 split() 中的限制也有幫助，考慮下面的例子，我們可以使用這種方法輕松拆分任何字元。
const animal = '🦊🦊'
const animalArr = [...animal]
console.log(animalArr) // ['🦊', '🦊'] 3、使用 Array.from(str)：
陣列，from() 方法從可疊代或類似數組的對象建立一個新的、淺拷貝的 Array 執行個體。
const myFavShow = 'The Office'
const myFavShowArray = Array.from(myFavShow);
console.log(myFavShowArray)
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e'] 這種方法在處理不常見的字元時不會引起任何問題。
const str = '😎😎'
const arr = Array.from(str)
console.log(arr)
// ['😎', '😎'] 4、使用 Object.assign([], str)
assign() 方法将一個或多個源對象的所有屬性複制到目标對象。不過，關于這種方法有兩點需要記住。一個是那個對象，二是assign() 複制稱為深拷貝的屬性值，在使用此方法之前，必須牢記這一點。
const myFavShow = 'The Office'
const myFavShowArray = Object.assign([], myFavShow);
console.log(myFavShowArray)
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e'] 另一個是我們和 split() 方法有同樣的麻煩：它不能分隔不常見的字元（我們看到的是 Unicode 而不是實際的字元）。
const s = '😄😄'
const a = Array.from(s)
console.log(a) // ['😄', '😄'] 5、使用老式方法（for loop 和 array.push()）
雖然我們有很多選擇可以玩，但我不得不提到這種老式的方法，我們使用 for 循環和數組方法 push() 來推送字元串的元素。
這不是最幹淨的方式，但絕對值得一提的是想要遠離 JavaScript 不斷變化的複雜性（盡管我更喜歡其他方式）。
const s = 'the office';
const a = [];
for (const s2 of s) {
a.push(s2);
}
console.log(a); // ['t', 'h', 'e', ' ', 'o', 'f', 'f', 'i', 'c', 'e'] 此外，它對不常見 (Unicode) 字元也能很好地工作。看下面的例子。
const s = '𝟘𝟙𝟚𝟛😄😄';
const a = [];
for (const s2 of s) {
a.push(s2);
}
console.log(a); //['𝟘', '𝟙', '𝟚', '𝟛', '😄', '😄'] 6、使用 Array.prototype.slice.call('string')
const favShow = Array.prototype.slice.call("The Office!");
console.log(favShow); //['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e', '!'] 此方法也有與 split() 方法相同的問題，是以在使用時要注意。
const favShow = Array.prototype.slice.call("The Office!");
console.log(favShow); //['\uD83D', '\uDE04', '\uD83D', '\uDE04'] 結論
總而言之，以下是我們可以完成這項工作的方法。
這是我在 JavaScript 中将字元串轉換為數組的 6 種方法的整理彙總。如果你使用任何其他方法來完成工作，請在留言區給我留言交流。
最後，感謝你的閱讀，祝程式設計愉快！
