URLSearchParams
接口定义了一些实用的方法来处理 URL 的查询字符串。
一个实现了 URLSearchParams
的实例返回一个iterator可以遍历所有键/值对的对象,可以直接用在 for...of
结构中。
简单的例子
let params = new URLSearchParams('?a=1&b=2')
params.get('a') // 1
可以看到获取参数变得十分遍历,不需要自己分割或正则处理。
方法
我们打印一个URLSearchParams
实例,可以看到继承了很多方法
console.log(new URLSearchParams())
URLSearchParams {}
__proto__: URLSearchParams
append: ƒ append()
delete: ƒ delete()
entries: ƒ entries()
forEach: ƒ forEach()
get: ƒ ()
getAll: ƒ getAll()
has: ƒ has()
keys: ƒ keys()
set: ƒ ()
sort: ƒ sort()
toString: ƒ toString()
values: ƒ values()
constructor: ƒ URLSearchParams()
Symbol(Symbol.iterator): ƒ entries()
Symbol(Symbol.toStringTag): "URLSearchParams"
__proto__: Object
挨个看一下
let params = new URLSearchParams('?a=1&b=2&a=3&c=4')
append()
插入一个指定的键/值对作为新的搜索参数。
params.append('a',10) // 会新增一个键值对 a=10,即使a已经存在也不会覆盖
params.getAll('a') // ["1", "3", "10"]
delete()
从搜索参数列表里删除指定的搜索参数及其对应的值。
params.delete('a') // 会删除所有a
params.getAll('a') // []
entries()
返回一个iterator可以遍历所有键/值对的对象。
var params = new URLSearchParams('?c=1&b=2&a=3&c=4')
let oIterator = params.entries()
for(var pair of oIterator) {
console.log(pair[0]+ ', '+ pair[1]);
}
// c, 1
// b, 2
// a, 3
// c, 4
forEach()
循环方法,同常规forEach()方法
var params = new URLSearchParams('?c=1&b=2&a=3&c=4')
params.forEach((val,key) => console.log(val,key))
// 1 c
// 2 b
// 3 a
// 4 c
get()
获取指定搜索参数的第一个值,多个相同键名,只取第一个,没搜索到的,返回null
params.get('d') // null
getAll()
获取指定搜索参数的所有值,返回是一个数组
let params = new URLSearchParams('?a=1&b=2&a=3&c=4')
params.getAll('a) // [1,3]
has()
返回 Boolean
判断是否存在此搜索参数
params.has('e') // false
keys()
返回iterator 此对象包含了键/值对的所有键名
let oIterator1 = params.keys()
for(let item of oIterator1) {
console.log(oIterator1.next())
}
// {done: false, value: "b"}
// {done: false, value: "c"}
set()
设置一个搜索参数的新值,假如原来有多个值将删除其他所有的值。
params.set('d','5')
params.get('d') // 5
params.set('a','5')
params.getAll('a') // [5]
sort()
按键名排序
var params = new URLSearchParams('?c=1&b=2&a=3&c=4')
params.sort()
params.toString() // "a=3&b=2&c=1&c=4"
toString()
返回搜索参数组成的字符串,可直接使用在URL上,示例见上
values()
返回iterator
此对象包含了键/值对的所有值
var params = new URLSearchParams('?c=1&b=2&a=3&c=4')
var oValues = params.values()
for(var value of oValues) {
console.log(value);
}
// 1
// 2
// 3
// 4
兼容性
兼容性虽然不好,但是有polyfill项目可以支持项目地址