MDN JavaScript 正則表示式的新參考頁面

我們 MDN Web Docs 的 JavaScript 正則表示式（regex）文件是我們最受歡迎的資源之一。感謝 Joshua Chen 的努力，我們現在為每個特性都提供了專門的頁面，其中包含更全面的語法和語義資訊，以及瀏覽器相容性資訊。讓我們來看看這些新頁面，它們的資訊是如何組織的，以及新文件如何幫助您編寫 JavaScript 正則表示式。

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

祝您匹配愉快！