使用 String.prototype.matchAll() 提高比對結果

Joe Medley
Joe Medley

Chrome 73 推出了 String.prototype.matchAll() 方法。此做法與 match() 類似,但會傳回在全域或固定式規則運算式中,所有規則運算式相符的疊代器。這樣就能輕鬆疊代比對相符項目,尤其是在需要擷取群組存取權時。

match() 有什麼問題?

除非您嘗試傳回包含擷取群組的全域相符項目,否則簡單來說不會是如此。這道程式設計謎題要來了。請參考以下程式碼:

const regex = /t(e)(st(\d?))/g;
const string = 'test1test2';
const results = string.match(regex);
console.log(results);
// → ['test1', 'test2']

在主控台中執行此操作,您會發現它會傳回包含 'test1''test2' 字串的陣列。如果我從規則運算式中移除 g 旗標,我取得的所有擷取群組都會有 g 標記,但我只會找到第一個相符項目。這是訂閱按鈕的圖示:

['test1', 'e', 'st1', '2', index: 0, input: 'test1test2', groups: undefined]

這個字串含有一個開頭為 'test2' 的第二個可能相符項目,但我沒有。現在來解開謎題:如何取得每場比賽的所有擷取群組?String.prototype.matchAll() 提案的說明說明兩種可能的方法。我不會說明這些原則 希望您也不需要這麼久

String.prototype.matchAll()

說明示例中的 matchAll() 為何?瞧一眼吧。

const regex = /t(e)(st(\d?))/g;
const string = 'test1test2';
const matches = string.matchAll(regex);
for (const match of matches) {
  console.log(match);
}

請留意幾點注意事項。與 match() 可以在全域搜尋傳回陣列,matchAll() 則會傳回可完美搭配 for...of 迴圈運作的疊代器。疊代器會為每項相符項目產生陣列,包括含有幾項額外項目的擷取群組。如果您將這些內容列印到控制台,看起來會像這樣:

['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', groups: undefined]
['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', groups: undefined]

您可能會發現,每個相符項目的值都與 match() 為非全域規則運算式傳回的陣列格式完全相同。

額外內容

這主要適用於對規則運算式的新手,或是不熟悉運算式的人。您可能已經注意到,match() 和 matchAll() 的結果都是包含一些額外已命名屬性的陣列。準備本文時,我發現這些屬性在 MDN 上有一些說明文件延遲 (我已修正)。以下是簡短說明。

index
原始字串中第一個結果的索引。在上述範例中,test2 的起始位置為位置 5,因此 index 的值為 5。
input
matchAll() 執行的完整字串。在這個範例中,使用的是 'test1test2'
groups
包含您在規則運算式中指定的所有已命名擷取群組的結果。

結論

如果遺漏任何資訊,歡迎在下方留言告訴我們。如要進一步瞭解 JavaScript 最近的異動內容,請參閱先前的更新內容V8 網站