JavaScript URL.canParse 怎样在创建 URL 前判断地址能否解析

如果代码只是想判断一个字符串能不能交给 URL 解析，不必先用异常来驱动正常分支。URL.canParse() 会直接返回布尔值：绝对 URL 可以只传一个参数，相对 URL 则要同时提供 base。它和 new URL() 的可解析范围一致，但调用方可以先拿到 true 或 false 再决定是否创建对象。

官方地址：https://developer.mozilla.org/en-US/docs/Web/API/URL/canParse_static

本文只讨论输入预检、相对地址的基准、异常模型和兼容降级。通过预检不代表地址一定能访问，也不代表它符合业务允许的协议、域名或安全策略。

先把 URL 预检和对象创建分开

接口目标很简单：把“地址能不能被 URL 算法解析”变成一个不抛异常的判断。调用方通常还需要根据结果决定是否保存链接、拼接接口路径或继续读取 href。

例如处理绝对地址时，可以先判断，再创建对象：

const candidates = [
  "https://api.example.test/items",
  "not a url"
];

for (const value of candidates) {
  // 先得到布尔结果，避免把普通的无效输入当成异常流程。
  const accepted = URL.canParse(value);

  if (!accepted) {
    // 业务层可以显示提示、丢弃输入或记录原因。
    console.log("地址无法解析：", value);
    continue;
  }

  // 只有预检通过后才创建 URL 对象并读取标准化结果。
  const parsed = new URL(value);
  console.log(parsed.href);
}

这里的 true 只说明 URL 解析算法可以处理输入，false 则说明按当前参数无法构造出 URL。它不会发起网络请求，也不会替你判断接口是否存在。

相对地址必须提供 base

相对地址没有独立的协议和主机，URL.canParse("/items") 没有足够上下文，因此结果是 false。把页面来源或服务根地址作为第二个参数，解析才有明确基准：

const baseUrl = "https://api.example.test/v1/";
const relativePath = "items?limit=20";

// 相对地址依赖 base，先判断两个参数组合是否可解析。
if (URL.canParse(relativePath, baseUrl)) {
  // 预检通过后，URL 构造器会给出解析后的绝对地址。
  const requestUrl = new URL(relativePath, baseUrl);
  console.log(requestUrl.href);
} else {
  // base 缺失或格式错误时，统一走输入错误分支。
  console.log("相对地址缺少可用的解析基准");
}

例如 items?limit=20 会相对于 https://api.example.test/v1/ 解析。若把 baseUrl 换成不完整的字符串，或者相对地址和基准的组合不满足 URL 语法，结果仍然是 false。

参数语义决定判断结果

URL.canParse(url, base) 的第一个参数可以是字符串，也可以是能被字符串化的对象。第二个参数只在第一个参数是相对地址时提供基准；如果第一个参数已经是绝对 URL，传入的 base 不会改变它的解析结果。

const absolute = "https://cdn.example.test/app.js";
const unrelatedBase = "https://other.example.test/";
const relative = "/app.js";

// 绝对 URL 已经包含来源，base 参数在这里不会替换它。
console.log(URL.canParse(absolute, unrelatedBase)); // true

// 相对 URL 需要 base 才能得到确定的绝对地址。
console.log(URL.canParse(relative, unrelatedBase)); // true
console.log(URL.canParse(relative)); // false

// URL 对象会按其 href 被字符串化后参与判断。
const baseObject = new URL("https://api.example.test/");
console.log(URL.canParse("v1/items", baseObject)); // true

因此不要把第二个参数理解成“强制替换域名”的开关。它是相对引用的解析基准；第一个参数已经是绝对地址时，业务代码仍应以第一个参数为准。

把预检接入可复用的解析函数

在表单、配置文件或接口返回值中，调用方往往还要兼容没有 URL.canParse 的旧运行环境。可以把能力探测和降级封装在一个函数里，让业务层只处理“得到 URL”或“返回空值”两种结果：

function tryCreateUrl(rawValue, baseValue) {
  // 用统一的能力探测决定是否使用布尔预检接口。
  const canParse = typeof URL.canParse === "function"
    ? URL.canParse
    : (value, base) => {
        try {
          // 旧环境用构造器复现相同的可解析判断。
          new URL(value, base);
          return true;
        } catch {
          // 构造失败只代表输入不可解析，不让异常泄漏到业务层。
          return false;
        }
      };

  // 相对地址没有 base 时，预检自然返回 false。
  if (!canParse(rawValue, baseValue)) {
    return null;
  }

  // 预检和创建使用同一组参数，避免判断条件与最终结果分叉。
  return new URL(rawValue, baseValue);
}

const parsed = tryCreateUrl("docs/start", "https://example.test/");
if (parsed) {
  // 业务代码只接收已经完成语法解析的 URL 对象。
  console.log(parsed.pathname);
}

这个封装的重点不是隐藏所有异常，而是把“正常输入判断”与“真正不可预期的程序错误”分开。若业务还要求只允许 https:，应在得到对象后继续检查 parsed.protocol；若只允许固定域名，也要显式比较 parsed.hostname。

可解析不等于业务上可接受

下面的表格适合放进调用前的速查逻辑：

尤其要注意最后一行：URL.canParse() 是语法和解析层面的 API，不是权限校验、域名信誉判断或安全过滤器。外部输入仍然要经过协议、主机、路径和业务权限检查。

常见问题

URL.canParse() 和 new URL() 有什么区别？

两者对同一组参数的可解析判断保持一致。前者返回布尔值，适合把无效输入作为普通分支处理；后者直接创建对象，失败时会抛出异常。

为什么 URL.canParse("/path") 会返回 false？

因为 /path 是相对地址，缺少协议和主机。传入合法的 base 后，解析器才知道应当把它挂到哪个来源下。

canParse 返回 true 后还要检查什么？

根据业务继续检查协议、主机、端口、路径和权限。可解析只说明输入能变成 URL 对象，不代表它就是允许访问的目标。

实际使用时，可以把判断顺序固定为：先确认运行环境是否提供 URL.canParse，再用同一组 url 与 base 做预检，最后创建对象并执行业务白名单检查。这样既能减少用异常处理普通输入的代码，也能把相对地址的基准语义写清楚。