使用 URLSearchParams 在 JavaScript 中获取查询字符串值

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情

HTTP 协议允许使用查询字符串向网页发出请求。

像这样：

https://example.com/?name=O.O
https://example.com/post?name=O.O

在这种情况下，我们有一个名为 name 的查询参数， 其值为 O.O。

您可以有多个参数，如下所示：

https://example.com/post?name=O.O&age=20

为了使用 JavaScript 访问浏览器内的查询值，我们有一个名为 URLSearchParam 的特殊 API，所有现代浏览器都支持该 API：

用法：

const params = new URLSearchParams(window.location.search)

注意：不要将完整的 URL 作为参数传递给 URLSearchParams()，而只传递 URL 的查询字符串部分，您可以使用 window.location.search。

例如：

https://example.com/post?name=O.O

window.location.search 等于字符串 ?name=O.O。

现在您有了 params 对象，您可以查询它了。

您可以检查是否传递了参数：

params.has('name')

您可以获取参数的值：

params.get('name')

您可以迭代所有参数，使用 for...of：

const params = new URLSearchParams(window.location.search)

for (const param of params) {
  console.log(param)
}

一个参数可以有多个值。

在这种情况下，我们多次传递相同的参数名，如下所示：

https://example.com/post?name=D.O&name=O.O

我们无法检测一个参数是否被多次传递。如果我们使用 params.get('name')，我们只会得到第一个值。

我们可以使用 params.getAll('name') 返回一个包含所有传递值的数组。

除了 has()、get() 和 getAll()，URLSearchParams API 还提供了几种其他方法，我们可以使用这些方法循环参数：

• forEach() 迭代参数
• entries() 返回包含参数键/值的迭代器
• keys() 返回包含参数键的迭代器
• values() 返回包含参数值的迭代器

更改参数的其他方法，用于页面中运行的其他 JavaScript（它们不会更改 URL）：

• append() 将新参数附加到对象
• delete() 删除现有参数
• set() 设置参数的值

我们还使用 sort() 按键值对参数进行排序，使用 toString() 方法从值生成查询字符串。

我们可以使用 append()、.delete()、set() 来编辑查询字符串，并使用 toString() 生成一个新的查询字符串。

示例：生成一个包含当前 URL 参数的对象

使用正则匹配获取查询字符串值：

const getURLParameters = (url) =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (acc, cur) => (
      (acc[cur.slice(0, cur.indexOf('='))] = cur.slice(cur.indexOf('=') + 1)),
      acc
    ),
    {}
  )

getURLParameters('google.com') // {}
getURLParameters('https://example.com?name=O.O&age=18') // {name: 'O.O', age: '18'}

使用 URLSearchParams 查询字符串值：

const queryStringToObject = (url) =>
  [...new URLSearchParams(url.split('?')[1])].reduce(
    (a, [k, v]) => ((a[k] = v), a),
    {}
  )

queryStringToObject('https://google.com?page=1&count=10') // {page: '1', count: '10'}

---

本文首发 blog，如果喜欢或者有所启发，欢迎 Star，对作者也是一种鼓励。