获取 url 地址栏 ? 后面的查询字符串，并以键值对形式放到对象里面

news2024/9/20 1:10:19

写在前面

在前端面试当中，关于 url 相关的问题很常见，而对于 url 请求参数的问题也很常见，大部分以笔试题常见，今天就根据这道面试题一起来看一下。

问题

获取 url 地址栏?后面的查询字符串，并以键值对形式放到对象里面。

我们以百度为例：

我在百度搜索掘金，url 为以下格式

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=68018901_3_dg&wd=%E6%8E%98%E9%87%91&oq=%25E6%2590%259C%25E7%25B4%25A2&rsv_pq=d2454dd90049702a&rsv_t=598fAS5T78kkZ23tFIcK1kZLSsa4GB8sRQSPvNKJ%2BizDR%2FMcYnE4%2BaylKTnlCrdjTquMiQ&rqlang=cn&rsv_dl=tb&rsv_enter=1&rsv_sug3=10&rsv_sug1=6&rsv_sug7=100&rsv_sug2=0&rsv_btype=t&inputT=2760&rsv_sug4=3716

可以看到，url的？后面有很多请求参数

我们先来获取 ? 后面的内容

使用 window.location 打印看看

可以看到 searh 里面是我们想要的内容，打印看看

没问题，所以使用 window.location.search可以获取 ? 后面的内容

但是现在我们不仅需要获取 ? 后面的内容，还需要将请求参数提取出来。

一般情况下我们可能使用 & 先进行分割，然后再使用 = 进行分割，最后循环提取出来，这样可以实现，但是不是特别方便，接下来介绍一个方法，很适合这类问题。

解决

使用 URLSearchParams

MDN 官方解释如下

URLSearchParams - Web API | MDN (mozilla.org)

在示例当中看到，可以直接使用 for of 迭代查询参数

我们看一下迭代出来的结果是什么

  let windowUrl = window.location.search 
  let bUrl = new URLSearchParams(windowUrl)
  for (const [key, value] of bUrl) {
    obj[key] = value
    console.log('key: ', key);
    console.log('value: ', value);
  }

可以看到，直接拿到相对应的请求参数

最后将解构出来的数据存到对象里就行了

  let obj = {}
  for (const [key, value] of bUrl) {
    obj[key] = value
  }
  console.log('obj: ', obj)

因为我们需要用到 window.location.search 进行模拟代码，所以直接在vscode里面调试不太方便，这里推荐大家使用，源代码 - 片段 - 新建片段进行调试代码，比直接在控制台写代码方便一些，写完右键执行，就可以在控制台看结果了。

完整代码

  let windowUrl = window.location.search 
  let bUrl = new URLSearchParams(windowUrl)
  let obj = {}
  for (const [key, value] of bUrl) {
    obj[key] = value
    console.log('key: ', key);
    console.log('value: ', value);

  }
  console.log('obj: ', obj)