如何在 JavaScript 中將字符串轉換為數組

簡介

文本數據通常通過字符序列存儲 - 字符串。這些序列最終是數組，兩種結構之間的轉換通常既簡單又直觀。無論您是將單詞分解為字符，還是將句子分解為單詞 - 將字符串拆分為數組都不是不常見的操作，並且大多數語言都有用於此任務的內置方法。

用split()將字符串分割成數組

split() 方法用於將字符串劃分為兩個或多個子字符串的有序列表，具體取決於提供的模式/分隔符/分隔符，並返回它。模式/分隔符/分隔符是方法調用中的第一個參數，可以是正則表達式 , 單個字符 ，或另一個字符串 .

例如，假設我們有一個字符串：

let quote = 'I am unstoppable!';

我們可以將其拆分為每個空格（將其分解為單詞）、每個字符或任何其他任意分隔符，例如 'p' ：

// Split string using a whitespace
let array1 = quote.split(' ');
console.log(array1); // ["I", "am", "unstoppable!"]
  
// Splitstring  using an empty string (on each character)
let array2 = quote.split('');
console.log(array2); // ["I", " ", "a", "m", " ", "u", "n", "s", "t", "o", "p", "p", "a", "b", "l", "e", "!"]

// Split string using a specific character
let array3 = quote.split('p');
console.log(array3); // ["I am unsto", "", "able!" ]

使用單個字符甚至整個字符串的主要缺點之一是該方法相當嚴格。您無法通過多個匹配 分隔符，除非您使用正則表達式。例如，假設您想將一個字符串分解為 sentences .句子可以以句點結尾 (. )、感嘆號 (! )，一個問號 (? ) 或三個點 (... ）。其中每一個都是有效的句子，但如果我們要使用單個字符或字符串，我們必須執行多次拆分才能匹配所有這些句子。

模式匹配是正則表達式擅長的地方！讓我們在每個句子上分割一個字符串，使用這些結尾分隔符中的任何一個：

let text = "What a big family it was! That would be a big help. The big question was how to end it; Was he there? Terrible occurrence."
let sentences = text.split(/[.,!,?,;,...]/);
    
console.log(sentences); // ["What a big family it was", " That would be a big help", " The big question was how to end it", " Was he there", " Terrible occurrence", ""]

但是，分隔符丟失了！我們分開他們 在此過程中，將它們從輸出中刪除。此外，我們在句子的開頭有多個空格，最後有一個空字符串！這並不是說 split() 不能很好地與正則表達式一起使用 - 但也就是說 split() 不能很好地解決從文本中拆分句子的問題 .這是我們可以使用 match() 的地方 方法代替 - 它返回匹配的模式 和 他們的分隔符：

let text = "What a big family it was! That would be a big help. The big question was how to end it; Was he there? Terrible occurrence."
let sentences = text.match(/[^.!?]+[.!?]+/g);
    
console.log(sentences);  // ["What a big family it was!", " That would be a big help.", " The big question was how to end it; Was he there?", " Terrible occurrence." ]

注意： split() 方法接受第二個參數，它指定可能發生的拆分限制。它不會改變 拆分和元素的數量 以適應傳遞的參數，而是執行拆分 n 次，從一開始，然後停止分裂。

為了限制我們執行的拆分次數，我們可以輕鬆地提供 split() 的第二個參數 方法：

let sentence = "The big question was how to end it";
let array = sentence.split(" ", 3); 

console.log(array); // ["The","big","question"]

split() 的常見用例 方法是當有人將他們的全名作為單個字符串提供時：

let name = "John Doe"

在這裡，我們可以拆分名稱，將其作為對象的不同字段保存到數據庫中，例如：

// Split using a space character
let names = name.split(" ");
console.log(names); // ["John","Doe"]
  
// call names by array index
let firstName = names[0];
let lastName = names[1];
  
console.log(firstName); // "John"
console.log(lastName); // "Doe"

我們可以使用數組解構，而不是必須使用數組索引調用 get 兩個元素 讓作業更整潔：

let [firstName, lastName] = name.split(' ');
console.log(firstName, lastName); //"John" "Doe"

注意： split() 方法不支持某些 UTF-8 字符，例如表情符號（即😄、😍、⁣💗），並將用一對 �� 替換它們 .

使用 Array.from() 將字符串拆分為數組

from() Array 中的方法 class 是 split() 的主要競爭者 方法。它用於創建一個數組，給定一個數據源 - 自然地，它可以用於從一個可迭代的 string 創建一個數組 ：

let name = "John Doe";
// String to array of chracters
let nameChars = Array.from(name);
console.log(nameChar); //["J","o","h","n"," ","D","o","e"]
  
// Manipulating array
let nameCharsReversed = nameChars.reverse().join('');
console.log(nameCharsReversed); //"eoD nhoJ"

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

使用 Array.from() 的主要好處 而不是 split() 是您不必費心設置分隔符 - 組成元素只是重新公開並添加到數組中，而不是被顯式轉換。此外，Array.from() 方法支持表情符號 人物：

let word = "It is sweet 😋";
let wordChars = Array.from(word)
console.log(wordChars); // ["I","t"," ","i","s"," ","s","w","e","e","t"," ","😋"]

使用擴展運算符將字符串拆分為數組

擴展運算符 有多種用途，是 JavaScript 中廣泛適用的運算符。在我們的上下文中 - 我們最感興趣的是擴展數組 （字符串是字符數組）。

運算符的語法簡單明了 - 我們可以展開字符串 放入一個數組 ：

let name = "John Doe";
// Spread out string into an array
let nameChar = [...name];
console.log(nameChar); //["J","o","h","n"," ","D","o","e"]
  
// Manipulating array
let nameCharReverse = nameChar.reverse().join('');
console.log(nameCharReverse); //"eoD nhoJ"

該運算符還適用於 UTF-8 表情符號：

let word = "It is sweet 😋";
let wordChar = [...word]
console.log(wordChar); // ["I","t"," ","i","s"," ","s","w","e","e","t"," ","😋"]

用 Object.assign() 分割字符串

Object.assign() 方法複製一個對象的所有值和屬性 - 並將它們映射到另一個對象的屬性。從某種意義上說 - 它用於克隆對象並合併具有相同屬性的對象：

Object.assign(target, ...sources)

在我們的例子中 - 我們將復製字符串中的值並將其映射到數組：

Object.assign([], string)

這種方法比前兩種更冗長，更不美觀：

let name = "John Doe";
// Assigning string values to an array
let nameChar = Object.assign([], name);
console.log(nameChar); //["J","o","h","n"," ","D","o","e"]
  
// Manipulating array
let nameCharReverse = nameChar.reverse().join('');
console.log(nameCharReverse); //"eoD nhoJ"

值得注意的是 Object.assign() 不支持表情符號等特殊 UTF-8 字符：

let word = "It is sweet 😋";
let wordChars = Object.assign([], word);
  
console.log(wordChars); // ["I","t"," ","i","s"," ","s","w","e","e","t"," ","�","�"]

結論

在這個簡短的指南中，我們了解瞭如何在 JavaScript 中將字符串轉換為數組。我們已經探索了 split() 方法，具有最高級別的可定制性 - 包括正則表達式的拆分！然後，我們探索了數組from()的創建 字符串等來源。擴展運算符在將字符串擴展回數組時效果很好，我們終於介紹了 Object.assign() 將字符串的值分配給數組的方法。