url-pattern 实战清单API 路由、域名解析、版本控制等 5 个真实场景解析【免费下载链接】url-patterneasier than regex string matching patterns for urls and other strings. turn strings into data or data into strings.项目地址: https://gitcode.com/gh_mirrors/ur/url-patternurl-pattern 是一个零依赖的 JavaScript 字符串模式匹配库比正则表达式更简单一行代码把 URL 拆成数据也能把数据拼回 URL。本文用 5 个真实场景——API 路由参数提取、域名解析、版本控制、链接生成、自定义语法——帮你快速掌握它的用法。为什么选 url-pattern 而不是正则写一个匹配 URL 的正则表达式往往要几十行、还难维护而 url-pattern 用一套直观的模式语法就能做到极简核心源码不到 500 行src/url-pattern.coffee零依赖⚡快速模式在创建时一次性编译成正则之后每次匹配都是极速的双向能力match()把字符串变成结构化数据stringify()把数据变回字符串不可变模式创建后不可修改逻辑更稳定、更容易推理可定制所有语法符号都可以换成你自己的字符友好附带 TypeScript 类型定义index.d.ts快速上手3 步完成安装与第一次匹配安装很简单一条 npm 命令即可npm install url-pattern浏览器环境也可直接引用编译产物lib/url-pattern.js。创建模式并匹配const UrlPattern require(url-pattern); const pattern new UrlPattern(/api/users(/:id)); pattern.match(/api/users/10); // { id: 10 } pattern.match(/api/users); // {} pattern.match(/api/products/5); // null不匹配返回 null下面是模式语法速查表建议收藏语法含义示例:name命名段按名字提取值/user/:userId(…)可选段可有可无/api/users(/:id)*通配符匹配任意内容结果存于_/admin*\\转义特殊字符(http(s)\\://)正则对象直接传 RegExp可选传键名数组见场景五场景一API 路由中批量提取路径参数做后端路由时最常见的需求是「从路径里把参数捞出来」。url-pattern 用命名段:开头就能完成const p new UrlPattern(/user/:userId/task/:taskId); p.match(/user/10/task/52); // { userId: 10, taskId: 52 }两个实用技巧同名段自动收为数组/api/users/:ids/posts/:ids匹配后得到{ ids: [10, 5] }不匹配返回 nullp.match(/api/products/5)得null可以安全地用来做路由分支判断更多匹配案例可以参考测试文件test/match-fixtures.coffee它几乎覆盖了各种边界情况。场景二域名解析把 URL 拆成结构化数据处理「子域名 域名 顶级域名」这类结构时正则要写好几层分组url-pattern 一条模式就够const p new UrlPattern((http(s)\\://)(:subdomain.)domain.tld(/*)); p.match(google.de); // { domain: google, tld: de } p.match(https://www.google.com); // { subdomain: www, domain: google, tld: com } p.match(http://mail.google.com/mail); // { subdomain: mail, domain: google, tld: com, _: mail }注意可选段的特性google.de没有协议和子域名结果里就只出现domain和tld两个字段——可选部分缺席时不会污染结果。这对批量解析日志、审计域名归属非常实用。场景三URL 版本控制轻松管理 API 版本号给 API 加版本前缀v1 / v2是常见做法用「可选段 命名段」即可同时捕获主次版本const p new UrlPattern(/v:major(.:minor)/*); p.match(/v1.2/users); // { major: 1, minor: 2, _: users } p.match(/v2/users); // { major: 2, _: users } p.match(/v/); // null缺少版本号直接不匹配拿到major之后你可以轻松实现「v1 只读、v2 支持新字段」这类路由策略甚至配合正则做灰度发布判断。场景四数据变回字符串用 stringify 生成 URL很多框架只擅长「拆」url-pattern 同样擅长「拼」。stringify()用数据和模式反向生成字符串const p new UrlPattern(/api/users(/:id)); p.stringify(); // /api/users p.stringify({ id: 20 }); // /api/users/20典型用途 根据 ID 批量生成详情页、分享链接️ 重定向和 301 规则把旧版 URL 数据渲染成新路径 测试中由同一份数据生成「输入字符串」和「期望输出」避免手工拼写不一致小提醒如果模式中存在必选段而你没传对应值stringify会主动抛错帮你尽早发现数据缺失。场景五自定义语法 正则兼容解决特殊字符串url-pattern 不止能处理 URL任何「有规律的字符串」都行——只要换个分隔符就行const p new UrlPattern(.user.:userId.task.:taskId); p.match(.user.10.task.52); // { userId: 10, taskId: 52 }如果内置符号和字符串冲突可以在构造时通过 options 自定义语法完整选项见index.d.ts中的UrlPatternOptions选项作用默认值escapeChar转义字符\\segmentNameStartChar命名段起始符:wildcardChar通配符*optionalSegmentStartChar/EndChar可选段包裹符()segmentValueCharset命名段可匹配字符集a-zA-Z0-9-_~ %例如把可选段改成[]、通配符改成?就能解析?分隔的查询串。对于 url-pattern 覆盖不到的场景如精确匹配 IP也可以直接传入原生正则并附赠键名数组让结果可读const p new UrlPattern(/^\/api\/([^\/])(?:\/(\d))?$/, [resource, id]); p.match(/api/users/5); // { resource: users, id: 5 }常见问题避坑指南 ❓查询串?之后别硬解析官方建议以?拆分 URL路径部分交给 url-pattern查询部分交给专门处理 query 的库IP 地址请用正则模式模式语法的字符集无法精确表达 IP直接传 RegExp 即可模式只编译一次把new UrlPattern(...)的结果存下来复用不要在高并发路径里重复构造总结场景核心语法一句话能力API 路由:name、(...)批量提取路径参数域名解析可选段 命名段URL 秒变结构化数据版本控制(.:minor)主次版本号一次抓全链接生成stringify()数据反向渲染成 URL特殊字符串options 自定义任意分隔符都能解析url-pattern 用一套比正则更友好的语法同时解决「拆」和「拼」两个方向的问题。无论是做路由、日志解析还是批量生成链接这 5 个场景都足够你落地。想深入了解实现细节建议从src/url-pattern.coffee源码和test/目录下的测试用例读起。【免费下载链接】url-patterneasier than regex string matching patterns for urls and other strings. turn strings into data or data into strings.项目地址: https://gitcode.com/gh_mirrors/ur/url-pattern创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
