•
阅读 3 分钟
URLSearchParams 处理查询字符串
URLSearchParams api 定义了用于处理 url 查询的方法,可以用于更新你的 query parameters 方法,而不是使用 qs,query-string 等库
构造方法(constructor)
构造方法接收一个字符串作为参数,new URLSearchParams(init)
返回 URLSearchParams
对象实例,该对象实例的许多方法可以使用 for...of
遍历
const searchParams = new URLSearchParams(location.search)
// 下面两行代码同义
for (const params of searchParams) {
}
for (const params of searchParams.entries()) {
}
对象方法
URLSearchParams.append(name, value)
向查询参数对象中添加键/值
const searchParams = new URLSearchParams()
searchParams.append('q', 'append')
需要注意的是添加数组作为值(value)的时候,会被处理为逗号分隔的字符串
const searchParams = new URLSearchParams()
searchParams.append('arr', ['a', 'b'])
searchParams.get('arr') // 'a,b'
URLSearchParams.delete(name)
删除查询参数中指定的参数和对应的值
URLSearchParams.entries()
返回一个可以遍历所有键/值的 iterator 对象
const searchParams = new URLSearchParams('q=v')
for (const [key, value] of searchParams.entries()) {
console.log(key, value) // q v
}
// or
console.log([...searchParams.entries()]) // [["q", "v"]]
URLSearchParams.get(name)
返回对应 name 的第一个值
const searchParams = new URLSearchParams('q=v&q=a')
searchParams.get('q') // v
URLSearchParams.getAll(name)
返回一个数组,包含对应 name 的所有值
const searchParams = new URLSearchParams('q=v&q=a')
searchParams.getAll('q') // ["v", "a"]
URLSearchParams.has(name)
用于判断是否含有某一查询参数
URLSearchParams.keys()
返回一个可以遍历所有键名的 iterator 对象
const searchParams = new URLSearchParams('q=v')
for (const key of searchParams.keys()) {
console.log(key) // q
}
// or
console.log([...searchParams.keys()]) // ["q"]
URLSearchParams.values()
返回一个可以遍历所有值的 iterator 对象
URLSearchParams.sort()
const searchParams = new URLSearchParams('q=v&bar=bar&charset=utf8')
searchParams.sort()
searchParams.toString() // bar=bar&charset=utf8&q=v
对查询按键名排序
URLSearchParams.toString()
返回 URLSearchParams
对象组成的字符串,常用于 URL search 上
const searchParams = new URLSearchParams('q=v')
searchParams.append('bar', 'bar')
searchParams.append('charset', 'utf8')
searchParams.toString() // q=v&bar=bar&charset=utf8
浏览器兼容性
URLSearchParams
支持大部分现代浏览器,IE,Edge Mobile 浏览器不支持。如果你的用户群体依然是这些,可行的解决方法是使用 polyfill 填充
URLSearchParams polyfill
使用 @ungap/url-search-params 使用 URLSearchParams
api,为不支持的浏览器添加对应功能
import URLSearchParams from '@ungap/url-search-params'
new URLSearchParams('q=v').get('q') // v
相关参考
标签:
#javascript
#function