JS如何處理url：URL對象的用法詳解

在現代 Web 開發中，URL（統一資源定位符）是與網頁資源互動的核心部分。JavaScript 提供了 URL 對象，它能夠方便地解析、修改和構造 URL。本文將深入介紹 URL 對象的用法，幫助開發者更高效地操作 URL。

1. 創建 URL 對象

可以使用 URL 構造函數來創建一個新的 URL 對象，它接受一個 URL 字串作為參數。

1
const url = new URL("https://www.example.com:8080/path/name?query=test#hash");
2
console.log(url);

這個 url 對象包含了完整的 URL 信息，包括協議、主機名、路徑、查詢字串和哈希部分。

2. 常用屬性

URL 對象提供了很多有用的屬性，可以輕鬆獲取 URL 的各個部分：

  • href: 返回完整的 URL 字串。
  • protocol: 返回 URL 的協議部分，例如 https:。
  • hostname: 返回 URL 的主機名部分，不包含端口號。
  • port: 返回 URL 的端口號（如果有）。
  • pathname: 返回 URL 的路徑部分。
  • search: 返回 URL 的查詢字串部分（包括 ?）。
  • hash: 返回 URL 的哈希部分（包括 #）。

範例：

1
const url = new URL("https://www.example.com:8080/path/name?query=test#hash");
2


3
console.log(url.href); // https://www.example.com:8080/path/name?query=test#hash
4
console.log(url.protocol); // https:
5
console.log(url.hostname); // www.example.com
6
console.log(url.port); // 8080
7
console.log(url.pathname); // /path/name
8
console.log(url.search); // ?query=test
9
console.log(url.hash); // #hash

3. 修改 URL

URL 對象的屬性是可修改的，你可以直接更改 URL 中的各個部分。

1
const url = new URL("https://www.example.com/path/name");
2
url.pathname = "/new/path";
3
url.search = "?search=query";
4
url.hash = "#newhash";
5


6
console.log(url.href); // https://www.example.com/new/path?search=query#newhash

通過修改 pathname、search 和 hash 等屬性，可以輕鬆地更新 URL。

4. 操作查詢參數 (searchParams)

URL 對象中的 searchParams 屬性提供了一個 URLSearchParams 對象，允許你方便地操作查詢字串。

添加查詢參數

1
url.searchParams.append("newParam", "value");
2
console.log(url.href); // https://www.example.com/new/path?search=query&newParam=value

獲取查詢參數

1
console.log(url.searchParams.get("search")); // query

修改查詢參數

1
url.searchParams.set("search", "newQuery");
2
console.log(url.href); // https://www.example.com/new/path?search=newQuery&newParam=value

刪除查詢參數

1
url.searchParams.delete("newParam");
2
console.log(url.href); // https://www.example.com/new/path?search=newQuery

URLSearchParams 提供了添加、獲取、修改和刪除查詢參數的簡便方法。

5. 處理相對 URL

通過為 URL 構造函數提供一個基準 URL，JavaScript 可以自動解析相對路徑。

1
const relativeUrl = new URL("/relative/path", "https://www.example.com");
2
console.log(relativeUrl.href); // https://www.example.com/relative/path

6. URL 編碼與解碼

在處理 URL 中的查詢參數時，有時需要對特殊字符進行編碼或解碼。JavaScript 提供了以下方法：

  • encodeURIComponent()：對 URL 元件進行編碼。
  • decodeURIComponent()：對已編碼的 URL 元件進行解碼。

範例：

1
const param = "name=John Doe";
2
const encoded = encodeURIComponent(param);
3
console.log(encoded); // name%3DJohn%20Doe
4


5
const decoded = decodeURIComponent(encoded);
6
console.log(decoded); // name=John Doe

這些方法確保在 URL 中傳遞的字串不包含非法字符。

結論

URL 對象為開發者提供了一個強大的工具，用於解析、修改和生成 URL。在處理動態生成的 URL 或處理來自使用者輸入的 URL 時，URL 對象和其相關的 URLSearchParams 對象顯得尤為實用。

無論是在解析查詢參數、修改路徑，還是構造新的 URL，URL 對象都能幫助開發者高效且可靠地完成任務。

相似的文章

CommonJS 與 ES Module 的區別

CommonJS 與 ES Module 的區別

前端如何判斷元素是否進入可視區及其應用

前端如何判斷元素是否進入可視區及其應用