在 Web 开发中我们经常需要从 URL 的查询字符串?key1value1key2value2中提取参数并将其转换为 JavaScript 对象以便于使用。本文将介绍如何使用window.location.search获取当前页面的查询字符串并解析成{ key: value }格式的对象。1. 获取 URL 查询字符串浏览器提供了window.location.search属性它返回当前 URL 的查询部分包括?。例如// 假设当前 URL 是 // https://example.com/?noticeType001014channele0172398-23dd-47be-a092-14c67a92bd4f const queryString window.location.search; console.log(queryString); // 输出: ?noticeType001014channele0172398-23dd-47be-a092-14c67a92bd4f如果 URL 没有查询参数window.location.search返回空字符串。2. 解析查询字符串为对象我们可以编写一个函数parseQueryString()将?key1value1key2value2解析成{ key1: value1, key2: value2 }格式的对象。方法 1手动解析兼容性好function parseQueryString(query) { const params {}; const pairs query.substring(1).split(); // 1. 去掉 ? 并按 分割 for (const pair of pairs) { if (pair) { // 避免空字符串如 URL 末尾的 const [key, value] pair.split(); // 2. 分割键值对 params[key] value; // 3. 存入对象 } } return params; } // 示例用法 const queryString ?noticeType001014channele0172398-23dd-47be-a092-14c67a92bd4f; const parsedParams parseQueryString(queryString); console.log(parsedParams); // 输出: { noticeType: 001014, channel: e0172398-23dd-47be-a092-14c67a92bd4f }代码解析query.substring(1)去掉开头的?只保留key1value1key2value2部分。split()按分割成数组[key1value1, key2value2]。split()遍历数组按分割每个键值对。params[key] value将键值对存入对象。方法 2使用URLSearchParams现代浏览器推荐如果目标环境支持现代 JavaScript如 Chrome、Firefox、Edge、Node.js 10可以使用URLSearchParams更简洁地解析查询字符串function parseQueryString(query) { const params {}; const urlParams new URLSearchParams(query); // 1. 创建 URLSearchParams 对象 urlParams.forEach((value, key) { params[key] value; // 2. 遍历并存入对象 }); return params; } // 示例用法 const queryString ?noticeType001014channele0172398-23dd-47be-a092-14c67a92bd4f; const parsedParams parseQueryString(queryString); console.log(parsedParams); // 输出: { noticeType: 001014, channel: e0172398-23dd-47be-a092-14c67a92bd4f }3. 完整示例结合window.location.search// 方法 1手动解析 function parseQueryString(query) { const params {}; const pairs query.substring(1).split(); for (const pair of pairs) { if (pair) { const [key, value] pair.split(); params[key] value; } } return params; } // 方法 2使用 URLSearchParams推荐 function parseQueryStringModern(query) { const params {}; const urlParams new URLSearchParams(query); urlParams.forEach((value, key) { params[key] value; }); return params; } // 获取当前 URL 的查询字符串 const currentQueryString window.location.search; // 解析查询字符串 const paramsManual parseQueryString(currentQueryString); const paramsModern parseQueryStringModern(currentQueryString); console.log(手动解析:, paramsManual); console.log(URLSearchParams 解析:, paramsModern);4. 总结方法适用场景优点缺点手动解析所有浏览器兼容性好代码稍长URLSearchParams现代浏览器简洁、支持重复参数旧浏览器不支持推荐如果目标环境支持现代 JavaScript优先使用URLSearchParams。如果需要兼容旧浏览器如 IE使用手动解析方法。