在前端开发过程中，我们常常需要将 URL 匹配到具体的资源，这时我们可以使用正则表达式进行匹配。而 path-to-regexp-es6 是一个方便使用的正则表达式工具库，它能够使用类似 Express 的路由路径字符串，快速生成匹配 URL 的正则表达式。本文将介绍如何使用 npm 包 @0xcda7a/path-to-regexp-es6。
安装
首先，我们需要使用 npm 安装该包，并将其添加到项目中。在命令行中输入以下命令：
npm install @0xcda7a/path-to-regexp-es6
安装完成后，我们在项目中引入该包：
const pathToRegExp = require('@0xcda7a/path-to-regexp-es6');使用
使用该包，我们可以轻松地将 URL 匹配到具体的资源。下面，我们先看一下该包的基本使用方法：
-- -------------------- ---- ------- --- ------- - ------------ --- ---- - ------------ --- ---- - --- -- ---- --- -------- --- ------ - --------------------- ------ --- ------- - ------------------ --------------------- -- ------------ ------ ------ -- ------ ----------- ------------------ -- -- ----- ----- ------- ---- ------- --- ---------- ---- --------- ------ ------- ------ -------- ------ -------- ---------- --
在上面的代码中，我们传入了路由路径字符串 /user/:id 以及该 URL 对应的字符串 /user/123。然后，我们使用 pathToRegExp 方法生成一个正则表达式，该正则表达式可以将 URL 匹配到 /user/:id 的形式。同时，我们在 keys 数组中获取到了 URL 参数 id 参数对应的键值对。这里的 matches 就是 URL 和正则表达式匹配之后获取到的结果。
除此之外，path-to-regexp 还支持自定义正则表达式、可选参数、自定义前后缀等高级功能。下面，我们来介绍具体的用法，以便更好地优化代码。
基本路径匹配
最常用也是最简单的用法，就是使用类似于 Express 的路径字符串匹配 URL。例如：
let pattern = '/books/:id'; let path = '/books/123'; let regExp = pathToRegExp(pattern); let matches = regExp.exec(path); console.log(matches); // ['books/123', '123', index: 0, input: '/books/123']
这里使用了路径字符串 /books/:id 作为匹配规则。
匹配可选参数
有时候，你需要让参数变为可选。这个时候，只需要在路径后面添加 ? 即可：
let pattern = '/books/:id/:chapter?'; let path = '/books/123'; let regExp = pathToRegExp(pattern); let matches = regExp.exec(path); console.log(matches); // ['books/123', '123', undefined, index: 0, input: '/books/123']
这里的 :chapter? 路径字符串中的 ? 表示可选。
自定义分隔符
默认分隔符是 /，但你可以使用你自己的分隔符：
let pattern = '/books/:id(\\d+)-:chapter(\\d+)'; let path = '/books/123-456'; let regExp = pathToRegExp(pattern); let matches = regExp.exec(path); console.log(matches); // ['books/123-456', '123', '456', index: 0, input: '/books/123-456']
自定义参数类型
默认是 [^/]，即除了 / 的任何字符，也可以自定义成你需要的类型：
let pattern = '/user/:id(\\d+)'; let path = '/user/123'; let regExp = pathToRegExp(pattern); let matches = regExp.exec(path); console.log(matches); // ['user/123', '123', index: 0, input: '/user/123']
编码和解码
如果 URL 中含有非 ASCII 字符，我们需要对其进行编码：
let pattern = '/books/:title';
let title = '你好世界';
let path = `/books/${encodeURIComponent(title)}`;
let regExp = pathToRegExp(pattern);
let matches = regExp.exec(path);
console.log(matches); // ['books/%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C', '%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C', index: 0, input: '/books/%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C']排除路径中的某个字符串
如果不想让 path-to-regexp 提取出某个关键词，可以使用 ?: 来代替普通的 :
let pattern = '/books/:id/:book(?:.*)?'; let path = '/books/123/harry-potter'; let regExp = pathToRegExp(pattern); let matches = regExp.exec(path); console.log(matches); // ['books/123/harry-potter', '123', index: 0, input: '/books/123/harry-potter']
参数分组
可以分组，在生成正则时提供一个分组的标记：
let pattern = '/books/:id-:chapter([a-z]+)/:count(\\d+)'; let path = '/books/123-a/25'; let regExp = pathToRegExp(pattern); let matches = regExp.exec(path); console.log(matches); // ['books/123-a/25', '123', 'a', '25', index: 0, input: '/books/123-a/25']
这里，我们使用括号将 :chapter([a-z]+) 和 :count(\\d+) 分组。
总结
以上就是我们对 npm 包 @0xcda7a/path-to-regexp-es6 的介绍，能够快速地将 URL 匹配到具体的资源。同时，该包支持自定义正则表达式、可选参数、自定义前后缀等高级功能。希望这篇文章对你在前端开发工作中有所指导意义，也希望你能够在项目中灵活使用该包，快速开发高质量的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ffe81e8991b448ddce7