解析到 URL 的相對引用

可以使用 URL() 建構函式或 URL API 的 URL.parse() 靜態方法，將相對引用和基礎 URL 解析為絕對 URL。

這兩種方法最多接受兩個字串引數，並返回一個表示絕對 URL 的 URL() 物件。第一個引數表示絕對 URL 或 URL 的相對引用，第二個引數是基礎 URL，用於在第一個引數指定了相對引用時解析它。這兩種方法解析相對引用的方式相同，不同之處在於，如果傳入了無效 URL，URL() 建構函式會丟擲錯誤，而 parse() 則返回 null。

下面的程式碼顯示瞭如何使用相同的 url 和 base URL 值來呼叫這些方法。

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

從示例中可以看出，從提供的基礎 URL 和相對引用解析 URL 並不是簡單地將提供的引數串聯起來。

在這種情況下，傳入了一個相對於當前目錄的路徑（articles）。base URL 的當前目錄是 URL 字串中最後一個正斜槓之前的部分。這裡 https://mdn.club.tw/some/path 沒有尾隨正斜槓，因此當前目錄是 https://mdn.club.tw/some/，最終解析的 URL 是 https://mdn.club.tw/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 上，以解析最終的 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 的規範

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2024 年 7 月 26 日，作者為 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的問題