url.canparse() 是 es2023 引入的静态方法，用于无异常地校验字符串是否符合基本 url 语法结构，仅检查协议、host 及 uri 框架，不解析路径或查询参数；支持 base 参数判断相对 url，但默认不接受相对路径，且对 ftp://、file:// 等协议也返回 true，需业务层额外过滤。
URL.canParse() 是什么，它能做什么
URL.canParse() 是 ES2023 引入的静态方法，用于在不抛出异常的前提下快速判断一个字符串是否符合 URL 语法规范。它不创建 URL 实例，也不解析或标准化路径、查询参数等，只做最轻量的结构校验：协议是否存在、是否有合法 host（或 IP）、是否满足基本 URI 语法框架。
为什么不能直接用 new URL(string)
用 new URL(string) 做校验会触发完整解析流程，遇到非法字符串（如缺少协议、空 host、含控制字符）时抛出 TypeError，必须用 try/catch 捕获。这在高频校验场景（如表单实时验证、批量数据清洗）中开销略高，且语义上“实例化只是为了判断”也不够清晰。
-
new URL("www.example.com")→ 抛出TypeError: Invalid URL -
URL.canParse("www.example.com")→ 返回false，无异常 -
URL.canParse("https://example.com/path?k=v#frag")→ 返回true - 相对 URL（如
"./index.html"、"/api"）默认返回false，除非显式传入 base 参数
浏览器兼容性与降级方案
截至 2026 年 4 月，URL.canParse() 已在 Chrome 117+、Firefox 119+、Safari 17.4+、Edge 117+ 原生支持；但旧版 Safari（≤17.3）和部分 Electron 内核仍不支持。若需兼容，可按以下顺序 fallback：
- 优先使用
URL.canParse(string) - 若报
TypeError或undefined，退回到try { new URL(string); return true; } catch { return false; } - 不建议用正则硬匹配——RFC 3986 允许的 host 和 path 组合远比常见正则复杂，容易漏判或误判
core-js 提供了 polyfill：import 'core-js/stable/url/can-parse';，但仅适用于构建时可控的项目，CDN 场景慎用。
base 参数的实际用途
URL.canParse() 支持第二个参数 base，用于判断相对 URL 是否能在某上下文中解析为绝对 URL：
URL.canParse('./path', 'https://a.com/base/') // true
URL.canParse('../img.png', 'https://b.net/a/b/c/') // true
URL.canParse('mailto:test@example.com') // false（不支持 mailto 协议）
URL.canParse('data:text/plain,hello') // true（data URL 被支持）
注意：base 必须本身是合法绝对 URL，否则会直接报错；该能力常用于 HTML 解析器、Markdown 链接预处理等需要上下文感知的场景，普通表单校验几乎用不到。
真正容易被忽略的是协议白名单控制——URL.canParse() 对 ftp://、file://、blob: 等都返回 true，但业务上往往只接受 http 和 https。这时必须额外检查 new URL(string).protocol，或者用正则先筛掉非目标协议再调用 canParse。
