URLPattern.test()仅做布尔匹配,不解析、不解码、不补全URL;必须传URL实例或含protocol/hostname/pathname等字段的对象,不能传纯字符串,且不提取参数值。

URLPattern.test() 不能替代 new URL() 解析 URL
URLPattern.test() 只做模式匹配,不解析、不解码、不补全。比如 new URL("/foo%20bar", "https://a.com") 会正确解码成 https://a.com/foo bar,但 URLPattern 把 %20 当作字面字符串,完全不处理编码;又比如 new URL("api/users", "https://a.com/") 自动拼出完整地址,而 URLPattern 的 pathname 模式只比对传入的原始字符串,不管相对路径语义。
test() 的参数必须是完整 URL 对象或显式各段对象
直接传字符串会报错:URLPattern.test("https://example.com/foo") ❌ 不合法。必须传 URL 实例或带 protocol、hostname、pathname 等字段的对象:
- ✅ 正确:
const pattern = new URLPattern({ pathname: "/users/:id" }); pattern.test(new URL("https://a.com/users/123")) - ✅ 正确(显式分段):
pattern.test({ pathname: "/users/123" }) - ❌ 错误:
pattern.test("/users/123")—— 不是对象,也不含必要字段 - ⚠️ 注意:
test({ pathname: "/users/123" })不校验协议或域名,只比对 pathname 段;若需全路径约束,得同时提供protocol和hostname
路由参数(如 :id)在 test() 中不提取,只做占位匹配
URLPattern 的 test() 返回布尔值,不返回捕获结果。想拿到 :id 的值,得用 exec():
- ✅ 匹配并取参:
const result = pattern.exec(new URL("https://a.com/users/456")); console.log(result.pathname.groups.id); // "456" - ❌ 仅
test()无法知道:id是什么,它只回答“符不符合模式” - ⚠️ 参数名大小写敏感:
pathname: "/users/:ID"和/users/123不匹配,因为ID ≠ id - ⚠️ 通配符
*和正则约束(如:id(\d+))会影响test()结果,但错误写法(如漏转义括号)会导致构造失败,而非匹配失败
常见失败原因:协议/主机未对齐、pathname 开头缺 /、编码字符未预处理
以下情况 test() 会返回 false,但未必是模式写错了:
立即学习“前端免费学习笔记(深入)”;
- 传入的
URL对象 protocol 是"http:",而 pattern 定义了{ protocol: "https" } -
pathname值是"users/123"(缺开头/),但 pattern 写的是"/users/:id"—— 必须严格一致 - URL 含未解码字符(如
%E4%BD%A0),pattern 却按明文汉字写"/用户/:id"→ 不匹配;应统一用编码后字符串或提前decodeURIComponent() - 使用
pathname: "*"时,实际传入的pathname是"/",但*默认不匹配空段;要支持根路径,得写"/:path*"或"/*"(部分浏览器行为不一致)
真正容易被忽略的是:pattern 构造时若某字段(如 hostname)没设,test() 就默认允许任意值;但一旦写了,就必须精确匹配——这不是“宽松”或“严格”的选择,而是字段级开关。



















