js中的URLSearchParams是在ECMAScript 2015(ES6)中引入的，可以简化对URL中参数的操作。

new URLSearchParams(name1=value1&name2=value2&...&namen=valuen)返回值有多个操作方法：

toString()
get(name)
getAll(name)
has(name)
append(name, value)
set(name, value)
delete(name)
keys()、values()、entries()

下面简单一一介绍一下这些方法。

1.toString()打印

params = new URLSearchParams('?color=red&name=apple')
params2 = new URLSearchParams('color=red&name=apple')
params.toString() // 'color=red&name=apple'
params2.toString() //'color=red&name=apple'

params = new URLSearchParams('?color=red&tast=%E5%A5%BD&test=测试&test再试=再次测试')
params.toString()
输出：
'color=red&tast=%E5%A5%BD&test=%E6%B5%8B%E8%AF%95&test%E5%86%8D%E8%AF%95=%E5%86%8D%E6%AC%A1%E6%B5%8B%E8%AF%95'

2.get(name)获取参数值：

有?：

params = new URLSearchParams('?color=red&name=apple')
params.get('color') // red
params.get('name') // apple

无?：

params = new URLSearchParams('color=red&name=apple')
params.get('color') // red
params.get('name') // apple

参数或参数值中有编码：

encodeURIComponent("好") // %E5%A5%BD
decodeURIComponent("%E5%A5%BD") // 好
params = new URLSearchParams('color=red&name=apple&tast=%E5%A5%BD')
params.get('tast') // 好

encodeURIComponent("test再试") // test%E5%86%8D%E8%AF%95
encodeURIComponent("再次测试") // %E5%86%8D%E6%AC%A1%E6%B5%8B%E8%AF%95
params = new URLSearchParams('color=red&test%E5%86%8D%E8%AF%95=%E5%86%8D%E6%AC%A1%E6%B5%8B%E8%AF%95')
params.get('test再试') // 再次测试
params.get('test%E5%86%8D%E8%AF%95') // null

有多个color：

params = new URLSearchParams('color=bule&color=red&name=apple')
params.get('color') // blue

有多个name：

params = new URLSearchParams('name=banana&color=red&name=apple')
params.get('name') // banana

3.getAll(name)获取所有对应名称的参数值

params = new URLSearchParams('color=red&name=apple')
params.getAll('color') // ['red']

有多个color：

params = new URLSearchParams('color=bule&color=red&name=apple')
params.get('color') // blue
params.getAll('color') // ['bule', 'red']

4.has(name)判断是否存在指定名称参数

params = new URLSearchParams('color=red&name=apple')
params.has('color') // true
params.has('color2') // false

5.append(name, value)向url中添加指定参数和对应值

params = new URLSearchParams('color=red&name=apple')
params.append('id', '123')
params.toString() // 'color=red&name=apple&id=123'

添加已有的参数：

params = new URLSearchParams('color=red&name=apple')
params.append('name', '123')
params.toString() // 'color=red&name=apple&name=123'

6.set(name, value)设置url中指定参数值，参数不存在时添加参数

params = new URLSearchParams('color=red&name=apple')
params.set('id', '123')
params.toString() // 'color=red&name=apple&id=123'
params.set('color', 'blue')
params.toString() // 'color=blue&name=apple&id=123'

有多个color：

params = new URLSearchParams('color=bule&color=red&name=apple')
params.toString() // 'color=bule&color=red&name=apple'
params.set('color', 'yellow') 
params.toString() // 'color=yellow&name=apple'

7.delete(name)删除指定参数

params = new URLSearchParams('color=red&name=apple')
params.delete('color222')
params.toString() // 'color=red&name=apple'

params.delete('color')
params.toString() // 'name=apple'

params = new URLSearchParams('color=bule&color=red&name=apple&color=yellow')
params.delete('color')
params.toString() // 'name=apple'

params = new URLSearchParams('color=bule&color=red&name=apple&color=yellow')
params.delete('name')
params.toString() // 'color=bule&color=red&color=yellow'
params.delete('color')
params.toString() // ''

8.keys()可用于遍历所有参数名、values()可用于遍历所有值、entries()可用于遍历所有键值对：

params = new URLSearchParams('color=bule&color=red&name=apple&tast=good')
for (const key of params.keys()) {
  console.log(key)
}
输出：
color
color
name
tast

for (const value of params.values()) {
  console.log(value) 
}
输出：
bule
red
apple
good

for (const [key, value] of params.entries()) {
  console.log(key+"="+value) 
}
输出：
color=bule
color=red
name=apple
tast=good

URLSearchParams对于旧版浏览器不太兼容，使用时要注意，且URLSearchParams已经自动对参数和参数值编码进行了处理，不用额外进行处理了~