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.club.tw/en-US/docs");
  log(`[1]: ${result.href}`);

  // Relative reference to a valid base URL
  result = URL.parse("en-US/docs", "https://mdn.club.tw");
  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.club.tw: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.club.tw",
  );
  log(`[4]: ${result.href}`);

  // Invalid base URL (missing colon)
  result = URL.parse("en-US/docs", "https//mdn.club.tw");
  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.club.tw/"));
  log(`[6]: ${result.href}`);
}

每次檢查的結果如下所示。

規範

規範
URL # dom-url-parse

瀏覽器相容性

另見

URL() 建構函式，如果傳入的引數定義了無效的 URL，則會丟擲錯誤
core-js 中提供了 URL.parse() 的 polyfill

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年6月23日⁩，由 MDN 貢獻者修改。

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