解析指向 URL 的相对引用

可以使用 URL() 构造函数或 URL.parse() 静态方法（属于 URL API）将相对引用和基本 URL 解析为绝对 URL。

两种方法都最多接受两个字符串参数，并返回一个表示绝对 URL 的 URL() 对象。第一个参数表示绝对 URL 或指向 URL 的相对引用，而第二个参数是基本 URL，用于在第一个参数中指定相对引用的情况下解析相对引用。两种方法以相同的方式解析相对引用，区别在于 URL() 构造函数会在传递无效 URL 时抛出异常，而 parse() 则返回 null。

以下代码演示了在相同 url 和 base URL 值下如何使用这些方法。

const url = "articles";
const base = "https://mdn.org.cn/some/path";
const constructorResult = new URL(url, base);
// => https://mdn.org.cn/some/articles
const parseResult = URL.parse(url, base);
// => https://mdn.org.cn/some/articles

从示例中可以看出，从提供的基本 URL 和相对引用解析 URL 不仅仅是将提供的参数连接起来。

在本例中，传递了一个相对于当前目录的路径（articles）。base URL 的当前目录是 URL 字符串直到最后一个正斜杠。这里 https://mdn.org.cn/some/path 没有尾随正斜杠，因此当前目录是 https://mdn.org.cn/some/，因此解析为最终 URL https://mdn.org.cn/some/articles。

相对引用使用相对于以下位置的路径引用来解析为基本 URL：当前目录（./）、当前目录的父目录（../）或站点根目录（/）。以下部分介绍了每种类型的相对路径是如何解析的。

当前目录相对

以 ./ 或无前缀开头的相对引用，例如 ./article、article 或 ./article/，相对于 base 参数所表示的 URL 的当前目录。

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

#log {
  height: 90px;
  padding: 0.5rem;
  border: 1px solid black;
}

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

base URL 的当前目录是 URL 字符串直到最后一个正斜杠，对于以下代码块中的两个 base 字符串来说，都是 https://test.example.org/api/。当前目录相对引用 article 会附加到此，解析为 https://test.example.org/api/article

log(new URL("./article", "https://test.example.org/api/").href);
// => https://test.example.org/api/article
log(new URL("article", "https://test.example.org/api/v1").href);
// => https://test.example.org/api/article

类似地，以下两个基本 URL 字符串的当前目录都是 https://test.example.org/api/v2/。我们将 story/ 和 story 附加到这些目录，以解析最终 URL。

log(new URL("./story/", "https://test.example.org/api/v2/").href);
// => https://test.example.org/api/v2/story/
log(new URL("./story", "https://test.example.org/api/v2/v3").href);
// => https://test.example.org/api/v2/story

父目录相对

以 ../ 开头的相对引用，例如 ../path，相对于 base 参数所表示的 URL 的当前目录的父目录。../ 的每个实例都会从当前目录中剥离一个文件夹，然后任何在 ../ 之后的文本都会附加到剩余的基本路径。可以通过多次指定 ../ 来向上导航到父目录，但只能导航到站点根目录的级别。

例如，给定基本 URL https://test.example.com/test/api/v1/ 和一个父目录相对 URL ../some/path，当前目录是 https://test.example.com/test/api/v1/，父目录是 https://test.example.com/test/api/，解析后的绝对 URL 是 https://test.example.com/test/api/some/path。

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

#log {
  height: 80px;
  padding: 0.5rem;
  border: 1px solid black;
}

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

以下示例更详细地展示了这一点。在所有情况下，当前目录都是 https://test.example.org/api/v1/v2/（在第二种情况下，v3 在最后一个正斜杠之后），每个相对引用都解析为不同的父目录。

log(new URL("../path", "https://test.example.org/api/v1/v2/").href);
// => https://test.example.org/api/v1/path
log(new URL("../../path", "https://test.example.org/api/v1/v2/v3").href);
// => https://test.example.org/api/path
log(new URL("../../../../path", "https://test.example.org/api/v1/v2/").href);
// => https://test.example.org/path

根目录相对

以 / 开头的相对引用，例如 /path，相对于 base 参数中指定的 URL 的站点根目录。例如，给定基本 URL https://test.example.com/api/v1，根目录相对 URL /some/path 的解析 URL 是 https://test.example.com/some/path。

注意：解析根目录相对 URL 时，base URL 的路径部分无关紧要。

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

#log {
  height: 80px;
  padding: 0.5rem;
  border: 1px solid black;
}

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

以下是一些其他示例。

log(new URL("/some/path", "https://test.example.org/api/").href);
// => https://test.example.org/some/path
log(new URL("/", "https://test.example.org/api/v1/").href);
// => https://test.example.org/
log(new URL("/article", "https://example.com/api/v1/").href);
// => https://example.com/article

另请参见

RFC 3986 - 相对解析，用于解析基本 URL 和相对 URL 的规范