通常,字符串 string
表示編程語言中的字符序列。
讓我們看一個使用字符序列創建的字符串示例,“Yes, You Can DO It!”。在 JavaScript 中,我們可以通過兩種方式創建字符串:
- 直接使用字符串文字
const msg = "Yes, You Can DO It!";
- 使用
String()
構造器作為一個對象
const msg = new String("Yes, You Can DO It!");
JavaScript 中關於字符串的一個有趣事實是,我們可以使用字符串的索引訪問字符串中的字符。第一個字符的索引是 0,它遞增 1。因此,我們可以像這樣訪問字符串的每個字符:
let str = "Yes, You Can Do It!"; console.log(str[0]); // Y console.log(str[1]); // e console.log(str[2]); // s console.log(str[3]); // , console.log(str[10]); // a
下圖代表了同樣的事情:
通過索引讀取字符串的字符
除了通過索引訪問字符串字符的能力之外,JavaScript 還提供了大量實用方法來訪問字符、取出字符串的一部分並對其進行操作。
在這篇文章中將學習一個方便的字符串方法,split()
。
JavaScript 中的 split() 方法
split()
方法根據 splitter
(或分隔符)將字符串拆分(划分)為兩個或多個子字符串。分隔符可以是單個字符、另一個字符串或正則表達式。
將字符串拆分為多個子字符串后,split()
方法將它們放入一個數組中並返回。它不會對原始字符串進行任何修改。
讓我們通過一個例子來了解這是如何實現的。這是一個字符串:
let message = 'I am a Happy Go lucky Guy';
我們可以在 message
字符串上調用 split()
方法。讓我們根據空格(' '
)字符拆分字符串。這里的空格字符充當分隔符。
// Split using a space character let arr = message.split(' '); // The array console.log(arr); // ["I", "am", "a", "Happy", "Go", "lucky", "Guy"] // Access each of the elements of the array. console.log(arr[0]); // "I" console.log(arr[1]); // "am" console.log(arr[2]); // "a" console.log(arr[3]); // "Happy" console.log(arr[4]); // "Go", console.log(arr[5]); // "lucky" console.log(arr[6]); // "Guy"
split()
方法的主要目的是從字符串中獲取你感興趣的塊,以便在之后的用例中使用它們。
如何按每個字符拆分字符串
你可以使用空字符串('')作為分隔符按每個字符拆分字符串。在下面的示例中,我們使用空字符串拆分相同的消息。拆分的結果將是一個包含消息字符串中所有字符的數組。
console.log(message.split('')); // ["I", " ", "a", "m", " ", "a", " ", "H", "a", "p", "p", "y", " ", "G", "o", " ", "l", "u", "c", "k", "y", " ", "G", "u", "y"]
💡 請注意,使用空字符串拆分空字符串('')作為分隔符返回一個空數組。你可能會在即將到來的求職面試中得到這個問題!
''.split(''); // returns []
如何將字符串拆分為一個數組
你可以在沒有分隔符的字符串上調用 split()
方法。這意味着沒有給 split()
方法傳遞給任何參數。
當你在沒有分隔符的字符串上調用 split()
方法時,它會返回一個包含整個字符串的數組。
let message = 'I am a Happy Go lucky Guy'; console.log(message.split()); // returns ["I am a Happy Go lucky Guy"]
💡 再次注意,在沒有分隔符的空字符串('')上調用
split()
方法將返回一個帶有空字符串的數組。它不會返回空數組。
以下是兩個示例,以便你可以看到差異:
// Returns an empty array ''.split(''); // returns [] // Returns an array with an empty string ''.split() // returns [""]
如何使用不匹配的字符拆分字符串
通常,我們使用一個分隔符,它是我們嘗試拆分的字符串的一部分。在某些情況下,你可能傳遞了不屬於字符串的一部分或與字符串的任何部分都不匹配的分隔符。在這種情況下,split()
方法返回一個以整個字符串作為元素的數組。
在下面的示例中,消息字符串沒有逗號(,)字符。讓我們嘗試使用分隔符逗號(,)拆分字符串。
let message = 'I am a Happy Go lucky Guy'; console.log(message.split(',')); // ["I am a Happy Go lucky Guy"]
💡 你應該意識到這一點,因為它可能會幫助你調試由於諸如在
split()
方法中傳遞錯誤的分隔符之類的小錯誤而導致的問題。
如何設置拆分的長度
如果你認為 split()
方法僅將分隔符作為可選參數,那么讓我告訴你還有一個。你還可以將 limit
作為可選參數傳遞給 split()
方法。
string.split(splitter, limit);
顧名思義,limit
參數限制了拆分的數量。這意味着生成的數組將只有 limit
參數指定的元素數。
在下面的示例中,我們使用空格(' ')作為分隔符來拆分字符串。我們還將數字 4
作為長度限制。split()
方法返回一個只有 4 個元素的數組,忽略其余元素。
let message = 'I am a Happy Go lucky Guy'; console.log(message.split(' ', 4)); // ["I", "am", "a", "Happy"]
如何使用正則表達式拆分
我們還可以將正則表達式作為分隔符傳遞給 split()
方法。讓我們考慮拆分這個字符串:
let message = 'The sky is blue. Grass is green! Do you know the color of the Cloud?';
讓我們在句點(.)、感嘆號(!)和問號(?)處拆分此字符串。我們可以編寫一個正則表達式來標識這些字符何時出現。然后我們將正則表達式傳遞給 split()
方法,並在上面的字符串上調用它。
let sentences = message.split(/[.,!,?]/); console.log(sentences);
輸出結果如下:
使用一個正則表達式拆分
你可以使用 limit
參數將輸出限制為僅前三個元素,如下所示:
sentences = message.split(/[.,!,?]/, 3); console.log(sentences);
輸出結果如下:
使用正則表達式和限制參數進行拆分
💡 如果要在輸出數組中捕獲正則表達式中使用的字符,則需要稍微調整正則表達式。使用括號來捕獲匹配的字符。更新后的正則表達式將是
/([.,!,?])/
。
如何使用 Split() 方法替換字符串中的字符
你可以使用 split()
方法結合其他字符串和數組方法來解決許多有趣的問題。讓我們在這里看一個。用另一個字符替換字符串中所有出現的字符可能是一個常見的用例。
例如,你可能希望根據名稱值創建 HTML 元素的 id
。name 值可以包含空格(' '),但在 HTML 中,id 值不能包含任何空格。我們可以通過以下方式做到這一點:
let name = 'Tapas Adhikary'; let subs = name.split(' '); console.log(subs); // ["Tapas", "Adhikary"] let joined = subs.join('-'); console.log(joined); // Tapas-Adhikary
考慮名稱由空格分隔的名字(Tapas)和姓氏(Adhikary)。這里我們首先使用空格分隔符切分名稱。它返回一個包含名字和姓氏作為元素的數組,即 ['Tapas', 'Adhikary']
。
然后我們使用 join()
數組方法通過 -
字符連接數組的元素。join()
方法通過使用作為參數傳遞的字符連接元素來返回一個字符串。因此我們得到最終輸出為 Tapas-Adhikary
。
ES6:如何使用數組解構進行拆分
ECMAScript2015(ES6)引入了一種更具創新性的方法來從數組中提取元素並將其分配給變量。這種智能語法被稱為數組解構
。我們可以將它與 split()
方法一起使用,以更少的代碼輕松地將輸出分配給變量。
let name = 'Tapas Adhikary'; let [firstName, lastName] = name.split(' '); console.log(firstName, lastName);
這里我們使用空格字符作為分隔符來拆分名稱。然后我們使用數組解構語法將數組的返回值分配給幾個變量(firstName
和 lastName
)。