在实际项目中,往往需要我们对当前页面的链接参数做一些操作。
实战一
比如,点击按钮复制当前页面链接,分享给好友进行助力,这时复制的链接上需要带上被助力用户的id,代码实现如下:
function getUrl() {
// 去掉链接中的 addUserId 参数, 取当前用户
const urlParams = new URLSearchParams(location.href.split('?')[1])
urlParams.set('addUserId', userId.toString()) // 这里添加当前用户的id
return location.href.split('?')[0] + '?' + urlParams.toString()
}
这里就使用到了URLSearchParams
Web API。
实战二
将链接参数转换为对象,得到类似 vue-router 中 this.$route.query 一样的对象:
const urlParams = new URLSearchParams(location.href.split('?')[1])
// 把 urlParams 转成对象
const params = Object.fromEntries(urlParams.entries())
// 注:Object.fromEntries 可以把键值对对象转换为对象,如:Object.fromEntries([['a',1],['b',2]]) 得到 {a: 1, b: 2}
下面就开始介绍 URLSearchParams 的使用方法。
构造函数
URLSearchParams() 返回一个 URLSearchParams 对象。
一个实现了 URLSearchParams 的对象可以直接用在 for…of 结构中,以键/值对在查询字符串中出现的顺序对它们进行迭代
const urlParams = new URLSearchParams('a=1&b=2');
for(const [key,value] of urlParams){
console.log(key,value)
}
// 输出
// a 1
// b 2
实例属性
size
返回 URLSearchParams 对象中查询参数的总个数。
new URLSearchParams('a=1&b=2').size
// 输出 2
实例方法
append()
插入一个指定的键/值对作为新的查询参数。
需要特别注意的是,append() 方法并不会为我们做去重,所以在添加之前最好先调用 delete() 进行删除,或者使用 set() 方法进行设置参数。
const urlParams = new URLSearchParams('a=1&b=2');
urlParams.append('c',3);
console.log(urlParams.toString());
// 输出 'a=1&b=2&c=3'
urlParams.append('c',3);
// 输出 'a=1&b=2&c=3&c=3'
delete()
从查询参数列表里删除指定的查询参数及其对应的值。
如果有相同参数,则也会一并删除。
const urlParams = new URLSearchParams('a=1&b=2&b=3');
urlParams.delete('b'); // 会删除所有 b 参数
console.log(urlParams.toString());
// 输出 'a=1'
set()
设置一个查询参数的新值,假如原来有多个值将删除其他所有的值。
const urlParams = new URLSearchParams('a=1&b=2&b=3');
urlParams.set('b',2);
console.log(urlParams.toString());
// 输出 'a=1&b=2'
entries()
返回一个 iterator
可以遍历所有键/值对的对象。
const urlParams = new URLSearchParams('a=1&b=2');
for(const [key,value] of urlParams.entries()){
console.log(key,value)
}
// 输出
// a 1
// b 2
forEach()
通过回调函数迭代此对象中包含的所有值。
const urlParams = new URLSearchParams('a=1&b=2');
urlParams.forEach(value=>{
console.log(value)
})
// 输出
// 1
// 2
keys()
返回 iterator 此对象包含了键/值对的所有键名。不会去除重复键名
const urlParams = new URLSearchParams('a=1&b=2&b=3');
urlParams.keys().forEach(key=>console.log(key))
// 输出
// a
// b
// b
values()
返回iterator 此对象包含了键/值对的所有值。
const urlParams = new URLSearchParams('a=1&b=2&b=3');
urlParams.values().forEach(key=>console.log(key))
// 输出
// '1'
// '2'
// '3'
get()
获取指定查询参数的第一个值。注意:返回的是 string 类型的值
const urlParams = new URLSearchParams('a=1&b=2');
console.log(urlParams.get('a'))
// 输出 '1'
getAll()
获取指定查询参数的所有值,返回是一个数组。
const urlParams = new URLSearchParams('a=1&b=2&b=3');
console.log(urlParams.getAll('a'));
// 输出 ['1']
console.log(urlParams.getAll('b'));
// 输出 ['2', '3']
has()
返回 Boolean 判断是否存在此查询参数。
const urlParams = new URLSearchParams('a=1&b=2');
console.log(urlParams.has('a'))
// 输出 true
console.log(urlParams.has('c'))
// 输出 false
sort()
按键名排序。排序顺序是根据键的 Unicode 代码点。该方法使用稳定的排序算法 (即,将保留具有相等键的键/值对之间的相对顺序)。
const urlParams = new URLSearchParams('c=3&a=1&b=3&b=2');
urlParams.sort();
console.log(urlParams.toString());
// 输出 'a=1&b=3&b=2&c=3'
toString()
返回查询参数组成的字符串,可直接使用在 URL 上。