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

目录

前言

使用 URLSearchParams

查询参数

get vs getAll

迭代参数

修改参数

取回 URL

结论

---

前言

前端中常见的任务之一是获取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 的查询参数，而不必担心任何额外的库来解析查询参数，或者在最后将它们转换回字符串。我强烈建议您下次需要进行一些查询参数解析或更新时使用它！