URL API

概念與用法

URL 標準的大部分內容是關於 URL 的定義 及其結構和解析方式。此外，還涵蓋了與網路上計算機定址相關的各種術語的定義，並規定了解析 IP 地址和 DOM 地址的演算法。對大多數開發者來說，更有趣的是 API 本身。

訪問 URL 元件

為給定的 URL 建立一個 URL 物件會解析該 URL，並透過其屬性提供對其組成部分的快速訪問。

let addr = new URL("https://mdn.club.tw/en-US/docs/Web/API/URL_API");
let host = addr.host;
let path = addr.pathname;

上面的程式碼片段為當前正在閱讀的文章建立了一個 URL 物件，然後獲取了 host 和 pathname 屬性。在這種情況下，這些字串分別是 developer.mozilla.org 和 /en-US/docs/Web/API/URL_API。

更改 URL

URL 的大多數屬性都是可設定的；你可以為它們寫入新值來修改物件所代表的 URL。例如，要建立一個 URL 並設定其使用者名稱

let myUsername = "some-guy";
let addr = new URL("https://example.com/login");
addr.username = myUsername;

設定 username 的值不僅會設定該屬性的值，還會更新整個 URL。執行上面的程式碼片段後，href 返回的值是 https://some-guy@example.com/login。對於任何可寫屬性，情況都是如此。

查詢

URL 上的 search 屬性包含 URL 的查詢字串部分。例如，如果 URL 是 https://example.com/login?user=some-guy&page=news，那麼 search 屬性的值是 ?user=some-guy&page=news。你還可以使用 URLSearchParams 物件的 get() 方法來查詢單個引數的值。

let addr = new URL("https://example.com/login?user=some-guy&page=news");
try {
  loginUser(addr.searchParams.get("user"));
  gotoPage(addr.searchParams.get("page"));
} catch (err) {
  showErrorMessage(err);
}

例如，在上面的程式碼片段中，使用者名稱和目標頁面是從查詢中獲取的，並傳遞給網站程式碼用於登入和將使用者路由到他們在網站上所需目的地的適當函式。

URLSearchParams 中的其他函式允許你更改鍵的值、新增和刪除鍵及其值，甚至可以對引數列表進行排序。

介面

URL API 是一個簡單的 API，只有少數幾個介面

URL

可用於解析、構建、規範化和編碼 URL。

URLSearchParams

定義了用於處理 URL 查詢字串的實用方法。

示例

使用 URL API 解析 URL 引數

你可以透過將 URL 解析為字串、按特定字元拆分或使用正則表示式來處理 URL 引數，但建立一個新的 URL 物件來處理會更容易。下面的示例從 document.location.href 獲取文件 URL，使用 URLSearchParams.sort() 對引數進行排序，然後使用 URLSearchParams.keys 提取鍵。

對於文件 URL 中的每個鍵，我們向一個 <table> 元素新增行，每個找到的引數鍵對應一行，第一列包含鍵的名稱，第二列包含值。

const table = document.querySelector(".param-table");

const url = new URL(document.location.href);
url.searchParams.sort();
const keys = url.searchParams.keys();

for (let key of keys) {
  let val = url.searchParams.get(key);
  let row = document.createElement("tr");
  let cell = document.createElement("td");
  cell.innerText = key;
  row.appendChild(cell);
  cell = document.createElement("td");
  cell.innerText = val;
  row.appendChild(cell);
  table.appendChild(row);
}

你可以嘗試 此示例的線上版本 並 在 GitHub 上檢視完整的原始碼。

規範

瀏覽器相容性

api.URL

api.URLSearchParams

另見

• Fetch API
• CSS <url> 型別
• encodeURI()
• encodeURIComponent()