在前端开发中，我们经常需要处理 URL 地址和路由匹配。path-to-regexp 是一个非常有用的 npm 包，它可以帮助我们将 URL 转换为正则表达式，并且支持参数匹配，让我们可以轻松地进行路由匹配。
安装
安装 path-to-regexp 的命令如下：
--- ------- -------------- ------
基本用法
将 URL 转换为正则表达式的方法如下：
----- ------------ - -------------------------- ----- ---- - --- ----- ------ - ------------------------- ------ -------------------- -- --- ------------------------- ------------------ -- --- - - ----- ----- ------- ---- ---------- ---- --------- ------ ------- ------ -------- ---------- - -
上面的代码将 /user/:id 转换为了正则表达式，并且使用了 keys 数组来存储参数信息。其中 :id 表示该位置可以匹配任何字符串，同时也会将该参数保存到 keys 数组中。
而实际使用时，我们通常会先编译出正则表达式，然后再通过正则表达式进行匹配：
----- ------------ - --------------------------
----- ---- - ---
----- ------ - ------------------------- ------
----- ----- - -------------------------
-- ------- -
----- ------ - ---
--- ---- - - -- - - ------------ ---- -
-------------------- - ------- - ---
-
-------------------- -- --- - --- ----- -
-上面的代码将 /user/123 与正则表达式进行匹配，并且通过 keys 数组获取了参数信息。最终输出了参数对象 { id: '123' }。
高级用法
除了基本用法之外，path-to-regexp 还支持一些高级功能，比如可选参数、重复参数等。
可选参数
在路由中，我们有时需要使用可选参数，这时可以在参数后加上 ? 字符表示该参数为可选。例如：
----- ------------ - -------------------------- ----- ---- - --- ----- ------ - ---------------------------------- ------ -------------------- -- --- ----------------------------------------- ------------------ -- --- - - ----- ----- ------- ---- ---------- ---- --------- ------ ------- ------ -------- ---------- -- - ----- --------- ------- ---- ---------- ---- --------- ----- ------- ------ -------- ---------- - -
在上面的例子中，:action? 表示该参数为可选参数。在正则表达式中，该参数会被转换为 (?:([^\/]+?))?，表示该参数可以匹配 0 或 1 次。
重复参数
有时我们需要使用重复参数，这时可以在参数后加上 + 或 * 字符表示该参数可以重复出现。例如：
----- ------------ - -------------------------- ----- ---- - --- ----- ------ - ---------------------------------- ------ -------------------- -- --- ---------------------------------------------------------- ------------------ -- --- - - ----- ----- ------- ---- ---------- ---- --------- ------ ------- ------ -------- ---------- -- - ----- --------- ------- ---- ---------- ---- --------- ------ ------- ----- -------- ------------------------------ - -
在上面的例子中，:action+ 表示该参数为必须重复出现的参数。在正则表
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/50724