在前端开发中，正则表达式是一项非常重要的技能。但是，尽管正则表达式非常强大，但是它们也很难学习和使用。ES2020 中的 matchAll 方法可以帮助我们简化正则表达式的匹配，从而更加轻松地处理字符串。
matchAll 方法介绍
matchAll 方法是 ES2020 中新增的一个字符串方法。该方法可以接收一个正则表达式作为参数，并返回一个迭代器对象。这个迭代器对象可以用来遍历字符串中所有匹配正则表达式的子串。
-- -------------------- ---- ------- ----- --- - ------- -------- ----- ----- - --------- ----- -------- - -------------------- ----------------------------- -- - ------ ------ ----- ----- - ----------------------------- -- - ------ ------ ----- ----- - ----------------------------- -- - ------ ------ ----- ----- - ----------------------------- -- - ------ ------ ----- ----- - ----------------------------- -- - ------ ------ ----- ----- - ----------------------------- -- - ------ ------ ----- ----- - ----------------------------- -- - ------ ------ ----- ----- - ----------------------------- -- - ------ ------ ----- ----- - ----------------------------- -- - ------ ------ ----- ----- - ----------------------------- -- - ------ ---------- ----- ---- -
上面的代码中，我们首先定义了一个字符串 str 和一个正则表达式 regex。然后，我们使用 matchAll 方法来获取一个迭代器对象 iterator，并用它来遍历字符串中所有匹配正则表达式的子串。
在每次调用 iterator.next() 方法时，我们都会得到一个对象，其中 value 属性是一个数组，包含了当前匹配的子串，done 属性表示是否已经遍历完所有匹配的子串。
matchAll 方法的优势
使用 matchAll 方法可以带来以下优势：
1. 简化代码
在 ES2020 之前，我们通常使用 exec 方法来匹配正则表达式，然后使用循环来遍历所有匹配的子串。而使用 matchAll 方法，则可以简化这个过程，使代码更加简洁。
-- -------------------- ---- ------- -- -- ---- ----- ----- --- - ------- -------- ----- ----- - --------- --- ------ ----- ------- - ---------------- --- ----- - ---------------------- - -- -- -------- ----- ----- --- - ------- -------- ----- ----- - --------- ----- -------- - -------------------- --- ------ ----- -- --------- - ---------------------- -
2. 更加安全
使用 exec 方法时，我们需要手动检查返回值是否为 null，以避免出现无限循环的情况。而使用 matchAll 方法，则不需要进行这个检查，因为迭代器会在遍历完所有匹配的子串后自动停止。
3. 更加灵活
使用 matchAll 方法可以将正则表达式的匹配结果作为一个迭代器返回，这意味着我们可以使用迭代器的所有方法来处理匹配结果。例如，我们可以使用 map 方法来将匹配结果转换为另一个数组。
const str = 'Hello, world!'; const regex = /[a-z]/g; const iterator = str.matchAll(regex); const matches = Array.from(iterator, match => match[0]); console.log(matches); // ['e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']
使用示例
下面是一个使用 matchAll 方法的示例，它可以在一个字符串中查找所有的 URL。
-- -------------------- ---- ------- -------- ------------- - ----- ----- - ------------------ ----- -------- - -------------------- ----- ---- - -------------------- ----- -- ---------- ------ ----- - ----- --- - ------ --- ---- -------- -------------------------- ----- ---- - -------------- ------------------ -- ---------------------------
上面的代码中，我们定义了一个 findUrls 函数，它使用正则表达式来查找字符串中所有的 URL。该函数首先定义了一个正则表达式 regex，然后使用 matchAll 方法来获取一个迭代器对象 iterator，并使用 Array.from 方法将迭代器对象转换为一个数组。
最后，我们返回这个数组，它包含了字符串中所有的 URL。
总结
使用 matchAll 方法可以帮助我们简化正则表达式的匹配，使代码更加简洁、安全、灵活。同时，它还可以帮助我们处理一些复杂的字符串操作，例如查找 URL、解析 JSON 等。因此，我们应该尽可能地学习和使用这个方法，以提高我们的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650557b195b1f8cacd1d85db