前言
如果让你去获取对应 url
的参数,你会怎么做? 举一个例子: http://localhost:1000/index?state=all&pageNum=1&pageSize=10
。
你可能会想到的做法:
- 拿到字符串, 根据
?
分割,拿到?
后面的,然后再分割&
,这样就拿到了每一项,最后根据=
, 我们就能生成对应的key=value
。 - 也有现成的库, 比如:
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))
注意
这里有两个点值得注意:
URLSearchParams
构造函数 不会 解析完整 URL,但是如果字符串起始位置有?
的话会被去除。有人说那岂不是还要分割一次,我想你可以打印一下window.location.search
- 它在ie下不支持。