解析URI参数

489 阅读1分钟

前言

如果让你去获取对应 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下不支持。