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

前端获取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传参数

使用接口获取

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