JavaScript如何获取URL查询参数详解
引言
说起 Web 开发，处理 URL 里的查询参数（也有人习惯叫它“搜索内容”）几乎是家常便饭。你看网址里跟在 ? 后面的那串东西，比如 ?name=zhangsan&page=1，就是由一个个键值对组成的查询参数。能不能干净利落地把它们“拆解”出来，直接关系到动态页面渲染、表单数据传递乃至路由跳转这些核心功能的实现。
免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈
接下来，我们就一起看看，如何用Ja vaScript写一个函数，把URL里的查询参数一个不落地匹配并提取出来。整个过程会掰开揉碎了讲清楚，并配上详细的代码示例。
一、URL 查询参数的结构
查询参数的“大本营”在URL中 ? 符号之后。它的组织规则很清晰：多个键值对之间用 & 隔开，而每个键值对内部，键和值则用 = 连接。举个例子：
https://example.com/page?key1=value1&key2=value2&key3=value3
在这个地址里，key1=value1&key2=value2&key3=value3 就是查询参数字符串，清清楚楚包含了三组数据。
二、实现思路
想要提取这些参数，思路其实可以归结为四步走：
- 锁定目标字符串：先把URL中
?之后的那部分整个取出来。 - 拆分组装件：用
&作为分隔符，把长长的参数字符串拆分成一个个独立的键值对。 - 解析核心数据：对每个键值对，再用
=分开，拿到原始的键名和值。 - 规整存储：最后，把这些解析好的键值对存到一个对象里，想用的时候随时取用。
三、代码实现
（一）提取查询字符串
第一步，得把查询字符串从URL里分离出来。这事儿用Ja vaScript原生的 URL 对象办起来最顺手，它能帮你把URL的各个部分安排得明明白白。
function getSearchString(url) {
const urlObj = new URL(url);
return urlObj.search; // 返回的就是“?key1=value1&key2=value2”这部分
}
（二）解析查询参数
拿到参数字符串后，接下来就是“解码”环节了。我们需要去掉开头的问号，拆分键值对，并处理好可能的URL编码。
function parseSearchString(searchString) {
const params = {};
// 先把开头的‘?’去掉
const pairs = searchString.slice(1).split('&');
pairs.forEach((pair) => {
const [key, value] = pair.split('=');
// 对键和值进行解码，还原原始字符
params[decodeURIComponent(key)] = decodeURIComponent(value);
});
return params;
}
（三）完整函数
把前面两步组合一下，一个功能完整的提取函数就诞生了。
function getSearchParams(url) {
// 提取查询字符串
const search = getSearchString(url);
// 解析查询参数
return parseSearchString(search);
}
（四）示例代码
光说不练假把式，来看一个从提取到解析的完整示例：
function getSearchString(url) {
const urlObj = new URL(url);
return urlObj.search;
}
function parseSearchString(searchString) {
const params = {};
const pairs = searchString.slice(1).split('&');
pairs.forEach((pair) => {
const [key, value] = pair.split('=');
params[decodeURIComponent(key)] = decodeURIComponent(value);
});
return params;
}
function getSearchParams(url) {
const search = getSearchString(url);
return parseSearchString(search);
}
// 示例 URL
const url = 'https://example.com/page?key1=value1&key2=value2&key3=value3';
// 获取查询参数
const params = getSearchParams(url);
console.log(params);
// 输出：{ key1: 'value1', key2: 'value2', key3: 'value3' }
四、使用现代 Ja vaScript 方法
当然，现在Ja vaScript的“兵器库”更先进了。ES6引入的 URLSearchParams 对象，就是专门为处理查询参数而生的利器，用起来更简单、更高效。
（一）使用URLSearchParams
来看看用这个现代方法如何重构我们的函数：
function getSearchParams(url) {
const urlObj = new URL(url);
const params = new URLSearchParams(urlObj.search);
const result = {};
// URLSearchParams本身是可迭代的
for (const [key, value] of params) {
result[key] = value;
}
return result;
}
// 示例 URL
const url = 'https://example.com/page?key1=value1&key2=value2&key3=value3';
// 获取查询参数
const params = getSearchParams(url);
console.log(params);
// 输出：{ key1: 'value1', key2: 'value2', key3: 'value3' }
（二）优点
- 代码简洁：
URLSearchParams提供了一套直观的API，省去了手动拆分、解码的麻烦。 - 性能更优：作为语言内置的构造函数，它在底层做了充分的优化。
- 支持广泛：所有现代浏览器都已经原生支持，可以放心使用。
（三）兼容性检查
话说回来，如果项目还需要顾及一些很古老的浏览器环境，做个兼容性检查总是更稳妥的。
if (typeof URLSearchParams === 'undefined') {
// 降级方案：使用我们前面写的自定义解析方法
} else {
// 优先使用更强大的 URLSearchParams
}
五、总结
总的来说，提取URL查询参数无外乎两种主流方案：一种是手动解析查询字符串，一步步拆分解码；另一种则是直接借助现代的 URLSearchParams 对象。毫无疑问，后者凭借其简洁的API和优秀的性能，已经成为当下开发中的首选。
在实际项目中，建议将 URLSearchParams 作为主力方案，同时辅以简单的兼容性判断作为后备。熟练掌握这套方法，无论是处理动态内容、管理路由状态，还是解析表单数据，你都能更加得心应手。
希望以上关于使用Ja vaScript匹配与提取URL查询参数的实现方法，能为你带来清晰的指引。更多相关技术细节，也可以持续关注本站的其他技术文章。
热门专题
热门推荐
小牛电动车充电口防水设计解析 说到小牛电动车的充电口，你会发现主流车型都配备了基础的防水设计。比如，GOVA F0把充电接口藏在了座垫前端的下方，还加了个透明的防护盖；而G400T呢，则把带盖的充电口集成在了前面储物盒的左侧。其实，眼下在售的不少车型都采用了类似思路——一个可开合的物理防护盖，配上密
鼠标宏的开启与关闭必须通过品牌官方驱动软件完成，无法依赖系统级通用设置或硬件盲操作。 你得知道，鼠标宏的开关，真不是靠系统设置或者硬件上瞎按几下就能搞定的，这事儿必须过官方驱动这一关。以罗技G系列为例，整个流程很明确：先安装好Logitech G HUB，等它识别出你的设备，然后到按键配置页面，给指
小米移动电源开关与启停全攻略：物理按键、智能感知与无线控制 想快速用上充电宝的电，或者想让它安静休眠节省电量？其实答案，就在那个小小的电源按键上。小米移动电源的开关机逻辑，可以说是兼顾了极简操作与智能管理，我们常听到的“无感交互”理念，在这里体现得淋漓尽致。下面咱们就来拆解一下，从基础操作到高级玩法
是的，恢复出厂设置后，TP-Link路由器里的宽带账号密码会被清空 没错，一旦执行了恢复出厂设置，你保存在TP-Link路由器里的宽带账号和密码就会被彻底抹掉。这个操作可不是简单地重置一下Wi-Fi名字或者管理员密码，而是来了一次“大扫除”——WAN口配置、PPPoE拨号信息、你设置过的端口映射，还
家用充电桩安装指南：从申请到通电的全流程解析 没错，在自家车位上安装充电桩，主要绕不开三个环节：向供电公司申请用电、取得物业许可、最后完成装表接电。这事儿听起来有点繁复，但得益于这两年明确的政策引导，整个流程已经顺畅多了。国家能源局和住建部联合发布的文件，核心就是简化手续、保障权利。现在，车主只需准