跳到主要内容位置

URLSearchParams API 使用教程

在前端开发中,经常有组装 URL 查询参数:

let q = "测试";
let order = "desc";
let filters = ["前端", "后端"];

let query = `q=测试&order=asc&filters=["前端","后端"]`;

或者解析 URL 查询参数的情况:

let query = `q=测试&order=asc&filters=["前端","后端"]`;

let params = query.split("&");

params.forEach(/* ... */);

直接手动解析或组装需要对字符串进行分割,合并,很容易出错:

let query = `q=测试&order=asc&filters=["前端","后端"]`;

let params = query.split("&");

params.forEach(/* ... */);

要避免这种情况,浏览器提供了 URLSearchParams API,来让我们方便的操作 URL 查询参数。

用法

要使用 URLSearchParams,我们需要调用它的构造函数,创建一个 URLSearchParams 对象,它接收一串 URL 查询参数作为参数:

let query = `q=测试&order=asc&filters=["前端","后端"]`;
const params = new URLSearchParams(query);

如果不传递参数则是组装一串新的 URL 查询参数:

const params = new URLSearchParams();

URLSearchParams 的用法和 Map 几乎一样,常用的操作有: 直接使用 for...of 循环遍历 URL 查询参数的 key-value 键值对:

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

使用 get() 可以根据 key 获取 value:

const keyword = params.get("q");

使用 has() 判断某个 key 是否存在:

const hasOrder = params.has("order");

使用 toString() 获取组装好的 URL 查询参数:

console.log(params.toString());

使用 set() 修改一组键值对:

params.set("order", "desc");

使用 append() 追加一个新的键值对:

params.append("pageSize", "10");

使用 delete,根据 key 删除一组键值对:

params.delete("filters");

示例

我们来看实际运行的例子。这里使用 URLSearchParams 解析了这样一串查询参数:

  • q 的值为测试
  • order 为 asc
  • filters 为字符串形式的数组
q=测试&order=asc&filters=["前端","后端"]

然后后面根据这个值创建了 URLSearchParams 对象,并:

  • 使用了 for...of,对它进行遍历。
  • 获取 q 查询参数的值。
  • 检查 order 参数是否存在。
  • 打印转换成字符串之后的值。
  • 获取 filters 的值,并调用 JSON.parse() 把它的值转换为真实的数组。
  • 修改 order 的值为 desc。
  • 追加了 pageSize 参数,值为 10.
  • 删除了 filters 参数。
const params = new URLSearchParams(url);

// 遍历
for (let p of params) {
console.log(p);
}

// 获取单个参数
const keyword = params.get("q");
console.log(keyword);

// 判断是否存在
const hasOrder = params.has("order");
console.log(hasOrder);

// 转换为字符串
console.log(params.toString());

// 转换数组
const filters = params.get("filters");
console.log(JSON.parse(filters));

// 修改参数
params.set("order", "desc");
console.log(params.toString());

// 添加参数
params.append("pageSize", "10");
console.log(params.toString());

// 删除参数
params.delete("filters");
console.log(params.toString());

输出结果是这样的【可以把代码放到一边,方便查看】:

  • for...of 循环,以数组形式显示了每个键值对的键和值。
  • 获取 q 的值为测试。
  • 判断 order 参数是否存在,结果为 true。
  • 打印转换为字符串后的值,可以看到特殊字符进行了 encode 编码。
  • 打印了 filters 属性值,转换为数组的结果。
  • 打印了 order 属性 值修改为 desc 之后,整个 URL 查询参数的字符串。
  • 打印了追加了 pageSize 参数后的字符串。
  • 打印了删除了 filters 参数后的字符串。

img

小结

好了,这个就是使用 URLSearchParams 来处理查询参数的过程。你学会了吗?如果有帮助请三连,想学更多有用的前端开发知识,请关注峰华前端工程师,感谢观看!

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,连载中现只需 48 元(领取优惠券)点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买