URLPattern 如何同时匹配可选语言前缀和资源 ID

如果同一资源同时有 /article/42 和 /zh/article/42 两种地址，URLPattern 可以用一条 pathname 规则完成匹配：把 {/:lang}? 作为可选语言段，再用 /:id(\d+) 捕获数字资源 ID。关键是把语言段前面的斜杠也放进可选组，否则没有语言时容易留下多余斜杠。

官方文档：https://developer.mozilla.org/en-US/docs/Web/API/URLPattern

推荐模式：{/:lang}?/article/:id(\d+)。test() 只负责判断是否匹配，真正需要路由参数时使用 exec() 读取命名分组。

可选语言前缀应该放进哪个分组

先只描述路径，不急着写完整 URL。对象形式更容易看清每个 URL 部分的职责：

const articlePattern = new URLPattern({
  // 语言段存在时匹配 /zh，缺省时连同前面的斜杠一起省略
  pathname: "{/:lang}?/article/:id(\\d+)"
});

这里的花括号是 URLPattern 的组分隔符，不会在结果里产生一个额外捕获值；问号让整个组可选。因为组内包含 /，所以 /zh 会整体出现或整体消失。剩下的 /article/ 是固定路径，避免把任意第一段误当成语言。

为什么资源 ID 要写成命名组加正则

只写 :id 也能捕获一段路径，但它不会阻止 abc 这样的输入。资源 ID 如果约定为数字，直接把约束写在组名后面：

const articlePattern = new URLPattern({
  // 只捕获一段数字，避免把字母 ID 或额外路径吞进去
  pathname: "{/:lang}?/article/:id(\\d+)"
});

const cases = [
  "/article/42",       // 无语言前缀，应该匹配
  "/zh/article/42",    // 有语言前缀，应该匹配
  "/zh/article/abc",   // ID 不是数字，不匹配
  "/zh/article/42/edit" // 多出路径段，不匹配
];

for (const pathname of cases) {
  // test() 只回答当前 pathname 是否满足整条规则
  console.log(pathname, articlePattern.test({ pathname }));
}

路径名中的分组默认按斜杠分段，(\d+) 又把 ID 收窄为一段或多段数字。这个限制很适合前端路由入口：格式不对时尽早交给 404 或其他规则，不要等到组件内部才判断。

用 exec() 同时取出语言和资源 ID

需要给页面选择语言或请求接口时，调用 exec()。它匹配失败会返回 null，成功后在 pathname.groups 中按命名组取值：

function parseArticlePath(pathname) {
  // 失败返回 null，调用方可以继续尝试其他路由
  const result = articlePattern.exec({ pathname });
  if (!result) return null;

  // 可选组缺省时 lang 可能没有值，业务层统一成默认语言
  const { lang, id } = result.pathname.groups;
  return {
    lang: lang || "zh",
    id
  };
}

console.log(parseArticlePath("/article/42"));
console.log(parseArticlePath("/en/article/42"));

不要把 exec() 的结果当成验证后的业务对象。它只能说明字符串符合这条模式；权限、资源是否存在、语言是否在产品支持列表内，仍应由后续逻辑处理。

兼容性和边界怎么检查

URL Pattern API 是较新的 Web 平台能力，MDN 当前将它标为 Baseline 2025，但旧浏览器和旧内嵌 WebView 仍可能没有 URLPattern。上线前先判断 "URLPattern" in globalThis；不满足时可以引入经过评估的 polyfill，或用 URL 加数组分段做小范围降级。

还有三个容易踩坑的点：第一，语言段是可选组时要把斜杠一起放进组；第二，命名组的值来自 pathname，不会自动完成权限或资源查询；第三，若改用完整 URL 字符串构造器，:、? 等字符可能同时具有 URL 分隔符和模式语法含义，对复杂规则优先使用对象形式。

相关问答

为什么不直接写两个 URLPattern？

两个规则当然可以，但可选组能把两种 pathname 的共同部分集中维护。只有两条路径的业务含义完全不同，或需要不同优先级时，才更适合拆开。

语言前缀缺失时 groups.lang 一定是空字符串吗？

可选命名组在未匹配时可能得到未定义值，调用方应按默认语言归一化，不要依赖某个具体的空值表现。

URLPattern 能代替后端路由校验吗？

不能。它适合做 URL 形状匹配和参数提取；鉴权、资源存在性、区域策略与最终输入校验仍必须在服务端执行。

记住一条规则就够了：把“可选的语言段”与它的斜杠组成一个组，把“资源 ID 的格式”写进命名组的正则，再用 test() 做形状判断、用 exec() 取参数。