URL: searchParams 屬性

Baseline 已廣泛支援

此功能已成熟,可跨多種裝置和瀏覽器版本工作。它自 ⁨2018 年 4 月⁩ 起已在所有瀏覽器中可用。

注意:此功能在 Web Workers 中可用。

URL 介面的 searchParams 只讀屬性返回一個 URLSearchParams 物件,該物件允許訪問 URL 中包含的已解碼的 GET 查詢引數。

一個 URLSearchParams 物件。

示例

基本用法

js
const params = new URL("https://example.com/?name=Jonathan%20Smith&age=18")
  .searchParams;
const name = params.get("name");
const age = parseInt(params.get("age"), 10);

console.log(`name: ${name}`); // name: Jonathan Smith
console.log(`age: ${age}`); // age: 18

searchParams 屬性將 URL.search 字串公開為 URLSearchParams 物件。當更新此 URLSearchParams 時,URL 的 search 會隨著其序列化而更新。然而,URL.search 編碼的字元子集與 URLSearchParams 編碼的字元子集不同,並且它將空格編碼為 %20 而不是 +。這可能會導致一些令人意外的互動——如果你更新 searchParams,即使使用相同的值,URL 的序列化方式也可能不同。

js
const url = new URL("https://example.com/?a=b ~");
console.log(url.href); // "https://example.com/?a=b%20~"
console.log(url.searchParams.toString()); // "a=b+%7E"
// This should be a no-op, but it changes the URL's query to the
// serialization of its searchParams
url.searchParams.sort();
console.log(url.href); // "https://example.com/?a=b+%7E"

const url2 = new URL("https://example.com?search=1234&param=my%20param");
console.log(url2.search); // "?search=1234&param=my%20param"
url2.searchParams.delete("search");
console.log(url2.search); // "?param=my+param"

規範

規範
URL
# dom-url-searchparams

瀏覽器相容性