URL: parse() 静态方法

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见

URL() 构造函数，如果传递的参数定义了无效 URL，则会抛出异常。
URL.parse() 的填充程序在 core-js 中可用。