ES2023 URL.canParse()：解析前校验合法链接

在日常开发中，校验用户输入的URL地址常常需要借助 try/catch 来捕获 new URL() 抛出的异常。ES2023 引入的 URL.canParse() 提供了一种“先问后做”的策略——先询问浏览器该字符串能否解析，再决定是否实际构造。但有一点必须明确：它并不能完全取代 try/catch。

URL.canParse() 能否替代 try/catch 进行链接校验

答案是不能完全替代，但可以作为一道高效的前置过滤网。它仅执行语法层面的校验，不会检查协议是否受支持、域名是否真实存在，甚至不关心 http:// 后面是否带有斜杠。一个经典的例子：URL.canParse("http:/example.com") 返回 true，而紧接着的 new URL() 会抛出 TypeError: Invalid URL。换句话说，它能够快速筛掉那些一眼看出有明显硬伤的错误输入，比如 "htp://" 或 "https//example.com" 这类写法，从而避免在表单实时校验或批量数据清洗时被异常打断。然而，遇到“语法正确但实际不可用”的情况，它就会放行。

常见误判场景与边界情况

以下输入都会让 URL.canParse() 返回 true，但在实际使用中却可能遇到问题：

• URL.canParse("ja vascript:alert(1)") → true。语法上这是一个合法的 URL scheme，但现代浏览器通常会直接拦截执行，并非您想要使用的链接。
• URL.canParse("file:///etc/passwd") → true。文件协议语法合法，但在跨域或权限限制下根本无法访问。
• URL.canParse("https://[::1]:8080/") → true。IPv6 字面量必须使用方括号，漏掉就会返回 false；端口号是可选的，https://[::1]/ 同样返回 true。
• URL.canParse("https://") → false。必须包含 host 或 path，空 host 不可行，这一判断相当干脆。

与 new URL() 的配合使用建议

生产环境中最稳妥的做法是组合使用：先用 URL.canParse() 快速拦截明显不合理的字符串，再通过 new URL() 获得结构化结果，进一步进行语义层面的判断。例如，要校验用户提交的跳转地址是否合法，通常需要确保它是 HTTP/HTTPS 协议且包含有效的 host：

function isValidHttpUrl(input) {
  if (!URL.canParse(input)) return false;
  try {
    const url = new URL(input);
    return url.protocol === 'http:' || url.protocol === 'https:';
  } catch {
    return false;
  }
}

注意，这里的 try/catch 绝对不能省略——URL.canParse() 并不能保证 new URL() 百分之百成功，它只是减少了异常触发的频率，而非替代方案。

兼容性与降级方案

URL.canParse() 是 ES2023 新增的 API，Chrome 117+、Firefox 119+、Safari 17.4+ 才开始支持。在旧浏览器上调用它会直接报 TypeError: URL.canParse is not a function。进行降级处理时，可以使用一个简单的正则粗略过滤，但切记这只能应对最基本的情况，在安全敏感场景下并不可靠：

function fallbackCanParse(str) {
  if (typeof URL.canParse === 'function') {
    return URL.canParse(str);
  }
  // 仅匹配常见 http/https 开头 + 至少一个点或 IP 格式
  return /^https:\/\/[^\s\/$.#].[^\s]*$\/.test(str);
}

如果项目对 URL 校验的准确性要求较高，最终还是需要依赖 new URL() 配合 try/catch。URL.canParse() 的价值在于减少异常出现的次数，而非让异常消失。