目录

获取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

流程解析

  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方案

实现代码

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"

流程解析

  1. 创建URLSearchParams实例

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

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

备注:

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

以及参数不重复的情况下

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

使用接口获取

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
今晚吃什么呢?6 分钟前
前端面试题之CSS中的box属性
前端·css
我是大龄程序员8 分钟前
Babel工作理解
前端
CopyLower22 分钟前
提升 Web 性能:使用响应式图片优化体验
前端
南通DXZ23 分钟前
Win7下安装高版本node.js 16.3.0 以及webpack插件的构建
前端·webpack·node.js
Mintopia1 小时前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
前端太佬1 小时前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js
Mintopia1 小时前
Node.js 中 http.createServer API 详解
前端·javascript·node.js
xRainco1 小时前
Redux从简单到进阶(Redux、React-redux、Redux-toolkit)
前端
印第安老斑鸠啊1 小时前
由一次CI流水线失败引发的对各类构建工具的思考
前端
CodePencil1 小时前
CSS专题之外边距重叠
前端·css