、* 与 \ 四大核心符号一图掌握)
url-pattern 语法速查表:name、()、* 与 \ 四大核心符号一图掌握【免费下载链接】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是一个零依赖的轻量级字符串匹配模式库口号是比正则更简单用可读的语法描述 URL 和任意字符串把字符串变成数据match或把数据变回字符串stringify。整套语法仅由四大核心符号构成:name命名段、()可选段、*通配符和\转义。这份速查表带你一分钟把它们一次掌握 ⚡ 一分钟了解 url-pattern字符串匹配比正则更简单手写正则解析 URL 很痛苦括号层层嵌套、转义满屏都是。url-pattern 只给你 4 个直觉符号var pattern new UrlPattern(/api/users/:id); pattern.match(/api/users/10); // {id: 10} pattern.match(/api/products/5); // null不匹配 pattern.stringify({id: 20}); // /api/users/20每个模式对象构造时是不可变的且只会被编译成正则一次之后的每次匹配都极快。官方文档见 README.md。️ url-pattern 语法速查表四大符号一图速查符号名称作用最小示例:name命名段把一段字符串提取为键值对/api/users/:id()可选段包裹可能存在、也可能不存在的内容/api/users(/:id)*通配符匹配任意内容结果收进_键/admin*\转义让特殊符号按普通字符处理:scheme\\://:host底层编译对照表模式最终如何变成正则url-pattern 语法等效正则:name([a-zA-Z0-9-_~ %])(…)(?:…)?*(.*?)\:字面量:⭐:name命名段如何从 URL 中提取命名片段命名段以:开头后面是名称名称只能包含a-zA-Z0-9。匹配时它会按顺序消费值字符集中的字符遇到/、.、?、等就停下var pattern new UrlPattern(/user/:range); pattern.match(/user/10-20); // {range: 10-20} pattern.match(/user/10%20); // {range: 10%20}也就是说默认的值字符集是a-zA-Z0-9-_~ %横杠、下划线、空格、百分号都能被完整捕获非常适合范围、标签这类含分隔符的值。同名多次出现会自动合并为数组这是官方内置的贴心行为var pattern new UrlPattern(/api/users/:ids/posts/:ids); pattern.match(/api/users/10/posts/5); // {ids: [10, 5]}⭕()可选段如何处理长短不一的 URL用()把一部分包裹起来即声明这部分可以有也可以没有。可选段可以任意深度嵌套var pattern new UrlPattern(/api/users(/:id)); pattern.match(/api/users/10); // {id: 10} pattern.match(/api/users); // {}两条实用规则可选的命名段只有真正出现时才会出现在结果对象里不会出现id: undefined纯静态的可选内容如(/foo)匹配后不产生任何键。*通配符如何匹配任意内容并落在_键通配符与命名段的区别是它没有字符集限制可以跨过/匹配任意内容所有通配符的匹配结果统一收进_键var pattern new UrlPattern(*/user/:userId); pattern.match(/school/10/user/10); // {_: /school/10, userId: 10}只有 1 个通配符→_是字符串多个通配符→_是按出现顺序排列的数组new UrlPattern(/admin/*/user/*/tail) .match(/admin/school/10/user/10/12/tail); // {_: [school/10, 10/12]}\转义如何给特殊符号加引号(、)、:、*四个符号在模式里都有特殊含义想让它们变回普通字符就用\前缀。最经典的场景就是解析 URL——http://里的冒号不转义就会被误认为命名段的开头new UrlPattern(:scheme\\://:host(\\::port)) 小提示在 JavaScript 源码中反斜杠要写成双份\\模式本身的实际写法是单个\。 完整示例四大符号联手解析一个完整 URL官方文档的招牌 demo 是四符号合体的最佳示范var pattern new UrlPattern( (http(s)\\://)(:subdomain.):domain.:tld(\\::port)(/*) ); pattern.match(google.de); // {domain: google, tld: de} pattern.match(https://www.google.com); // {subdomain: www, domain: google, tld: com} pattern.match(http://mail.google.com:80/mail); // {subdomain: mail, domain: google, tld: com, port: 80, _: mail}分工非常清晰()让协议头和端口变成可选\把http://与://里的冒号锁死为普通字符:subdomain、:domain、:tld负责提取命名片段末尾*兜住剩余部分。 双向转换如何用 stringify 从数据生成 URL同一个模式对象可以反向工作——把键值对填回模式生成字符串。可选段只有在提供了对应值时才会出现在输出里var pattern new UrlPattern(/api/users(/:id)); pattern.stringify(); // /api/users pattern.stringify({id: 20}); // /api/users/20必填段缺值时会直接抛错避免你悄悄生成一个残缺的 URL——这正是模式即契约的好处。️ 进阶如何自定义 url-pattern 的语法符号四大符号全部可以换。构造函数的第二个参数即选项类型定义见 index.d.ts选项默认值含义escapeChar\转义字符segmentNameStartChar:命名段起始符optionalSegmentStartChar/optionalSegmentEndChar(/)可选段定界符wildcardChar*通配符segmentNameCharseta-zA-Z0-9名称允许字符集segmentValueCharseta-zA-Z0-9-_~ %值允许字符集例如把通配符换成?、命名段起始符换成$、可选段换成[]、转义符换成!就能得到一套与 JS 正则完全隔离的自定义语法特别适合处理本身就大量包含*?的文件路径。 快速上手安装 url-pattern 并运行第一个模式两种方式任选npm 安装npm install url-pattern克隆仓库git clone https://gitcode.com/gh_mirrors/ur/url-pattern浏览器中直接引用编译产物 lib/url-pattern.js 即可它同时支持 CommonJS、AMD 和浏览器全局变量Node 端则用require(url-pattern)。来一个综合小例子var UrlPattern require(url-pattern); var pattern new UrlPattern(/v:major(.:minor)/*); pattern.match(/v1.2/); // {major: 1, minor: 2, _: } pattern.match(/v2/users); // {major: 2, _: users}一行模式同时体现了:name、()与*三个符号的配合非常适合作为你的第一个 url-pattern 练习。 代码导读源码与测试用例在哪里看文件路径内容src/url-pattern.coffee核心实现不到 500 行含解析器与正则编译lib/url-pattern.js编译产物可直接用于浏览器index.d.tsTypeScript 类型定义含全部自定义选项test/match-fixtures.coffee数百条 match 匹配测试用例test/stringify-fixtures.coffeestringify 生成字符串测试用例test/errors.coffee、test/ast.coffee、test/parser.coffee错误处理、AST 与解析器测试想看更多真实场景match-fixtures 里的每个用例都是模式 → 输入 → 输出三件套照着读一遍相当于免费教程。❓ 常见问题Q1query 部分?a1b2能直接匹配吗官方建议不要。query 的语义与路径差异很大推荐在?处拆开后只对前半段使用 url-pattern详见 README 的 FAQ 章节。Q2能匹配 IP 地址吗默认值字符集无法精确表达 IP此时可以直接向构造函数传入正则对象——url-pattern 对正则输入同样兼容还能传入键名数组把捕获组映射成对象。Q3模式字符串里能有空格吗不能。构造函数会拒绝包含空白的模式串并抛出错误。若被匹配的值里可能含空格默认的segmentValueCharset已包含空格无需额外处理。Q4模式和正则怎么选日常 URL/路径解析优先用模式语法可读性高、可双向 stringify遇到 IP、复杂数字段等边界场景再退回正则输入即可两套输入方式可以混用。一句话总结:name提片段、()做可选、*通一切、\锁特殊——四个符号组合起来不写一行正则也能解析和生成任意 URL。这就是 url-pattern 的完整语法祝你用得顺手【免费下载链接】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），仅供参考
)
