JS获取地址栏参数的4种常用方法

在前端开发中，经常需要从URL地址栏中获取参数值。本文将详细介绍JavaScript获取地址栏参数的4种实用方法，帮助开发者高效处理URL参数。

方法一：使用URLSearchParams API（推荐）

// 获取当前URL参数
const urlParams = new URLSearchParams(window.location.search);

// 获取特定参数值
const id = urlParams.get('id');
const name = urlParams.get('name');

这是现代浏览器支持的最新API，代码简洁且功能强大，支持IE10+浏览器。

方法二：传统字符串分割法

function getQueryParam(name) {
  const query = window.location.search.substring(1);
  const vars = query.split('&');
  
  for (let i = 0; i < vars.length; i++) {
    const pair = vars[i].split('=');
    if (pair[0] === name) {
      return decodeURIComponent(pair[1]);
    }
  }
  return null;
}

兼容性好，适用于所有浏览器，但代码相对复杂。

方法三：使用正则表达式匹配

function getParam(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
  const r = window.location.search.substr(1).match(reg);
  
  if (r != null) return decodeURIComponent(r[2]);
  return null;
}

代码简洁高效，适合对正则表达式熟悉的开发者。

方法四：使用第三方库（如qs）

// 安装：npm install qs
import qs from 'qs';

const params = qs.parse(window.location.search, {
  ignoreQueryPrefix: true
});

console.log(params.id);

适合复杂参数处理场景，功能全面但需要引入额外库。

最佳实践建议

• 现代项目优先使用URLSearchParams API
• 需要考虑IE兼容性时选择字符串分割法
• 参数较多且复杂时考虑使用qs等库
• 注意对参数值进行decodeURIComponent解码

掌握这些方法后，开发者可以轻松应对各种URL参数处理需求，提升前端开发效率。