优先使用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，若需兼容旧环境则采用手动解析方式。不复杂但容易忽略编码和边界情况，注意处理空值和特殊字符。