前端获取URL参数并转换为对象的两种方法
本文介绍两种将URL查询参数(location.search)转换为JavaScript对象的常用方法,通过示例代码演示实现过程,并对比分析它们的优缺点。
示例URL
以以下URL为例:
http://localhost:8080/?name=John&age=30&token=abc123&query=a%20b
目标:获取查询参数并转换为对象
预期结果:
javascript
{
name: "John",
age: "30",
token: "abc123",
query: "a b" // 注意URL解码后的空格
}
方法一:传统字符串处理
实现代码
javascript
// 方法一:字符串分割方案
const search = window.location.search; // 获取"?name=John&age=30..."
const delInitial = search.substring(1); // 去除问号 → "name=John&age=30..."
const group = delInitial.split("&"); // 拆分为数组 → ["name=John", "age=30..."]
const targetObject = group.reduce((obj, item) => {
const [key, value] = item.split("="); // 分割键值对
obj[key] = decodeURIComponent(value); // URL解码处理
return obj;
}, {});
console.log(targetObject.token); // 输出:abc123
流程解析
-
获取原始参数
window.location.search
→"?name=John&age=30&token=abc123&query=a%20b"
-
去除问号
substring(1)
→"name=John&age=30&token=abc123&query=a%20b"
-
拆分键值对
split("&")
→["name=John", "age=30", "token=abc123", "query=a%20b"]
-
构建对象
通过
reduce
遍历数组,将每个键值对存入对象
方法二:现代API方案
实现代码
javascript
// 方法二:现代API方案
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
console.log("🚀 params.token:", params.token); // 输出:abc123
console.log(params.query); // 自动解码 → "a b"
流程解析
-
创建URLSearchParams实例
自动解析查询字符串:
new URLSearchParams('?name=John...')
-
转换为普通对象
Object.fromEntries(urlSearchParams.entries())
→ 键值对对象
备注:
两种方法 仅适用于简单的获取参数
以及参数不重复的情况下
实际开发中复杂获取可通过router或不使用url传参数
使用接口获取
知识不用记太多 有印象 忘记以后再来查就好