MDN 上关于 JavaScript 正则表达式的全新参考页面

在此之前，我们先发布了一个 正则表达式指南，解释了什么是正则表达式以及如何在 JavaScript 中使用它们。该指南包含几个子页面，将内容分为以下部分：

• 断言
• 字符类
• 分组和反向引用
• 量词
• 速查表

这些指南和速查表非常适合刚接触正则表达式或需要复习基本概念的人。我们缺少的是针对那些已经熟悉基本概念并希望快速查找语言功能的特定细节的读者提供的加速器。

更新此主题并添加新文档的第一步是启动了一个 GitHub 讨论，以收集反馈，然后是 Josh 发起的最初的 拉取请求，其中包含建议的更改和新页面的框架。经过几轮修订后，我们很高兴这些更改已纳入 MDN 的内容库，新页面现已上线。

正则表达式参考 是所有新文档的入口点。共有 18 个针对单个功能的新页面，并且已删除包含过时信息的内容。新的参考内容按以下部分和类别进行组织：

• 创建正则表达式 - 如何在 JavaScript 中创建正则表达式
• 标志 - 更改正则表达式解释方式的标志
• 断言 - 如果模式匹配某个条件，例如字符串的开头或词边界
• 原子 - 构成模式的单元，例如字符类和文字字符
• 其他功能 - 像量词这样的功能，可以帮助你组合模式

大多数新文档都位于 原子下组织的内容 中，如果你想编写正则表达式，你可能需要花大部分时间在这里。通过将信息按这种方式组织成部分，现在有一条明确的路径可以找到你需要的信息或更深入地了解功能的工作原理。

为每个功能提供一个参考意味着它在搜索结果中会更加突出，更容易找到。此外，每个页面都包含在侧边栏导航中，因此，如果你找到一个功能的文档，但实际上想查找其他内容，你应该能够快速找到它。

新页面在语法和语义方面非常全面，包含一个描述部分，希望这能帮助你理解在遇到陷阱或注意事项时该如何处理。除了语法和语义之外，查看使用某个功能的示例总是很有帮助的。让我们看看在接下来的几个部分中我最喜欢的几个示例。

捕获组 参考提供了一个很好的示例，展示了如何匹配 YYYY-MM-DD 格式的日期并提取年份、月份和日期。这很有用，因为这是一种常见的操作，你可能需要在没有完整日期解析库的情况下执行它。

function parseDate(input) {
  const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(input);
  if (!parts) {
    return null;
  }
  return parts.slice(1).map((p) => parseInt(p, 10));
}

parseDate("2019-01-01"); // [2019, 1, 1]
parseDate("2019-06-19"); // [2019, 6, 19]

关于正则表达式最常见的抱怨之一是它们很难阅读。如果你使用捕获组，你可以使用 命名捕获组 来使你的模式更容易理解。

function parseLog(entry) {
  const { author, timestamp } = /^(?<timestamp>\d+),(?<author>.+)$/.exec(
    entry,
  ).groups;
  return `${author} committed on ${new Date(
    parseInt(timestamp) * 1000,
  ).toLocaleString()}`;
}

parseLog("1560979912,Caroline"); // "Caroline committed on 6/19/2019, 5:31:52 PM"

这个很好，因为它展示了如何解析日志条目，提取时间戳和作者，并将结果格式化为更易读的内容。第一次阅读代码的人将更容易理解正则表达式在做什么。

Unicode 字符类转义

Unicode 字符类转义 页面提供了一个很好的示例，说明了如何检测字符串是否包含来自不同脚本的字符。这很有用，如果你想检测不同语言的字符串，而无需在模式中手动或穷举地指定某些字符（或字符范围）。

const mixedCharacters = "aεЛ";
// Using the canonical "long" name of the script
mixedCharacters.match(/\p{Script=Latin}/u); // a
// Using a short alias (ISO 15924 code) for the script
mixedCharacters.match(/\p{Script=Grek}/u); // ε
// Using the short name sc for the Script property
mixedCharacters.match(/\p{sc=Cyrillic}/u); // Л

字符类

正则表达式的 字符类 可能被认为是最基本的功能之一，但在参考页面上有一个示例展示了它们如何在某些用例中非常强大。该示例展示了如何匹配十六进制数字，我喜欢这个示例，因为它说明了范围如何与 i 标志结合使用，以在不区分大小写的情况下匹配。

function isHexadecimal(str) {
  return /^[0-9A-F]+$/i.test(str);
}

isHexadecimal("2F3"); // true
isHexadecimal("beef"); // true
isHexadecimal("undefined"); // false

每个正则表达式参考页面都包含 浏览器兼容性数据，用于相应的功能。这意味着浏览器支持信息现在更加细化，你可以看到支持或不支持某个功能的浏览器版本。

正则表达式参考将帮助更高级的用户快速找到他们需要的信息，并帮助初学者更多地了解正则表达式。这些参考也将极大地帮助记录当前正在开发的 v 模式，该模式预计将添加对集合差/减法、集合交集和嵌套字符类的支持。为每个正则表达式功能提供单独的参考页面将使使用 v 标志更详细地解释新功能变得更加容易。有关此标志的更多信息，请查看 TC39 提案。

我们已经介绍了新正则表达式参考页面的一些亮点，我希望你发现它们有用。我们很高兴拥有这些新内容，以及 Josh 和 MDN Web Docs 团队的其他成员所做的重大改进。如果你想深入了解新页面，请务必查看这些参考页面和指南的登录页面：

• 正则表达式参考
• 正则表达式指南

如果你喜欢这篇文章，或者有任何反馈，请随时加入 MDN Web Docs Discord 服务器 中的讨论，或在 GitHub 讨论 中发表评论。

祝你模式匹配愉快！