利用 URLSearchParams 对象获取URL之中的查询字符串

文章正文还需 3 分钟

用法

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

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

js 复制代码

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

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

js 复制代码

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

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

js 复制代码

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 方法返回值相同。所以，可以写成下面的样子

js 复制代码

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

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

js 复制代码

// 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 编码

js 复制代码

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

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

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

js 复制代码

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

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

js 复制代码

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

兼容性

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