使用URLSearchParams API可高效解析URL参数，如const params = new URLSearchParams(window.location.search); const name = params.get('name'); 该方法支持get、has、forEach等操作，推荐用于现代浏览器；对于旧浏览器，可通过正则手动解析query string；SPA中参数常位于hash，需从window.location.hash提取并解析；优先使用URLSearchParams以确保代码简洁与标准兼容。
在前端开发中，经常需要从当前页面的URL中提取查询参数（即URL中的?后面的部分），JavaScript本身没有内置直接获取URL参数的方法，但可以通过多种方式实现。下面介绍几种常用且实用的方法来解析和获取URL参数。
使用 URLSearchParams API（推荐）
现代浏览器提供了 URLSearchParams 接口，专门用于处理查询字符串，是目前最简洁、最标准的方式。
示例代码：
const urlParams = new URLSearchParams(window.location.search);const name = urlParams.get('name'); // 获取 name 参数
const age = urlParams.get('age'); // 获取 age 参数
如果当前URL为：https://example.com?name=John&age=25，那么 name 的值就是 John，age 为 25。
立即学习“Java免费学习笔记（深入）”；
常用方法：
- get(key)：获取指定参数的第一个值
- getAll(key)：获取指定参数的所有值（适用于重复参数）
- has(key)：判断是否存在该参数
- append(key, value)：添加一个参数
- forEach((value, key) => {})：遍历所有参数
手动解析 query string（兼容旧浏览器）
如果需要支持不支持 URLSearchParams 的旧版浏览器（如 IE），可以手动解析。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
示例函数：
function getQueryParam(url, key) {const match = RegExp('[?&]' + key + '=([^&]*)').exec(url);
return match ? decodeURIComponent(match[1]) : null;
}
// 使用
const params = getQueryParam(window.location.href, 'id');
这个方法通过正则表达式匹配参数，然后使用 decodeURIComponent 解码特殊字符。
封装一个通用的参数解析函数
为了更方便地获取所有参数，可以封装一个返回对象的函数：
function parseQueryParams(query) {const params = {};
if (!query) return params;
query.replace(/[^?&]+=?([^&]*)&?/g, (match, value) => {
if (value) {
const [key, val] = decodeURIComponent(value).split('=');
params[key] = val;
}
});
return params;
}
或者更准确的版本：
function getParamsFromUrl(url) {const search = new URL(url).search;
const params = {};
new URLSearchParams(search).forEach((val, key) => {
params[key] = val;
});
return params;
}
处理 hash 中的参数（如单页应用）
在SPA中，参数可能出现在 hash 里，例如：#/page?id=100。此时需从 window.location.hash 提取：
const queryString = hash.split('?')[1];
if (queryString) {
const params = new URLSearchParams(queryString);
console.log(params.get('id'));
}
基本上就这些。优先使用 URLSearchParams，它简洁、安全、标准。对于兼容性要求高的项目，再考虑手动解析方式。掌握这些方法后，无论是在表单提交、页面跳转还是埋点统计中，都能轻松获取URL参数。
