推荐使用URLSearchParams解析URL参数为对象，它自动处理编码解码且语义清晰；兼容旧环境时可用正则手动解析，需注意try/catch异常、重复键、空值及#片段截断等细节。
JavaScript中提取URL参数并转为对象，核心是解析查询字符串（query string），用URLSearchParams最简洁可靠，兼容性也足够（现代浏览器及Node.js 10+均支持）；若需兼容老环境，可用正则手动解析，但要注意编码、重复键、空值等边界情况。
推荐方案：使用 URLSearchParams（现代标准）
这是官方推荐、语义清晰、自动处理编码/解码的方案：
- 直接传入完整URL或纯查询字符串（如
"?name=张三&age=25&hobby=reading"） - 遍历
entries()或转为Object.fromEntries() - 自动解码值（如
%E5%BC%A0%E4%B8%89→"张三"）
示例代码：
function getUrlParams(url) {
const u = new URL(url);
return Object.fromEntries(u.searchParams.entries());
}
// getUrlParams("https://example.com/?name=%E5%BC%A0%E4%B8%89&age=25")
// → { name: "张三", age: "25" }
正则手动解析（兼容IE等旧环境）
当必须支持不支持 URLSearchParams 的环境时，可用正则提取键值对。关键点：
立即学习“Java免费学习笔记（深入）”；
- 匹配形如
key=value或key（无值）的片段，用/([^?&=]+)=?([^&]*)/g - 对 key 和 value 分别
decodeURIComponent，捕获失败时留空字符串 - 重复参数名默认覆盖（如需数组形式，需额外判断）
基础实现：
function parseQuery(query) {
if (!query) return {};
const result = {};
query.replace(/([^?&=]+)=?([^&]*)/g, (_, key, val) => {
try {
const k = decodeURIComponent(key);
const v = decodeURIComponent(val);
result[k] = v;
} catch (e) {
// 忽略非法编码
}
});
return result;
}
// parseQuery("?name=%E5%BC%A0%E4%B8%89&city=Beijing")
// → { name: "张三", city: "Beijing" }
处理多值与特殊场景
实际URL中常见数组参数（如 ?tag=a&tag=b）或布尔参数（如 ?debug），可扩展逻辑：
- 对同一 key 多次出现，存为数组：检查
result[key]是否已存在，存在则转为数组并追加 - 无等号的参数（如
?debug）视为true，也可统一设为空字符串或显式布尔 - 空值参数（如
?id=）解码后是空字符串，按需转为null或保留
增强版片段示意：
function parseQueryAdvanced(query) {
const result = {};
query.replace(/([^?&=]+)=?([^&]*)/g, (_, key, val) => {
const k = decodeURIComponent(key);
const v = val ? decodeURIComponent(val) : '';
if (result.hasOwnProperty(k)) {
if (!Array.isArray(result[k])) result[k] = [result[k]];
result[k].push(v);
} else {
result[k] = v;
}
});
return result;
}
注意事项与避坑
无论用哪种方式，都需注意：
-
不要直接对整个URL字符串正则匹配，先用
url.split('?')[1]或new URL().search提取 query 部分 -
避免未捕获异常的
decodeURIComponent，非法编码会抛错，应包裹try/catch -
正则中的
?和&要正确转义或放在字符组中，否则易误匹配 - 服务端生成的URL可能含
#片段，它不属于 query，需提前截断
不复杂但容易忽略。
