js怎么获取?后面的参数
最新回答
唯i柠檬
2023-07-08 10:17:13
在 JavaScript 中，获取 URL 中 ? 后面的查询参数（即查询字符串）可以通过以下两种常用方法实现：
方法 1：使用 window.location.searchwindow.location.search 返回当前 URL 的查询字符串部分（包括 ?）。步骤：
- 获取完整的查询字符串（如 "?name=John&age=30"）。
- 通过字符串操作（如 substring、split）提取参数值。
示例代码：
// 假设当前 URL 为 "https://example.com?name=John&age=30"const
queryString = window.location.search; // "?name=John&age=30"// 提取单个参数（如 "name"）function getQueryParam(param) { const params = new URLSearchParams(queryString); return params.get(param);}// 或者手动解析（不推荐，复杂场景易出错）const nameParam = queryString.split("name=")[1]?.split("&")[0];console.log(nameParam); // "John"缺点：手动解析字符串容易出错，尤其是处理多个参数或编码字符时。
方法 2：使用 URLSearchParams 对象（推荐）URLSearchParams 是现代浏览器提供的专用 API，支持直接获取、设置、删除参数，无需手动解析字符串。
步骤：
- 通过 new URLSearchParams(window.location.search) 实例化对象。
- 使用 .get("参数名") 获取单个值，或 .getAll("参数名") 获取同名多值。
示例代码：
// 假设当前 URL 为 "https://example.com?name=John&age=30&hobby=sports&hobby=music"const
params = new URLSearchParams(window.location.search);// 获取单个参数const name = params.get("name"); // "John"const age = params.get("age"); // "30"// 获取同名多参数const hobbies = params.getAll("hobby"); // ["sports", "music"]// 操作参数（增删改）params.set("newParam", "value"); // 添加/修改参数params.delete("age"); // 删除参数console.log(params.toString()); // 输出修改后的查询字符串（不含?）优点：
- 自动处理 URL 编码（如 %20 转空格）。
- 支持同名多参数（如 ?hobby=sports&hobby=music）。
- 提供完整的增删改查方法。
- 兼容性：URLSearchParams 支持所有现代浏览器，但在 IE 中需 polyfill。
- 动态 URL：若 URL 变化（如单页应用），需重新解析 window.location.search。
- 安全性：始终对参数值进行校验，避免 XSS 攻击（如 innerHTML 直接插入未过滤的值）。
- 推荐方法：优先使用 URLSearchParams，代码简洁且功能强大。
- 备选方案：手动解析 window.location.search（仅适用于简单场景）。
- 扩展操作：如需修改参数，可通过 URLSearchParams 结合 window.history.pushState 更新 URL。
热门标签
