在Web开发中，经常需要从页面的URL里获取参数来完成业务逻辑，比如根据商品ID展示商品详情、根据用户选择的标签筛选内容等。下面我们就来看看在JavaScript中实现URL参数获取的几种常用方法。
方法一：使用URLSearchParams API
这是目前最推荐的现代浏览器兼容的方法，URLSearchParams是浏览器原生提供的API，专门用于解析和处理URL的查询字符串，使用起来非常简洁。
首先我们可以通过window.location.search获取URL中?后面的查询字符串部分，然后将其传入URLSearchParams构造函数，就可以快速获取参数。
// 假设当前URL为 https://ipipp.com/product?id=123&type=book&name=前端教程
// 获取查询字符串部分
const queryString = window.location.search;
// 创建URLSearchParams实例
const params = new URLSearchParams(queryString);
// 获取单个参数值
const id = params.get('id'); // 返回 "123"
const type = params.get('type'); // 返回 "book"
// 获取所有参数
const allParams = {};
params.forEach((value, key) => {
allParams[key] = value;
});
console.log(allParams); // 输出 {id: "123", type: "book", name: "前端教程"}
// 判断参数是否存在
const hasName = params.has('name'); // 返回 true这种方法的优点是代码简洁、可读性强，不需要自己处理字符串分割和转义问题，但是需要注意，URLSearchParams在IE浏览器中完全不支持，如果需要兼容IE，就不要使用这种方法。
方法二：传统字符串分割法
如果需要兼容旧浏览器，比如IE，我们可以使用传统的字符串分割方式来获取URL参数，这种方法兼容性极好，所有浏览器都支持。
// 假设当前URL为 https://ipipp.com/product?id=123&type=book&name=前端教程
function getUrlParams() {
const params = {};
// 获取查询字符串，去掉开头的?
const queryString = window.location.search.substring(1);
if (!queryString) {
return params;
}
// 按&分割多个参数
const paramArr = queryString.split('&');
paramArr.forEach(item => {
// 按=分割参数名和参数值
const [key, value] = item.split('=');
if (key) {
// 对参数值进行解码，处理中文和特殊字符
params[key] = decodeURIComponent(value || '');
}
});
return params;
}
const urlParams = getUrlParams();
console.log(urlParams.id); // 输出 "123"
console.log(urlParams.type); // 输出 "book"这种方法的优点是兼容性极佳，几乎所有浏览器都能运行，缺点是需要自己处理参数解码、空值判断等逻辑，如果查询字符串格式不规范，可能会出现错误。
方法三：正则表达式匹配法
如果只需要获取某一个特定的参数，也可以使用正则表达式来匹配，这种方式写起来比较灵活，适合单独获取某个参数的场景。
// 假设当前URL为 https://ipipp.com/product?id=123&type=book&name=前端教程
function getParamByRegex(name) {
// 构造正则匹配 name=参数值 的模式，参数值不包含&和#
const reg = new RegExp('(^|&)' + name + '=([^&#]*)');
const match = window.location.search.substring(1).match(reg);
if (match) {
// 匹配到的话返回解码后的参数值
return decodeURIComponent(match[2]);
}
return null;
}
const id = getParamByRegex('id');
console.log(id); // 输出 "123"
const name = getParamByRegex('name');
console.log(name); // 输出 "前端教程"这种方法的优点是针对单个参数获取效率很高，不需要遍历所有参数，缺点是正则表达式如果写得不严谨，可能会出现匹配错误的情况，而且如果需要获取多个参数，重复调用会比较低效。
不同方法的选择建议
我们可以根据项目的实际需求来选择合适的参数获取方法：
- 如果项目不需要兼容IE等旧浏览器，优先选择
URLSearchParamsAPI，代码简洁易维护 - 如果需要兼容旧浏览器，选择传统字符串分割法，兼容性最好
- 如果只需要获取某一个特定参数，且参数位置不固定，正则表达式法会更高效
另外需要注意，URL中的参数值如果是中文或者特殊字符，一定要使用decodeURIComponent进行解码，否则可能会出现乱码问题。如果参数值中包含&或者=这类特殊字符，还需要在传递参数的时候使用encodeURIComponent进行编码，避免解析错误。
JavaScriptURL参数URLSearchParams正则表达式window_location修改时间：2026-05-29 23:31:04