URL：parse() 静态方法

Baseline 2024

新推出

自 2024 年 9 月起，此功能已可在最新设备和浏览器版本上使用。此功能可能无法在旧设备或浏览器上使用。

注意：此功能在 Web Workers 中可用。

URL.parse() 静态方法是 URL 接口的一个方法，它返回一个新创建的 URL 对象，该对象表示由参数定义的 URL。

如果给定的基础 URL 或生成的 URL 不是可解析且有效的 URL，则返回 null。这是使用 URL() 构造函数在 try...catch 块中构造 URL 的替代方法，或者使用 canParse() 来检查参数并在方法返回 false 时返回 null。

语法

URL.parse(url)
URL.parse(url, base)

参数

url

一个字符串或任何其他具有字符串化器的对象，表示一个绝对 URL 或一个相对 URL 引用。如果 url 是一个相对引用，则 base 是必需的，并用于解析最终的 URL。如果 url 是一个绝对 URL，则给定的 base 将不会用于创建生成的 URL。

base 可选

一个字符串，表示在 url 是相对 URL 时使用的基础 URL。如果未指定，则默认为 undefined。

当您指定 base URL 时，解析后的 URL 不仅仅是 url 和 base 的简单连接。父目录和当前目录的相对引用是相对于 base URL 的当前目录解析的，该目录仅包含最后一个正斜杠之前的路径段，但不包含之后的任何内容。根目录的相对引用是相对于基础源解析的。有关更多信息，请参阅解析 URL 的相对引用。

注意： url 和 base 参数都会被字符串化，无论您传入什么值，例如 HTMLAnchorElement 或 HTMLAreaElement 元素，就像其他接受字符串的 Web API 一样。特别是，您可以将现有的 URL 对象用于任一参数，它将从对象的 href 属性进行字符串化。

返回值

如果参数可以解析为有效的 URL，则返回 URL；否则返回 null。

示例

解析 URL 的相对引用和 URL() 构造函数提供了更多示例，演示了不同的 url 和 base 值如何解析为最终的绝对 URL（尽管主要使用 URL()）。

使用 URL.parse()

此实时示例演示了如何对几个不同的绝对和相对引用值使用 URL.parse() 静态方法。

<pre id="log"></pre>

#log {
  height: 100px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

首先，我们使用条件 "parse" in URL 检查 URL.parse() 方法是否受支持。如果该方法受支持，我们将记录检查绝对 URL、相对引用和基础 URL、具有更复杂基础 URL 的相对引用、具有有效基础 URL（未使用）的有效绝对 URL 以及导致方法返回 null 的无效基础 URL 的结果。

我们还记录了 URL.parse() 不受支持的情况。

if ("parse" in URL) {
  // Absolute URL
  let result = URL.parse("https://mdn.org.cn/en-US/docs");
  log(`[1]: ${result.href}`);

  // Relative reference to a valid base URL
  result = URL.parse("en-US/docs", "https://mdn.org.cn");
  log(`[2]: ${result.href}`);

  // Relative reference to a "complicated" valid base URL
  // (only the scheme and domain are used to resolve url)
  result = URL.parse(
    "/different/place",
    "https://mdn.org.cn:443/some/path?id=4",
  );
  log(`[3]: ${result.href}`);

  // Absolute url argument (base URL ignored)
  result = URL.parse(
    "https://example.org/some/docs",
    "https://mdn.org.cn",
  );
  log(`[4]: ${result.href}`);

  // Invalid base URL (missing colon)
  result = URL.parse("en-US/docs", "https//mdn.org.cn");
  log(`[5]: ${result}`);
} else {
  log("URL.parse() not supported");
}

最后，下面的代码通过将 URL 对象传递给 base 参数来演示参数不一定是字符串。

if ("parse" in URL) {
  // Relative reference with base URL supplied as a URL object
  result = URL.parse("/en-US/docs", new URL("https://mdn.org.cn/"));
  log(`[6]: ${result.href}`);
}

每次检查的结果如下所示。

规范

规范
URL # dom-url-parse

浏览器兼容性

另见

URL() 构造函数，如果传入的参数定义了无效的 URL，则会抛出错误
core-js 中提供了 URL.parse() 的 polyfill

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年6月23日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的某个问题