在前端开发场景中，经常需要从当前页面的URL里提取参数，比如从跳转链接中获取用户ID、筛选条件等信息，JavaScript提供了多种实现方式，开发者可以根据项目兼容性要求选择合适的方法。
使用URLSearchParams获取参数
URLSearchParams是现代浏览器原生提供的接口，专门用来处理URL的查询字符串，使用起来非常简洁，不需要手动拆分字符串。
首先可以通过window.location.search获取URL中?后面的查询字符串部分，然后实例化URLSearchParams对象，就可以调用对应的方法获取参数。
常用的方法有：
get(key)：获取指定key对应的第一个参数值，没有则返回nullgetAll(key)：获取指定key对应的所有参数值，返回数组has(key)：判断是否存在指定key的参数
下面是具体的代码示例：
// 假设当前URL为 https://www.ipipp.com/list?type=book&page=2&sort=time
// 获取查询字符串部分
const queryString = window.location.search;
// 实例化URLSearchParams对象
const params = new URLSearchParams(queryString);
// 获取单个参数
const type = params.get('type'); // 返回 "book"
const page = params.get('page'); // 返回 "2"
const sort = params.get('sort'); // 返回 "time"
// 获取不存在的参数
const name = params.get('name'); // 返回 null
// 判断参数是否存在
const hasPage = params.has('page'); // 返回 true
const hasName = params.has('name'); // 返回 false
// 获取同名参数的所有值，假设URL为 ?tag=js&tag=vue&tag=react
const tags = params.getAll('tag'); // 返回 ["js", "vue", "react"]这种方法的优点是写法简单，不需要处理字符串转义、编码等问题，但是兼容性有限，不支持IE浏览器，如果需要兼容旧环境，就不适合使用这种方式。
手动解析查询字符串获取参数
如果需要兼容不支持URLSearchParams的旧浏览器，可以通过手动拆分查询字符串的方式实现参数获取，逻辑稍复杂但兼容性更好。
实现思路是：先去掉查询字符串开头的?，再按&符号拆分得到每个参数键值对，然后按=拆分得到key和value，最后对value进行解码处理。
下面是通用的实现函数：
function getUrlParams() {
// 获取查询字符串，去掉开头的?
const queryString = window.location.search.slice(1);
// 如果查询字符串为空，返回空对象
if (!queryString) return {};
// 按&拆分参数
const paramArr = queryString.split('&');
const params = {};
paramArr.forEach(item => {
// 按=拆分key和value，考虑到value可能包含=，所以只拆分第一个=
const [key, value] = item.split('=');
if (key) {
// 对value进行解码，处理特殊字符
params[decodeURIComponent(key)] = value ? decodeURIComponent(value) : '';
}
});
return params;
}
// 使用示例，假设当前URL为 https://www.ipipp.com/detail?id=123&name=%E6%B5%8B%E8%AF%95
const urlParams = getUrlParams();
console.log(urlParams.id); // 返回 "123"
console.log(urlParams.name); // 返回 "测试"这个函数的兼容性很好，支持所有浏览器，但是需要手动处理编码解码，如果参数值包含特殊字符，没有正确解码可能会出现乱码问题，使用时要注意对value进行decodeURIComponent处理。
两种方法的对比
为了更清晰地选择适合的方法，下面把两种方式的优缺点整理成表格：
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| URLSearchParams | 写法简洁，原生支持，不需要处理编码问题 | 不兼容IE浏览器 | 现代浏览器项目，不需要兼容旧环境 |
| 手动解析字符串 | 兼容性极好，支持所有浏览器 | 需要手动处理编码解码，逻辑稍复杂 | 需要兼容IE等旧浏览器的项目 |
如果项目中已经使用了polyfill库，也可以给旧浏览器添加URLSearchParams的兼容补丁，这样就能统一使用简洁的写法，不用再写手动解析的逻辑。
JavaScriptURL参数URLSearchParams字符串解析前端开发修改时间：2026-06-07 03:19:26