前言

如果让你去获取对应 url 的参数，你会怎么做？ 举一个例子： http://localhost:1000/index?state=all&pageNum=1&pageSize=10。

你可能会想到的做法：

1. 拿到字符串， 根据 ? 分割，拿到 ? 后面的，然后再分割 & ，这样就拿到了每一项，最后根据 = , 我们就能生成对应的 key=value 。
2. 也有现成的库， 比如： qs , queryString 。 它们在实际项目中的使用确实也相当的广泛。

但是我接下来想要介绍的小知识点是一个 URLSearchParams 的api。让你也能很快解析 URI。

简单上手

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

// 创建 URLSearchParams 实例
const url = 'state=all&pageNum=1&pageSize=10'
const searchParams = new URLSearchParams(url)

for (let p of searchParams) {
  console.log(p); // ['state', 'all'] ['pageNum', '1'] ['pageSize', '10']
}
复制代码

方法

上面代码创建了一个实例 返回的 searchParams 是一个类似于 Map 的数据结构。 下面我们看看它身上的方法有哪些。

searchParams.has("state") === true; // true

searchParams.get("state") === "all"; // true

searchParams.append("state", "0");

searchParams.toString(); // "state=all&pageNum=1&pageSize=10&state=0"

searchParams.getAll("state"); // ["state", "0"]

searchParams.get("foo") === null; // true

// set 在没有相关参数会创建，有多个相关参数会删除多余的只存在一个
searchParams.set("state", "1");

searchParams.toString(); // "state=1&pageNum=1&pageSize=10"

searchParams.delete("state");

searchParams.toString(); // "pageNum=1&pageSize=10"

searchParams.keys() // []
复制代码

更多请看文档： URLSearchParams - Web API 接口参考 | MDN (mozilla.org))

注意

这里有两个点值得注意：

1. URLSearchParams 构造函数 不会 解析完整 URL，但是如果字符串起始位置有 ? 的话会被去除。有人说那岂不是还要分割一次，我想你可以打印一下 window.location.search
2. 它在ie下不支持。