优先使用URLSearchParams解析参数，现代浏览器支持良好；若需兼容旧浏览器，则采用手动解析或自定义函数获取单个及所有参数。
在前端开发中，经常需要从当前页面的 URL 中提取查询参数，比如 ?id=123&name=john。JavaScript 本身没有内置方法直接解析 URL 参数，但我们可以通过简单的脚本来实现这一功能。
使用 URLSearchParams 解析参数（现代浏览器推荐）
现代浏览器提供了 URLSearchParams 接口，可以方便地解析 URL 查询字符串。
示例代码：
// 获取当前 URL 的查询参数
const urlParams = new URLSearchParams(window.location.search);
// 获取某个参数值
const id = urlParams.get('id'); // 返回 '123' 如果存在 ?id=123
const name = urlParams.get('name'); // 返回 'john'
// 判断是否存在某个参数
if (urlParams.has('id')) {
console.log('ID 存在:', id);
}
这个方法简洁高效，适用于大多数现代浏览器（Chrome、Firefox、Edge、Safari 等）。
手动解析 query string（兼容旧浏览器）
如果需要支持 IE 等不支持 URLSearchParams 的老浏览器，可以使用正则或字符串分割的方式手动解析。
自定义解析函数示例：
function getUrlParam(name) {
const regex = new RegExp('[?&]' + encodeURIComponent(name).replace(/[\-\.\+\*]/g, '\\$&') + '=([^&#]*)');
const match = window.location.href.match(regex);
return match ? decodeURIComponent(match[1]) : null;
}
// 使用示例
const id = getUrlParam('id');
const name = getUrlParam('name');
console.log(id, name);
该方法通过正则匹配参数名，并解码其值，兼容性好，适合老旧项目。
将所有参数解析为对象
有时我们需要一次性获取所有参数并以对象形式使用，可以这样处理：
转换为对象的函数：
function getAllUrlParams() {
const params = {};
const queryString = window.location.search.substring(1); // 去掉 '?'
const pairs = queryString.split('&');
for (let pair of pairs) {
if (pair) {
const [key, value] = pair.split('=');
params[decodeURIComponent(key)] = value ? decodeURIComponent(value) : '';
}
}
return params;
}
// 使用
const queryParams = getAllUrlParams();
console.log(queryParams.id); // 输出 id 值
console.log(queryParams.name); // 输出 name 值
这种方式适合需要批量处理参数的场景，结构清晰，易于维护。
基本上就这些。根据项目需求选择合适的方法：优先使用 URLSearchParams，若需兼容旧环境则采用手动解析方式。不复杂但容易忽略编码和边界情况，注意处理空值和特殊字符。
