17370845950

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