如何用 URL.canParse ES2023 在实例化前静默判断字符串是否为合法链接

URL.canParse() 是 ES2023 引入的静态方法，用于无异常地快速校验 URL 字符串语法合法性，返回布尔值；支持可选 base 参数验证相对 URL，但不检查可访问性、协议安全性或 DNS 解析。

URL.canParse() 是 ES2023 引入的静态方法，专为在不抛出异常的前提下快速验证字符串是否符合 URL 语法而设计。它比 new URL(...) 更轻量、更安全，适合做前置校验。

核心用法：直接传入字符串判断

只需调用 URL.canParse(urlString)，返回布尔值：

• true 表示字符串满足基本 URL 格式（如协议、主机等结构合法）
• false 表示格式明显错误（如缺协议、主机名为空、含非法字符等）

例如：

URL.canParse("https://example.com")     // true<br>URL.canParse("ftp://user:pass@host:21/path") // true<br>URL.canParse("not-a-url")             // false<br>URL.canParse("http:///")              // false（缺少主机）<br>URL.canParse("https://")             // false（缺少主机）

与 new URL(...) 的关键区别

传统方式需 try/catch 捕获异常，而 canParse 完全静默：

• new URL("invalid") → 直接抛出 TypeError，必须用异常处理
• URL.canParse("invalid") → 立即返回 false，无副作用
• 它不检查 DNS 可达性、协议是否被支持，也不解析路径或查询参数细节，只做语法层面的快速筛查

配合 base 参数做相对 URL 校验

第二个可选参数 base 允许你以某个基准地址为上下文解析相对路径：

URL.canParse("/api/data", "https://site.com") // true（等价于 https://site.com/api/data）<br>URL.canParse("../img/logo.png", "https://site.com/page/") // true<br>URL.canParse("//cdn.example.com/js/app.js", "https://site.com") // true（协议相对）

这在处理 HTML 中的 href 或 src 属性时很实用，能更贴近实际加载行为判断合法性。

注意事项和常见陷阱

• 仅校验语法，不保证可访问或语义正确（如 https://-invalid-.com 可能返回 true，但实际无效）
• 不校验协议白名单（javascript:、data:、vbscript: 等都可能通过）——若需安全过滤，须额外检查 url.protocol
• IE 和部分旧版 Safari 不支持，使用前建议检测：typeof URL.canParse === 'function'
• 对空字符串、undefined、null 输入均返回 false