使用 URLSearchParams 读取和更新查询参数
目录
[TOC]
前言
前端中常见的任务之一是获取url上的参数。但是似乎很少有人知道，现在有一个API用于处理直接嵌入到浏览器中的查询参数，它称为 URLSearchParams 。在这篇文章中，我们将快速体验一下 API，看看使用查询参数有多么容易
使用 URLSearchParams
URLSearchParams 期望得到一串查询参数（有或没有初始的 ? ）。如果你有一个完整的 URL，你想从中解析查询参数，你可以使用 location.search 来提取它们：
// URL: juejin.com/filter?size=M&colour=red&sleeves=short
location.search //=> ?size=M&colour=red&sleeves=short
const url = new URL("https://juejin.com/filter?size=M&colour=red&sleeves=short")
console.log(url.search); //=> ?size=M&colour=red&sleeves=short
我们现在可以将 location.search 传递给 URLSearchParams 构造函数：
const params = new URLSearchParams(url.search)
console.log(params);
查询参数
我们可以使用 has 查看是否存在特定的查询参数：
console.log(params.has('size'));// => true
console.log(params.has('button-style')); // => false
如果要从查询参数中读取值，可以使用 get 。如果不存在查询参数，您将返回 null 。
console.log(params.get('size'));// => 'M'
console.log(params.get('button-style')); // => null
与其使用 has 检查，然后使用 get 获取值，不如使用 get 检查值是否不是 null 。
get vs getAll
get 有一个问题你需要注意。查询参数可能有多个值：
// URL: juejin.com/filter?size=M&size=L
这是一个完全有效的 URL。当我们将它传递给 URLSearchParams 时，它会理解 size 有多个值
get 将只返回查询参数的第一个值。如果你想要所有这些，你需要使用 getAll 它总是返回一个数组：
// URL: juejin.com/filter?size=M&size=L
const url1 = new URL("https://juejin.com/filter?size=M&size=L")
const params1 = new URLSearchParams(url1.search)
console.log(params1.get('size')); //=> 'M'
console.log(params1.getAll('size')); //=> ['M', 'L']
迭代参数
您可以通过几种不同的方式遍历所有参数。第一个如果使用 for of 。再次提防参数会取多个值，它们会出现两次！
const url1 = new URL("https://juejin.com/filter?size=M&size=L&colour=red")
const params1 = new URLSearchParams(url1.search)
for (let p of params1) {
console.log(p)
}
// => ['size', 'M']
// => ['size', 'L']
// => ['colour', 'red']
您还可以使用 .keys() 获取参数中所有键的迭代器，或使用 .values() 获取所有值
// URL: juejin.com/filter?size=M&size=L&colour=red
const url1 = new URL("https://juejin.com/filter?size=M&size=L&colour=red")
const params1 = new URLSearchParams(url1.search)
console.log([...params1.keys()]) // => ['size', 'size', 'colour']
console.log([...params1.values()]) // => ['M', 'L', 'red']
console.log([...params1.entries()]) // => [['size', 'M'], ['size', 'L'], ['colour', 'red']]
修改参数
首先要注意的是，所有这些方法都会 改变现有的 URLSearchParams 对象，而不是返回一个新对象 。
您可以使用 .delete() 删除查询参数。
如果它有多个，这将删除它的所有值：
// URL: juejin.com/filter?size=M&size=L&colour=red
const url1 = new URL("https://juejin.com/filter?size=M&size=L&colour=red")
const params1 = new URLSearchParams(url1.search)
params1.delete('size')
console.log([...params1.keys()]) // => ['colour']
我们可以使用 .append() 添加一个新的键/值对。如果该值已经存在， append 将附加新值：
// URL: juejin.com/filter?size=M&colour=red
const url = new URL("https://juejin.com/filter?size=M&colour=red")
const params = new URLSearchParams(url.search)
params.append('size', 'L')
console.log([...params.keys()]) // => ['size', 'size', 'colour']
console.log([...params.values()]) // => ['M', 'L', 'red']
console.log([...params.entries()]) // => [['size', 'M'], ['size', 'L'], ['colour', 'red']]
如果你想为参数设置一个新值并删除所有其他现有值，你可以使用 .set 来做到这一点：
// URL: juejin.com/filter?size=M&colour=red
const url = new URL("https://juejin.com/filter?size=M&colour=red")
const params = new URLSearchParams(url.search)
params.set('size', 'L')
console.log([...params.keys()]) // => ['size', 'colour']
console.log([...params.values()]) // => ['L', 'red']
console.log([...params.entries()]) // => [['size', 'L'], ['colour', 'red']]
取回 URL
完成所有这些查询参数的读取和更新后，您可能希望将其作为 URL 拉回，以便您可以在浏览器中更新 URL。为此，只需调用 .toString() ：
// URL:juejin.com/filter?size=M&colour=red
const url = new URL("https://juejin.com/filter?size=M&colour=red")
const params = new URLSearchParams(url.search)
params.set('size', 'L')
params.delete('colour')
console.log(params.toString()) // => 'size=L'
请注意，
toString不会在开头添加?，因此请确保在需要时记得添加它。
结论
URLSearchParams 是一个很棒的 API，您可以使用它来清楚地更新您 URL 的查询参数，而不必担心任何额外的库来解析查询参数，或者在最后将它们转换回字符串。我强烈建议您下次需要进行一些查询参数解析或更新时使用它！
