使用 URLSearchParams 读取和更新查询参数

前言

前端中常见的任务之一是获取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?filter?size=M&colour=red&sleeves=short")
url.search //=> ?size=M&colour=red&sleeves=short

我们现在可以将 location.search 传递给 URLSearchParams 构造函数：

const params = new URLSearchParams(location.search)

查询参数

我们可以使用 has 查看是否存在特定的查询参数：

params.has('size') // => true
params.has('button-style') // => false

如果要从查询参数中读取值，可以使用 get 。如果不存在查询参数，您将返回 null 。

params.get('size') // => 'M'
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 params = new URLSearchParams(location.search)
params.get('size') //=> 'M'
params.getAll('size') //=> ['M', 'L']

迭代参数

您可以通过几种不同的方式遍历所有参数。第一个如果使用 for of 。再次提防参数会取多个值，它们会出现两次！

// URL: juejin.com/filter?size=M&size=L&colour=red
const params = new URLSearchParams(location.search)
for (let p of params) {
  console.log(p)
}
// => ['size', 'M']
// => ['size', 'L']
// => ['colour', 'red']

您还可以使用 .keys() 获取参数中所有键的迭代器，或使用 .values() 获取所有值：

// URL: juejin.com/filter?size=M&size=L&colour=red
const params = new URLSearchParams(location.search)
console.log([...params.keys()]) // => ['size', 'size', 'colour']
console.log([...params.values()]) // => ['M', 'L', 'red']
console.log([...params.entries()]) // => [['size', 'M'], ['size', 'L'], ['colour', 'red']]

修改参数

首先要注意的是，所有这些方法都会改变现有的 URLSearchParams 对象，而不是返回一个新对象。

您可以使用 .delete() 删除查询参数。

如果它有多个，这将删除它的所有值：

// URL: juejin.com/filter?size=M&size=L&colour=red
const params = new URLSearchParams(location.search)
params.delete('size')
console.log([...params.keys()]) // => ['colour']

我们可以使用 .append() 添加一个新的键/值对。如果该值已经存在， append 将附加新值：

// URL: juejin.com/filter?size=M&colour=red
const params = new URLSearchParams(location.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 params = new URLSearchParams(location.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 params = new URLSearchParams(location.search)
params.set('size', 'L')
params.delete('colour')
console.log(params.toString()) // => 'size=L'

请注意， toString 不会在开头添加 ? ，因此请确保在需要时记得添加它。

结论

URLSearchParams 是一个很棒的 API，您可以使用它来清楚地更新您 URL 的查询参数，而不必担心任何额外的库来解析查询参数，或者在最后将它们转换回字符串。我强烈建议您下次需要进行一些查询参数解析或更新时使用它！