在前端开发中，我们经常需要对 URL 进行匹配，提取其中的参数。这时我们可以使用正则表达式来完成这个任务，但是在实现过程中，我们经常需要使用相对复杂的正则规则，这就需要我们使用一些专业的工具库来简化开发工作。
在这篇文章中，我们将对前端常用的一个 URL 匹配库进行详细介绍，它就是 npm 包 @basaltjs/path-to-regexp-es6。
简介
@basaltjs/path-to-regexp-es6 是一个 URL 匹配库，它可以将 URL 和规则字符串转化为正则表达式，同时也支持从 URL 中提取出特定的参数。
相比于其他的 URL 匹配库，@basaltjs/path-to-regexp-es6 的优势在于支持 ES6 标准，代码简洁，并且支持多种编译类型。
安装
我们可以通过 npm 或者 yarn 来安装 @basaltjs/path-to-regexp-es6。
npm install --save @basaltjs/path-to-regexp-es6
或者
yarn add @basaltjs/path-to-regexp-es6
使用
在使用 @basaltjs/path-to-regexp-es6 时，我们需要先定义一个规则字符串，例如：
const rule = '/user/:id';
接着我们可以使用库的 pathToRegExp() 方法将规则字符串转化为正则表达式。我们也可以定义一个选项对象，例如：
const options = {
sensitive: false,
strict: true,
start: true,
end: true
};最后我们可以使用转化后的正则表达式来匹配 URL，并从中提取出参数。例如：
-- -------------------- ---- ------- ------ - ------------ - ---- ------------------------------- ----- ---- - ------------ ----- ------- - - ---------- ------ ------- ----- ------ ----- ---- ---- -- ----- ----- - ------------------ --------- ----- ----- - ------------------------ ---------------------- -- ---
在上面的示例代码中，我们首先定义了一个规则字符串 /user/:id。接着，我们定义了一个选项对象，其中包含了敏感、严格、起始和结束等选项。
最后，我们使用 pathToRegExp() 方法将规则字符串转化为正则表达式，并使用 exec() 方法来匹配 URL。这样我们就可以从 URL 中提取出参数了。
选项
@basaltjs/path-to-regexp-es6 支持多种选项，我们可以根据自己的需求选择其中的相应选项。
sensitive
当 sensitive 为 false 时，匹配规则将不区分大小写。当 sensitive 为 true 时，匹配规则将区分大小写。
示例代码：
-- -------------------- ---- ------- ----- ---- - ------------ ----- ------- - - ---------- ----- -- ----- ----- - ------------------ --------- ----- ----- - ------------------------ ---------------------- -- ---
在上面的示例代码中，我们将 sensitive 设为 false，而 URL 中的 USER 大写字母并没有影响匹配结果。
strict
当 strict 为 false 时，匹配规则将忽略 URL 的末尾是否有 /。当 strict 为 true 时，匹配规则将确保 URL 的末尾有 /。
示例代码：
-- -------------------- ---- ------- ----- ---- - ------------ ----- ------- - - ------- ----- -- ----- ----- - ------------------ --------- ----- ----- - ------------------------ ---------------------- -- ---
在上面的示例代码中，我们将 strict 设为 false，而 URL 中的 / 并没有影响匹配结果。
start
当 start 为 false 时，URL 的起始位置可以是任何位置。当 start 为 true 时，URL 的起始位置必须为规则字符串的起始位置。
示例代码：
-- -------------------- ---- ------- ----- ---- - ------------ ----- ------- - - ------ ----- -- ----- ----- - ------------------ --------- ----- ----- - ------------------------------ ---------------------- -- ---
在上面的示例代码中，我们将 start 设为 false，而 URL 中的 /store/ 并没有影响匹配结果。
end
当 end 为 false 时，URL 的末尾位置可以是任何位置。当 end 为 true 时，URL 的末尾位置必须为规则字符串的末尾位置。
示例代码：
-- -------------------- ---- ------- ----- ---- - ------------ ----- ------- - - ---- ----- -- ----- ----- - ------------------ --------- ----- ----- - --------------------------------- ---------------------- -- ---
在上面的示例代码中，我们将 end 设为 false，而 URL 中的 /?abc=123 并没有影响匹配结果。
总结
在本文中，我们详细介绍了 @basaltjs/path-to-regexp-es6 这个优秀的 URL 匹配库，并提供了示例代码，希望这篇文章能够对你在开发中的 URL 匹配工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc981e8991b448dd4b4