使用URLSearchParams 优雅的获取URL携带的参数

需求描述

今天遇见一个问题,再请求接口的时候。

需要知道返回来的url中某个参数的值与返回来的数据是否匹配。

因此我们需要获取URL携带的参数的参数值。

我知道这个需求对很多小伙伴来说,非常简单。三下五除二就写下了如下的代码

获取url地址栏中的参数

思路如下:

1,通过string.split方法通过?分割成为2部分,得到aaa=newList&regionDd=12345&user=zhangsan

2,然后在通过 & 分割成为2部分,得到aaa=newList, regionDd=12345, user=zhangsan

3,最后在通过 = 分割成为key:value的形式

javascript 复制代码
const responseURL  = "http://localhost:8088/list/query-list/?aaa=newList&regionDd=12345&user=zhangsan"
// 上面这个字符串,我想获取到aaa的值是 newList。应该如何实现
function parseUrlParams(url,keyName) {
  const queryString = url.split('?')[1];
  if (!queryString) return undefined;
  const params = {};
  const pairs = queryString.split('&');
  console.log('pairs', pairs)
  for (let pairItem of pairs) {
    const [key, value] = pairItem.split('=');
    params[decodeURIComponent(key)] = decodeURIComponent(value || '');
  }
  return params[keyName];
}

console.log(parseUrlParams(responseURL,'user'))

decodeURIComponent 的作用

有的小伙伴看见我使用了decodeURIComponent,想知道decodeURIComponent的作用?

decodeURIComponent 的作用是 将 URL 编码后的参数名和参数值还原为人类可读的原始字符。

确保解析后的参数值符合预期。

具体说明:

URL 中某些特殊字符(如空格、&, =, 中文等)会被编码成 % 开头的格式(例如空格变成 %20,中文可能变成 %E4%B8%AD)。

decodeURIComponent 兼容性非常好。

encodeURIComponent 的作用说明

假设 URL 是:

perl 复制代码
"http://example.com?user=abc%20test&name=%E5%BC%A0%E4%B8%89"

原始参数值:

ini 复制代码
user = abc test
name= '张三'

未解码的结果

css 复制代码
{user: 'abc%20test', name: '%E5%BC%A0%E4%B8%89'}

使用 decodeURIComponent 解码后:

css 复制代码
{user: 'abc test', name: '张三'}

URLSearchParams 的简单说明

除了使用上面的方法,其实还有一个方法可以更加优雅的实现。

掌声有请我们今天的主角。URLSearchParams 闪亮登场。

URLSearchParams 是 ECMAScript 2015(ES6)引入的内置对象,

用于解析和操作 URL 中的查询参数(即 URL 地址栏中 "?" 后面的部分)

URLSearchParams 是浏览器原生 API,能自动处理 URL 编码(如 %20 转空格)。

通过 .get(name) 获取参数值,若参数不存在则返回 null

如果 URL 中存在多个同名参数(如 dim=abc&dim=cvm, get() 会返回第一个值abc

params.set(key, value) 如果key不存在就是新增参数,如果key存在就是修改参数值

params.del(key) 删除某个参数

URLSearchParams 新增,修改,删除参数

csharp 复制代码
const responseURL  = "http://example.com?user=abc%20test&name=%E5%BC%A0%E4%B8%89"
const queryString = responseURL.split('?')[1];
if(queryString){
  const params = new URLSearchParams(queryString);
  // name存在,更改参数
  params.set('name', '华佗'); 
  // sex不存在,设置新的参数  
  params.set('sex', '男'); 
  // 删除user这个参数
  params.delete('user')
  console.log(22, params)
}

使用 URLSearchParams 解析参数

csharp 复制代码
// url还是之前那个参数
const responseURL  = "http://example.com?user=abc%20test&name=%E5%BC%A0%E4%B8%89"
function parseUrlParams(url) {
  // 分割出查询参数部分
  const queryString = url.split('?')[1];
  if (!queryString) return undefined;
 
  // 使用 URLSearchParams 解析参数
  const params = new URLSearchParams(queryString);
  // 直接获取 user 参数值
  return params.get('user'); // 返回 "abc test"
}
console.log(parseUrlParams(responseURL))

URLSearchParams浏览器的兼容性

Chrome 49+

Firefox 18+

Edge 14+

Safari 10.1+

Opera 36+

以上支持。

不支持:Internet Explorer 全系列(包括 IE11)

兼容性处理

javascript 复制代码
const responseURL  = "http://localhost:8088/list/query-list/?aaa=newList&regionDd=12345&user=zhangsan"
function parseUrlParams(url, keyName) {
  try {
    const queryString = url.split('?')[1];
    if (!queryString) return undefined;
    
    // 优先使用原生 API
    if (window.URLSearchParams) {
      return new URLSearchParams(queryString).get(keyName);
    }
    // 兼容旧版浏览器的解析方案
    const params = {};
    queryString.split('&').forEach(pairItem => {
      const [key, value] = pairItem.split('=');
      params[decodeURIComponent(key)] = decodeURIComponent(value || '');
    });
    return params[keyName];
  } catch (e) {
    console.error('URL 解析失败:', e);
    return undefined;
  }
}
console.log(parseUrlParams(responseURL, 'aaa'));

尾声

大佬们,怎么如果你觉得写得不错,请给我鼓励。如:点赞,收藏。

相关推荐
quan26318 分钟前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路9 分钟前
GDAL 读取影像元数据
前端
qb1 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖1 小时前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯1 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰1 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f1 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖1 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰1 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °1 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app