URLSearchParams 處理 URL 的查詢字符串
共 3226字，需瀏覽 7分鐘
·
2024-05-07 08:00
URLSearchParams 接口定義了一些實(shí)用的方法來(lái)處理 URL 的查詢字符串。
一個(gè)實(shí)現(xiàn)了 URLSearchParams 的對(duì)象可以直接用在 for...of 結(jié)構(gòu)中，以鍵/值對(duì)在查詢字符串中出現(xiàn)的順序?qū)λ鼈冞M(jìn)行迭代，例如下面兩行是等價(jià)的：
for (const [key, value] of mySearchParams) {}for (const [key, value] of mySearchParams.entries()) {}
用法
構(gòu)造函數(shù) URLSearchParams()，返回一個(gè) URLSearchParams 對(duì)象。
實(shí)例屬性 size 只讀，返回 URLSearchParams 對(duì)象中查詢參數(shù)的總個(gè)數(shù)。
實(shí)例方法
URLSearchParams.append()，插入一個(gè)指定的鍵/值對(duì)作為新的查詢參數(shù)。
URLSearchParams.delete()，從查詢參數(shù)列表里刪除指定的查詢參數(shù)及其對(duì)應(yīng)的值。
URLSearchParams.entries()，返回一個(gè)iterator可以遍歷所有鍵/值對(duì)的對(duì)象。
URLSearchParams.forEach()，通過(guò)回調(diào)函數(shù)迭代此對(duì)象中包含的所有值。
URLSearchParams.get()，獲取指定查詢參數(shù)的第一個(gè)值。
URLSearchParams.getAll()，獲取指定查詢參數(shù)的所有值，返回是一個(gè)數(shù)組。
URLSearchParams.has()，返回 Boolean 判斷是否存在此查詢參數(shù)。
URLSearchParams.keys()，返回iterator 此對(duì)象包含了鍵/值對(duì)的所有鍵名。
URLSearchParams.set()，設(shè)置一個(gè)查詢參數(shù)的新值，假如原來(lái)有多個(gè)值將刪除其他所有的值。
URLSearchParams.sort()，按鍵名排序。
URLSearchParams.toString()，返回查詢參數(shù)組成的字符串，可直接使用在 URL 上。
URLSearchParams.values()，返回iterator 此對(duì)象包含了鍵/值對(duì)的所有值。
示例
const paramsString = "q=URLUtils.searchParams&topic=api";const searchParams = new URLSearchParams(paramsString);// 迭代查詢參數(shù)for (let p of searchParams) {console.log(p);}console.log(searchParams.has("topic")); // trueconsole.log(searchParams.has("topic", "fish")); // falseconsole.log(searchParams.get("topic") === "api"); // trueconsole.log(searchParams.getAll("topic")); // ["api"]console.log(searchParams.get("foo") === null); // trueconsole.log(searchParams.append("topic", "webdev"));console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=api&topic=webdev"console.log(searchParams.set("topic", "More webdev"));console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=More+webdev"console.log(searchParams.delete("topic"));console.log(searchParams.toString()); // "q=URLUtils.searchParams"
對(duì)象也可作為查詢參數(shù)
// 對(duì)象也可作為查詢參數(shù)const paramsObj = { foo: "bar", baz: "bar" };const searchParams = new URLSearchParams(paramsObj);console.log(searchParams.toString()); // "foo=bar&baz=bar"console.log(searchParams.has("foo")); // trueconsole.log(searchParams.get("foo")); // "bar"
URLSearchParams 構(gòu)造函數(shù)不會(huì)解析完整 URL，但是如果字符串起始位置有 ? 的話會(huì)被去除。
const paramsString1 = "http://example.com/search?query=%40";const searchParams1 = new URLSearchParams(paramsString1);console.log(searchParams1.has("query")); // falseconst paramsString2 = "?query=value";const searchParams2 = new URLSearchParams(paramsString2);console.log(searchParams2.has("query")); // trueconst url = new URL("http://example.com/search?query=%40");const searchParams3 = new URLSearchParams(url.search);console.log(searchParams3.has("query")); // true
URLSearchParams 不區(qū)分 = 后面沒(méi)有任何內(nèi)容的參數(shù)和完全沒(méi)有 = 的參數(shù)。
const emptyVal = new URLSearchParams("foo=&bar=baz");console.log(emptyVal.get("foo")); // 返回 ''const noEquals = new URLSearchParams("foo&bar=baz");console.log(noEquals.get("foo")); // 也返回 ''console.log(noEquals.toString()); // 'foo=&bar=baz'