快捷新增、获取、修改url参数

简介

web开发中，难免需要对浏览器url（http://www.xxxx.com?a=1&b=2&c=3）或者参数字符串 (a=1&b=2&c=3) 进行数据的增删改查，通常使用 split和 join 两个api来操作，但是比较麻烦，现在介绍一个Web API（URLSearchParams）来实现url数据操作。

注释 (这句话很重要)：URLSearchParams 构造函数不会解析完整 URL，但是如果字符串起始位置有 ? 的话会被去除

用例一：解析完整的url (错误示范)

// 假设使用 location.href 来解析
const href = location.href // http://www.xxxx.com?a=1&b=2&c=3
// 返回一个 URLSearchParams 对象
const hrefParams = new URLSearchParams(href)
//使用 Object.fromEntries转为普通对象
const hrefParamsObj = Object.fromEntries(hrefParams) 
// 输出 {http://www.xxxx.com?a: '1', b: '2', c: '3'}

从上面的代码可以看出对象第一个参数没有达到预期的效果（预期效果第一个参数应该是a），URLSearchParams 构造函数不会正确的解析完整 URL

用例二：解析参数部分(正确解析)

由于URLSearchParams解析的字符串起始位置有 ? 的话会被去除，所以（?a=1&b=2&c=3）和（a=1&b=2&c=3）是等价的，以下代码以location.search为例：

// 假设使用 location.search 来解析
const params = location.search // ?a=1&b=2&c=3
// 返回一个 URLSearchParams 对象
const searchParams = new URLSearchParams(params)
//使用 Object.fromEntries转为普通对象
const hrefParamsObj = Object.fromEntries(searchParams) 
// 输出 {a: '1', b: '2', c: '3'}

用例三：操作URLSearchParams 对象，实现增删改查

// 后端返回的url处理
// const url = new URL("http://www.xxxx.com?a=1&b=2&c=3");
// url.search

// 浏览器url 假设使用 location.search 来解析
const origin = location.origin // http://www.xxxx.com
const params = location.search // ?a=1&b=2&c=3
// 返回一个 URLSearchParams 对象
const searchParams = new URLSearchParams(params)

// 查某个参数是否存在，存在参数为 true,不存在为 false
searchParams.has("a"); // 输出 true
searchParams.has("test"); // 输出 false -- test参数不存在
searchParams.toString(); // 输出 a=1&b=2&c=3

// 获取某个参数的值,参数存在返回该参数的值，参数不存在则返回null
searchParams.get("a"); // 输出 1
searchParams.get("test"); // 输出 null
searchParams.toString(); // 输出 a=1&b=2&c=3

// 新增键值对 (重复调用append("add", "666")，会一直增加,不会覆盖)
searchParams.append("add", "666");
searchParams.toString(); // 输出 a=1&b=2&c=3&add=666
searchParams.append("add", "666");
searchParams.toString(); // 输出 a=1&b=2&c=3&add=666&add=666

// 修改指定键值对的值 (1、若存在多个相同的key，只会保留一个，并修改值。2、若key不存在则新建一个)
searchParams.set("a", "8");
searchParams.toString(); // 输出 a=8&b=2&c=3&add=666&add=666
searchParams.set("a", "123");
searchParams.toString(); // 输出 a=123&b=2&c=3&add=666&add=666
searchParams.set("add", "777"); // 多了add最后只保留一个
searchParams.toString(); // 输出 a=123&b=2&c=3&add=777
searchParams.set("setNew", "999"); // setNew不存在则新建一个
searchParams.toString(); // 输出 a=123&b=2&c=3&add=777&setNew=999

// 删除键值对 （若存在多个相同的key，都会被删除）
searchParams.delete("add");
searchParams.toString(); // 输出 a=123&b=2&c=3&setNew=999
searchParams.append("setNew", "456"); // 在拼接一个&setNew=999，一起删除
searchParams.toString(); // 输出 a=123&b=2&c=3&setNew=999&setNew=456
searchParams.delete("setNew");
searchParams.toString(); // 输出 a=123&b=2&c=3

// 增删改查后，重新拼接成完整的url
const url = origin + '?' + searchParams.toString() // 输出 http://www.xxxx.com?a=123&b=2&c=3