URLSearchParams 处理 URL 的查询字符串-技术圈

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

一个实现了 URLSearchParams 的对象可以直接用在 for...of 结构中，以键/值对在查询字符串中出现的顺序对它们进行迭代，例如下面两行是等价的：

for (const [key, value] of mySearchParams) {}for (const [key, value] of mySearchParams.entries()) {}

用法

构造函数 URLSearchParams()，返回一个 URLSearchParams 对象。

实例属性 size 只读，返回 URLSearchParams 对象中查询参数的总个数。

实例方法

URLSearchParams.append()，插入一个指定的键/值对作为新的查询参数。

URLSearchParams.delete()，从查询参数列表里删除指定的查询参数及其对应的值。

URLSearchParams.entries()，返回一个iterator可以遍历所有键/值对的对象。

URLSearchParams.forEach()，通过回调函数迭代此对象中包含的所有值。

URLSearchParams.get()，获取指定查询参数的第一个值。

URLSearchParams.getAll()，获取指定查询参数的所有值，返回是一个数组。

URLSearchParams.has()，返回 Boolean 判断是否存在此查询参数。

URLSearchParams.keys()，返回iterator 此对象包含了键/值对的所有键名。

URLSearchParams.set()，设置一个查询参数的新值，假如原来有多个值将删除其他所有的值。

URLSearchParams.sort()，按键名排序。

URLSearchParams.toString()，返回查询参数组成的字符串，可直接使用在 URL 上。

URLSearchParams.values()，返回iterator 此对象包含了键/值对的所有值。

示例

const paramsString = "q=URLUtils.searchParams&topic=api";const searchParams = new URLSearchParams(paramsString);
// 迭代查询参数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"

对象也可作为查询参数

// 对象也可作为查询参数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 构造函数不会解析完整 URL，但是如果字符串起始位置有 ? 的话会被去除。

const paramsString1 = "http://example.com/search?query=%40";const searchParams1 = new URLSearchParams(paramsString1);console.log(searchParams1.has("query")); // false
const paramsString2 = "?query=value";const searchParams2 = new URLSearchParams(paramsString2);console.log(searchParams2.has("query")); // true
const url = new URL("http://example.com/search?query=%40");const searchParams3 = new URLSearchParams(url.search);console.log(searchParams3.has("query")); // true

URLSearchParams 不区分 = 后面没有任何内容的参数和完全没有 = 的参数。

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'