利用 URLSearchParams 对象获取URL之中的查询字符串，即问号之后的部分

[jawil]

简介

URLSearchParams API 用于处理 URL 之中的查询字符串，即问号之后的部分。没有部署不支持这个 API 的浏览器，可以用 url-search-params 这个垫片库。

之前自己一直用 qs 这个库来处理，建议最好不要自己写，自己写有些坑你会考虑不到的==。

用法

URLSearchParams 有以下方法，用来操作某个参数。

has()：返回一个布尔值，表示是否具有某个参数
get()：返回指定参数的第一个值
getAll()：返回一个数组，成员是指定参数的所有值
set()：设置指定参数
delete()：删除指定参数
append()：在查询字符串之中，追加一个键值对
toString()：返回整个查询字符串

const paramsString = 'name=jawil&age=24';
const searchParams = new URLSearchParams(paramsString);
console.log(searchParams.get('name')); // jawil

URLSearchParams 还有三个方法，用来遍历所有参数。

keys()：遍历所有参数名
values()：遍历所有参数值
entries()：遍历所有参数的键值对

上面三个方法返回的都是 Iterator 对象。

const searchParams = new URLSearchParams('name=jawil&age=24');

for (let key of searchParams.keys()) {
  console.log(key);
}
// name
// age

for (let value of searchParams.values()) {
  console.log(value);
}
// jawil
// 24

for (let pair of searchParams.entries()) {
  console.log(pair[0]+ ', '+ pair[1]);
}
// name, jawil
// age, 24

在 Chrome 浏览器之中，URLSearchParams 实例本身就是 Iterator 对象，与 entries 方法返回值相同。所以，可以写成下面的样子。

for (let p of searchParams) {
  console.log(p);
}

下面是一个替换当前 URL 的例子。

// URL: https://example.com?version=1.0
const params = new URLSearchParams(location.search.slice(1));
params.set('version', 2.0);

window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?version=2.0

URLSearchParams 实例可以当作 POST 数据发送，所有数据都会 URL 编码。

const params = new URLSearchParams();
params.append('api_key', '1234567890');

fetch('https://example.com/api', {
  method: 'POST',
  body: params
}).then(...)

DOM 的 a 元素节点的 searchParams 属性，就是一个 URLSearchParams 实例。

const a = document.createElement('a');
a.href = 'https://example.com?filter=api';
a.searchParams.get('filter') // "api"

URLSearchParams 还可以与 URL 接口结合使用。

const url = new URL(location);
let foo = url.searchParams.get('foo') || 'somedefault';

兼容性

https://caniuse.com/#search=URLSearchParams

实用程度

★★★★★

[fengsx]

太棒了！之前也自己写过，总是解一时之急，莫名其妙的问题也不少。

ie和edge是这么毒瘤

[Yangfan2016]

a标签上没有searchParams这个属性
chrome 69

[justjavac]

我查了一下，a 标签是 HTMLAnchorElement，并没有 searchParams 属性。而 searchParams 是 URL 的方法。

[legend80s]

我查了一下，a 标签是 HTMLAnchorElement，并没有 searchParams 属性。而 searchParams 是 URL 的方法。

@jawil 建议改一下，以防误导

[legend80s]

const params = new URLSearchParams(location.search.slice(1));

无需 slice

[WangYuLue]

更简单的遍历方式 Object.fromEntries([...new URLSearchParams(query)])