获取URL参数并转换为对象的两种方法

前端获取URL参数并转换为对象的两种方法

本文介绍两种将URL查询参数（location.search）转换为JavaScript对象的常用方法，通过示例代码演示实现过程，并对比分析它们的优缺点。

---

示例URL

以以下URL为例：
http://localhost:8080/?name=John&age=30&token=abc123&query=a%20b

目标：获取查询参数并转换为对象

预期结果：

{
  name: "John",
  age: "30",
  token: "abc123",
  query: "a b" // 注意URL解码后的空格
}

---

方法一：传统字符串处理

实现代码

// 方法一：字符串分割方案
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

流程解析

1. 获取原始参数
   window.location.search → "?name=John&age=30&token=abc123&query=a%20b"

2. 去除问号
   substring(1) → "name=John&age=30&token=abc123&query=a%20b"

3. 拆分键值对
   split("&") → ["name=John", "age=30", "token=abc123", "query=a%20b"]

4. 构建对象

   通过reduce遍历数组，将每个键值对存入对象

---

方法二：现代API方案

实现代码

// 方法二：现代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"

流程解析

1. 创建URLSearchParams实例

   自动解析查询字符串：new URLSearchParams('?name=John...')

2. 转换为普通对象
   Object.fromEntries(urlSearchParams.entries()) → 键值对对象

备注：

两种方法 仅适用于简单的获取参数

以及参数不重复的情况下

实际开发中复杂获取可通过router或不使用url传参数

使用接口获取

知识不用记太多 有印象 忘记以后再来查就好