使用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的形式

1. const responseURL  = "http://localhost:8088/list/query-list/?aaa=newList&regionDd=12345&user=zhangsan"
2. // 上面这个字符串，我想获取到aaa的值是 newList。应该如何实现
3. function parseUrlParams(url,keyName) {
4.   const queryString = url.split('?')[1];
5.   if (!queryString) return undefined;
6.   const params = {};
7.   const pairs = queryString.split('&');
8.   console.log('pairs', pairs)
9.   for (let pairItem of pairs) {
10.     const [key, value] = pairItem.split('=');
11.     params[decodeURIComponent(key)] = decodeURIComponent(value || '');
12.   }
13.   return params[keyName];
14. }
16. console.log(parseUrlParams(responseURL,'user'))

复制代码

decodeURIComponent 的作用

有的小伙伴看见我使用了decodeURIComponent，想知道decodeURIComponent的作用？
decodeURIComponent 的作用是 将 URL 编码后的参数名和参数值还原为人类可读的原始字符。
确保解析后的参数值符合预期。
具体说明:
URL 中某些特殊字符（如空格、&, =, 中文等）会被编码成 % 开头的格式（例如空格变成 %20，中文可能变成 %E4%B8%AD）。
decodeURIComponent 兼容性非常好。
encodeURIComponent 的作用说明

假设 URL 是：

1. "http://example.com?user=abc%20test&name=%E5%BC%A0%E4%B8%89"

复制代码

原始参数值：

1. user = abc test
2. name= '张三'

复制代码

未解码的结果

1. {user: 'abc%20test', name: '%E5%BC%A0%E4%B8%89'}

复制代码

使用 decodeURIComponent 解码后：

1. {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 新增，修改，删除参数

1. const responseURL  = "http://example.com?user=abc%20test&name=%E5%BC%A0%E4%B8%89"
2. const queryString = responseURL.split('?')[1];
3. if(queryString){
4.   const params = new URLSearchParams(queryString);
5.   // name存在，更改参数
6.   params.set('name', '华佗');
7.   // sex不存在，设置新的参数  
8.   params.set('sex', '男');
9.   // 删除user这个参数
10.   params.delete('user')
11.   console.log(22, params)
12. }

复制代码

使用 URLSearchParams 解析参数

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

复制代码

URLSearchParams浏览器的兼容性

Chrome 49+
Firefox 18+
Edge 14+
Safari 10.1+
Opera 36+
以上支持。
不支持：Internet Explorer 全系列（包括 IE11）
兼容性处理

1. const responseURL  = "http://localhost:8088/list/query-list/?aaa=newList&regionDd=12345&user=zhangsan"
2. function parseUrlParams(url, keyName) {
3.   try {
4.     const queryString = url.split('?')[1];
5.     if (!queryString) return undefined;
6.    
7.     // 优先使用原生 API
8.     if (window.URLSearchParams) {
9.       return new URLSearchParams(queryString).get(keyName);
10.     }
11.     // 兼容旧版浏览器的解析方案
12.     const params = {};
13.     queryString.split('&').forEach(pairItem => {
14.       const [key, value] = pairItem.split('=');
15.       params[decodeURIComponent(key)] = decodeURIComponent(value || '');
16.     });
17.     return params[keyName];
18.   } catch (e) {
19.     console.error('URL 解析失败:', e);
20.     return undefined;
21.   }
22. }
23. console.log(parseUrlParams(responseURL, 'aaa'));

复制代码

尾声

大佬们，怎么如果你觉得写得不错，请给我鼓励。如：打赏，推荐。
                                                                                                                               

                                                微信                                                                                                本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
                        如果文中有什么错误，欢迎指出。以免更多的人被误导。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！