URL
Baseline 廣泛可用 *
注意：此功能在 Web Workers 中可用。
URL 介面用於解析、構建、規範化和編碼 URL。它透過提供允許您輕鬆讀取和修改 URL 元件的屬性來工作。
您通常透過在其建構函式呼叫時將 URL 指定為字串，或者透過提供相對 URL 和基礎 URL 來建立新的 URL 物件。然後，您可以輕鬆讀取 URL 的解析元件或進行修改。
建構函式
URL()-
根據 URL 字串和可選的基礎 URL 字串建立並返回一個
URL物件。如果傳入的引數未定義有效的 URL，則會丟擲錯誤。
例項屬性
雜湊-
一個包含
'#'字元後跟 URL 的片段識別符號的字串。 主機-
一個包含域（即主機名），後跟（如果指定了埠）一個
':'和 URL 的埠的字串。 hostname-
一個包含 URL 域的字串。
href-
一個 字串化器，返回一個包含整個 URL 的字串。
origin只讀-
返回一個包含 URL 來源的字串，即其協議、域名和埠。
密碼-
一個字串，包含在域名之前指定的密碼。
pathname-
一個包含初始
'/'字元後跟 URL 的路徑的字串，不包括查詢字串或片段。 port-
一個包含 URL 埠號的字串。
協議-
一個包含 URL 協議方案的字串，包括最後的
':'。 search-
一個指示 URL 引數字串的字串；如果提供了任何引數，此字串將包含所有引數，以開頭的
?字元開始。 searchParams只讀-
一個
URLSearchParams物件，可用於訪問search中找到的各個查詢引數。 username-
一個字串，包含在域名之前指定的使用者名稱。
靜態方法
canParse()-
返回一個布林值，指示是否可以解析和驗證由 URL 字串和可選的基礎 URL 字串定義的 URL。
createObjectURL()-
返回一個包含唯一 blob URL 的字串，即一個以
blob:作為其方案的 URL，後跟一個唯一標識瀏覽器中該物件的字串。 parse()-
根據 URL 字串和可選的基礎 URL 字串建立並返回一個
URL物件，如果傳入的引數定義了一個無效的URL，則返回null。 revokeObjectURL()-
撤銷之前使用
URL.createObjectURL()建立的物件 URL。
例項方法
toString()-
返回一個包含整個 URL 的字串。它是
URL.href的同義詞，儘管它不能用於修改該值。 toJSON()-
返回一個包含整個 URL 的字串。它返回的字串與
href屬性相同。
用法說明
建構函式接受一個 url 引數，以及一個可選的 base 引數，如果 url 引數是相對 URL，則該引數用作基礎。
const url = new URL("../cats", "http://www.example.com/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"
如果 URL 無法解析為有效 URL，建構函式將引發異常。您可以選擇將上述程式碼放在 try...catch 塊中，或者使用 canParse() 靜態方法來首先檢查 URL 是否有效。
if (URL.canParse("../cats", "http://www.example.com/dogs")) {
const url = new URL("../cats", "http://www.example.com/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"
} else {
console.log("Invalid URL");
}
可以設定 URL 屬性來構建 URL。
url.hash = "tabby";
console.log(url.href); // "http://www.example.com/cats#tabby"
URL 根據 RFC 3986 中的規則進行編碼。例如：
url.pathname = "démonstration.html";
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"
可以使用 URLSearchParams 介面來構建和操作 URL 查詢字串。
要獲取當前視窗 URL 的搜尋引數，您可以這樣做：
// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"
URL 的 toString() 方法只返回 href 屬性的值，因此建構函式可用於直接規範化和編碼 URL。
const response = await fetch(
new URL("http://www.example.com/démonstration.html"),
);
規範
| 規範 |
|---|
| URL # url |
瀏覽器相容性
載入中…