ES6字符串matchAll方法详解

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《ES6字符串matchAll用法详解》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

ES6引入String.prototype.matchAll()是为了获取字符串中所有正则匹配的完整信息。1. 它返回一个迭代器，支持惰性求值，减少内存占用；2. 提供每个匹配的捕获组、索引、原始输入等详细信息；3. 必须使用带g标志的正则表达式，否则抛出TypeError；4. 可通过for...of循环逐个处理匹配项，或使用Array.from()、展开运算符转换为数组；5. 与match和exec相比，matchAll结合了两者的优点，避免手动管理lastIndex，简化代码逻辑，适用于需要所有匹配详细信息且追求代码简洁的场景。

ES6中的String.prototype.matchAll方法，提供了一种获取字符串中所有正则表达式匹配项的全新方式，它返回一个迭代器，其中包含了每个匹配的完整信息，包括捕获组、索引等。

解决方案

在ES6中，使用String.prototype.matchAll()来获取字符串中所有匹配项，其核心在于它返回的是一个迭代器，而非直接的数组。这意味着你可以逐个处理匹配项，而无需一次性将所有结果加载到内存中，这对于处理大型字符串或大量匹配时尤其高效。

要使用matchAll，你需要提供一个带有全局标志（g）的正则表达式。如果正则表达式没有g标志，matchAll会抛出一个TypeError。

const text = "这是我的第一句话，也是我的第二句话，更是我的第三句话。";
const regex = /我的(\S+)句话/g; // 注意这里的 'g' 标志

// matchAll返回一个迭代器
const matchesIterator = text.matchAll(regex);

console.log("--- 遍历迭代器 ---");
for (const match of matchesIterator) {
  console.log(`完整匹配: ${match[0]}`); // 完整的匹配字符串
  console.log(`捕获组1: ${match[1]}`); // 第一个捕获组的内容
  console.log(`匹配索引: ${match.index}`); // 匹配在原字符串中的起始索引
  console.log(`原始输入: ${match.input}`); // 原始字符串
  console.log("---");
}

// 也可以将其转换为数组，以便于一次性处理或调试
const matchesArray = Array.from(text.matchAll(regex));
console.log("\n--- 转换为数组 ---");
console.log(matchesArray);

// 或者使用展开运算符
const matchesSpread = [...text.matchAll(regex)];
console.log("\n--- 使用展开运算符 ---");
console.log(matchesSpread);

// 示例：使用命名捕获组
const namedRegex = /(?<day>\d{2})-(?<month>\d{2})-(?<year>\d{4})/g;
const dateString = "今天是20-03-2023，明天是21-03-2023。";

for (const match of dateString.matchAll(namedRegex)) {
  console.log(`\n日期: ${match[0]}`);
  console.log(`  日: ${match.groups.day}`);
  console.log(`  月: ${match.groups.month}`);
  console.log(`  年: ${match.groups.year}`);
}

matchAll返回的每个匹配对象，结构上与RegExp.prototype.exec()返回的匹配对象类似，包含：

• 数组形式的匹配结果（match[0]是完整匹配，match[1]等是捕获组）。
• index属性：匹配项在原始字符串中的起始索引。
• input属性：原始的字符串。
• groups属性：如果正则表达式使用了命名捕获组，则可以通过这个对象访问它们。

为什么ES6引入了matchAll？它解决了哪些痛点？

坦白说，在matchAll出现之前，处理字符串中所有正则表达式匹配项是一件有点“别扭”的事情。你可能会用String.prototype.match()配合全局标志g，但那样只会返回一个包含所有完整匹配字符串的数组，捕获组信息、匹配位置这些关键细节全都丢失了。如果你想获取完整的匹配对象，就得手动写一个循环，配合RegExp.prototype.exec()来反复调用，并且要小心处理正则表达式的lastIndex属性，否则很容易陷入无限循环或者漏掉匹配。

这种手动管理lastIndex的模式，不仅代码写起来啰嗦，而且一不留神就可能出错。它要求开发者对正则表达式的内部工作机制有更深的理解，这无疑增加了学习成本和出错概率。想象一下，每次需要完整匹配信息时，都要写那套模板代码，真是有点烦躁。

matchAll的引入，正是为了解决这种痛点。它提供了一个语义上更清晰、使用上更直观的API，让你能“一次性”地获取所有匹配的完整信息，而无需手动管理迭代状态。它就像一个贴心的工具，把那些繁琐的底层逻辑封装起来，让你能更专注于业务逻辑本身，而不是与API的“怪癖”作斗争。它让代码变得更简洁，也更不易出错。

matchAll返回的迭代器有什么特点？如何有效利用它？

matchAll方法返回的，是一个标准的JavaScript迭代器（Iterator）。这个特性非常关键，因为它决定了你如何消费这些匹配结果，也影响了性能表现。

迭代器的主要特点是惰性求值（Lazy Evaluation）。这意味着matchAll并不会在调用时立即计算出所有的匹配结果并存储起来，而是当你真正需要一个匹配时（比如在for...of循环中），它才会去查找下一个匹配。对于非常大的字符串或者有大量匹配项的场景，这种惰性求值能显著减少内存占用，因为你不需要一次性在内存中保存所有匹配对象。这就像你在看一部很长的电影，不需要把整部电影下载下来才能开始看，而是边下载边播放。

如何有效利用这个迭代器呢？

最直接、也是推荐的方式是使用for...of循环。这是ES6专门为迭代器设计的语法，它能优雅地遍历迭代器中的每一个匹配对象：

const text = "Apple, Banana, Cherry, Date";
const fruitRegex = /\b(\w+a)\b/g; // 匹配以'a'结尾的单词

for (const match of text.matchAll(fruitRegex)) {
  console.log(`找到水果: ${match[0]} (在索引 ${match.index} 处)`);
  // 你可以继续访问 match.groups 或其他属性
}

如果你确实需要一个包含所有匹配对象的数组，比如为了后续的数组方法操作（map, filter等），或者只是为了调试方便，你可以将迭代器转换为数组。最常用的方法是：

1. Array.from()：

   const allMatchesArray = Array.from(text.matchAll(fruitRegex));
   console.log(allMatchesArray);

2. 展开运算符（...）：

   const allMatchesSpread = [...text.matchAll(fruitRegex)];
   console.log(allMatchesSpread);

   这两种方法都会立即遍历整个迭代器，并将所有匹配对象收集到一个新数组中。虽然失去了惰性求值的优势，但在需要数组操作时非常方便。

理解迭代器的特性，能让你在处理文本时做出更明智的选择：如果你只是需要逐个处理匹配，for...of是最高效的；如果需要对所有匹配进行集合操作，再转换为数组。

matchAll与match和exec方法有何不同？何时选择matchAll？

要理解matchAll的价值，就必须把它放到String.prototype.match()和RegExp.prototype.exec()这两个“老前辈”的背景下去看。它们各自有不同的侧重和行为，理解这些差异是选择正确工具的关键。

1. String.prototype.match()

   • 无g标志时：只返回第一个匹配项的完整匹配对象。这个对象包含了捕获组、索引、输入字符串等所有详细信息，与exec返回的类似。

     const str = "hello world hello";
     const result = str.match(/hello/);
     console.log(result); // ["hello", index: 0, input: "hello world hello", groups: undefined]

   • 有g标志时：返回一个包含所有完整匹配字符串的数组。注意，它只返回匹配的字符串本身，不包含捕获组、索引等详细信息。这是它最大的局限性。

     const str = "hello world hello";
     const result = str.match(/hello/g);
     console.log(result); // ["hello", "hello"]

   • 何时选择：当你只需要获取第一个匹配的详细信息，或者你只需要获取所有完整匹配的字符串（不关心捕获组和位置）时。

2. RegExp.prototype.exec()

   • exec方法每次调用时，都会尝试在字符串中查找下一个匹配项。它返回一个完整的匹配对象（与match无g标志时类似），或者在没有更多匹配时返回null。
   • 关键点：如果正则表达式有g标志，exec会更新正则表达式对象的lastIndex属性，从而在下次调用时从上次匹配结束的位置继续查找。你需要手动在一个循环中反复调用exec来获取所有匹配。

     const str = "foo bar baz";
     const regex = /\w+/g; // 注意这里的 'g' 标志
     let match;
     while ((match = regex.exec(str)) !== null) {
       console.log(match); // 每次循环都得到一个完整的匹配对象
     }

   • 何时选择：当你需要逐个处理匹配，并且需要每个匹配的详细信息（包括捕获组和索引），同时可能需要对查找过程进行更细粒度的控制（例如，从特定位置开始查找）。这是matchAll出现之前，获取所有完整匹配的“标准”做法。

3. String.prototype.matchAll()

   • 必须有g标志：如果正则表达式没有g标志，matchAll会抛出TypeError。
   • 返回迭代器：它返回一个迭代器，其中包含了所有匹配项的完整匹配对象（与exec返回的类似）。
   • 无需手动管理lastIndex：matchAll内部处理了这一切，你只需要遍历迭代器即可。
   • 何时选择：
     • 当你需要获取字符串中所有匹配项的完整详细信息（包括捕获组、命名捕获组、索引等）时。
     • 当你希望代码更简洁、更易读，避免手动编写while循环和管理lastIndex的复杂性时。
     • 当你处理大量匹配或大型字符串时，其惰性求值的特性可以提供更好的内存效率。

简而言之，matchAll是match和exec的“集大成者”，它结合了exec提供完整匹配信息的优点，又简化了match在全局查找时的复杂性。如果你需要所有匹配的详细信息，并且希望代码尽可能地简洁和健美，那么matchAll无疑是ES6时代的首选。它把我们从繁琐的手动循环中解放出来，让正则表达式的全局匹配变得前所未有的优雅。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。