JavaScript 获取 URL 指定参数的方法

为什么需要专门的方法？

URL 由协议、域名、路径和查询参数组成。直接使用 window.location.href 只能得到完整字符串，手动切割容易出错（例如忽略解码、处理缺失参数或哈希部分）。使用标准库或内置 API 能自动处理 %20 等 URL 编码字符，提高代码健壮性。

推荐方案：使用 URLSearchParams (现代标准)

这是目前最简洁、最推荐的跨平台方法。所有主流浏览器及 Node.js 10+ 均支持。

第1步：创建 URL 对象并解析参数

目的：快速提取特定参数值，无需关心正则复杂逻辑。
入口：任意 JS 执行环境。
动作：利用 new URL() 解析当前地址，通过 .searchParams.get() 获取值。

// 示例 URL: https://example.com/page?MenuCode=admin&lang=zh
const url = new URL(window.location.href);
const menuCode = url.searchParams.get('MenuCode');

console.log(menuCode); // 输出: "admin"

完成状态：变量 menuCode 存储了解码后的参数值；若参数不存在，返回 null。

兼容旧版方案：正则表达式

如果需要支持 IE9 等老旧浏览器，或者在无法实例化 URL 对象的受限环境中，正则匹配是经典做法。原文中的手动切片法较易出错，以下提供封装好的通用函数。

第2步：封装通用正则提取函数

目的：提供一个兼容性强且不易出错的单点工具函数。
动作：编写正则匹配 ? 或 & 后的键值对。

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

// 调用示例
const code = getUrlParam('MenuCode');

注意：必须使用 decodeURIComponent 还原中文等特殊字符，直接截取原始字符串可能导致乱码。

其他场景替代方案

方案 A：手动分割字符串 (轻量级)

如果不引入额外逻辑，可直接基于 location.search 处理。

function getParam(str, key) {
    if (!str || !key) return '';
    // str: ?a=1&b=2&c=3
    const params = new URLSearchParams(str);
    return params.get(key);
}

方案 B：Node.js 服务端环境

在后端接收请求时，推荐使用 querystring 模块或框架自带的解析器。

// Node.js 
const url = require('url');
const queryData = url.parse(req.url, true).query;
console.log(queryData.MenuCode);

关键注意事项与排错

• 哈希干扰：如果 URL 包含哈希（如 #page/），location.search 通常只取哈希前的参数，但 new URL() 更严谨地分离了片段标识符。
• 参数缺失：当 URL 为 https://test.com 无问号时，上述方法应安全返回 null 或空字符串，避免报错。
• 多值处理：若 URL 为 ?tag=a&tag=b，get('tag') 通常只返回第一个值。如需全部值，需使用 getAll('tag') (仅 URLSearchParams 支持)。

以上就是 JavaScript 获取 URL 参数的详细内容，更多关于前端开发与地址栏交互的资料请关注本站其它相关文章！