方法一:

在 JavaScript 中,可以使用 URLSearchParams 对象来处理 URL 中的查询字符串。

序列化(将 JavaScript 对象转换为查询字符串)可以使用 URLSearchParams 对象的 append() 方法,如下所示:

let params = new URLSearchParams();
params.append('name', 'John');
params.append('age', '30');
let queryString = params.toString();
console.log(queryString);

反序列化(将查询字符串转换为 JavaScript 对象)可以使用 URLSearchParams 的构造函数,如下所示:

let queryString = "name=John&age=30";
let params = new URLSearchParams(queryString);
console.log(params.get('name')); // "John"
console.log(params.get('age')); // "30"

对于反序列化的操作可以使用URL的search属性,来解析query string

let url = new URL('https://example.com?name=John&age=30');
let params = new URLSearchParams(url.search);
console.log(params.get('name')); // "John"
console.log(params.get('age')); // "30"

需要注意的是,URLSearchParams 对象只能用于处理查询字符串,而不能用于创建或解析整个 URL。

如果需要更高级的处理方式,可以使用其它库或第三方函数库,比如 qs, querystring 等库来处理。

对于反序列化的操作中的URLSearchParams的使用还有一些方法,比如:

  • has(name): 返回一个 Boolean 值,表示是否存在名称为 name 的查询参数。
  • get(name): 返回名称为 name 的查询参数的值,如果不存在,则返回 null。
  • getAll(name): 返回所有名称为 name 的查询参数的值组成的数组,如果不存在,则返回空数组。
  • set(name, value): 设置名称为 name 的查询参数的值为 value。如果已经存在同名参数,将会覆盖原来的值。
  • append(name, value): 添加名称为 name 的查询参数,并设置其值为 value。如果已经存在同名参数,会添加一个新的参数。
  • delete(name): 删除名称为 name 的查询参数。
  • entries(): 返回一个迭代器,遍历所有查询参数的键值对。
  • keys(): 返回一个迭代器,遍历所有查询参数的名称。
  • values(): 返回一个迭代器,遍历所有查询参数的值。

这些方法都能给出更灵活的操作,请根据具体需求来选择使用

方法二:

当然,如果需要手动处理查询字符串,也可以使用 JavaScript 的标准字符串处理函数来实现。

序列化,可以使用下面的代码把一个对象转换为查询字符串:

function objectToQueryString(obj) {
return Object.entries(obj).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&');
}
console.log(objectToQueryString({name: 'John', age: '30'}))

反序列化,可以使用下面的代码把查询字符串转换为一个对象:

function queryStringToObject(queryString) {
let obj = {};
let arr = queryString.split("&");
for(let i = 0; i < arr.length; i++){
let temp = arr[i].split("=");
obj[temp[0]] = temp[1];
}
return obj;
}
console.log(queryStringToObject('name=John&age=30'))

需要注意的是,上述代码使用了 encodeURIComponentdecodeURIComponent 来编码和解码查询字符串中的字符,以防止出现无效或不安全的字符。

这些方法都能达到相同的目的,你可以根据项目中使用的JavaScript环境和需要的复杂度来进行选择

JavaScript 中URL 查询字符串(query string)的序列与反序列化的更多相关文章

  1. 【本周面试题】第1周 - 获取URL中的查询字符串参数、get和post的区别

    [此系列优先解决自己经历的面试题] 2018.11.16 面试题一:你如何获取浏览器URL中查询字符串中的参数? 题目代码: 测试地址为 https://www.sogou.com/tx?query= ...

  2. C# 获取url中的查询字符串参数

    /// <summary> /// 获取url中的查询字符串参数 /// </summary> public static NameValueCollection Extrac ...

  3. 【Win 10 应用开发】分析 URI 中的查询字符串

    分析URI中的字符有K种方法(K >= 2),如果查询字符串中的参数比较简单,可以通过子字符串查找的方式来处理:如果查询字符串相对复杂,你可以使用正则表达式来匹配 key1=value1 ,  ...

  4. querystring 解析url 查询字符串

    对前端同学来说,经常要碰到一种比较麻烦的情况,那就是url查询字符串的解析问题.说起来也不难,就是比较麻烦. 具体来处理这种情况的时候,相信有一部分同学就是针对具体项目中的需要的字符去正则匹配一下,业 ...

  5. JavaScript中常见的字符串操作函数及用法

    JavaScript中常见的字符串操作函数及用法 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信 ...

  6. JS如何获取url查询字符串的键和值?

    /** * 根据url查询字符串里的键名获取其值 */function getSearchString(key, search) { // 获取URL中?之后的字符 var str = search; ...

  7. php的URL查询字符串解析函数

    URL查询字符串格式:Data[650][BLN]=40002307312&Data[650][Status]=電聯無人接聽. 解析这种数据使用函数:parse_str(). parse_st ...

  8. JavaScript中,提取子字符串方法:Slice、Substring、Substr的比较。

    在JavaScript中,提取子字符串主要是通过 Slice.Substring.Substr 三个方法之一. // slice // 语法: string.slice(beginSlice [, e ...

  9. Java与JavaScript中判断两字符串是否相等的区别

    JavaScript是一种常用的脚本语言,这也决定了其相对于其他编程语言显得并不是很规范.在JavaScript中判断两字符串是否相等 直接用==,这与C++里的String类一样.而Java里的等号 ...

  10. 黑马旅游网 解析url查询字符串

    function getUrlParam(name) { let reg = new RegExp("(^|&)" + name + "=([^&]*)( ...

随机推荐

  1. Python凯撒密码加解密

    #凯撒密码第一个版本 #加密 pxpt=input("请输入明文文本:") for p in pxpt: if 'a'<=p<='z': print(chr(ord(' ...

  2. RE语法

    RE,英文为Regular Expression,中文译作正则表达式.用于文本过滤的工具.RE语法由一些元字符.其它任意字符串作为基本单元,匹配次数.分组匹配.锚定符等为操作单元组成.进行逐行扫描,满 ...

  3. 基于tauri+vue3.x多开窗口|Tauri创建多窗体实践

    最近一种在捣鼓 Tauri 集成 Vue3 技术开发桌面端应用实践,tauri 实现创建多窗口,窗口之间通讯功能. 开始正文之前,先来了解下 tauri 结合 vue3.js 快速创建项目. taur ...

  4. 日志处理logging

    前言 什么是日志?有什么作用?日志是跟踪软件运行时所发生的事件的一种方法,简单来说它可以记录某时某刻运行了什么代码,当出现问题时可以方便我们进行定位. 由python内置了一个logging模块,用户 ...

  5. python实现鼠标手动截图(类似于QQ截图)

    由于在网上找了很久,只找到按像素位置截图和全屏截图的,所以决定自己写一个. 本程序实现原理是现用PIL里的ImageGrab进行全屏截图,然后通过模拟鼠标操作,进行截图,最后删除全屏截图,只留下鼠标截 ...

  6. 1.Django-Rest-Framework入门规范

    一.WEB应用模式   1.前后端不分离 前后端混合开发(前后端不分离),返回的是html的内容,需要渲染页面,写模版 2.前后端分离 专注于后端接口,返回json.xml格式的数据     二.AP ...

  7. LabVantage仪器数据采集方案

    LabVantage的仪器数据采集组件为LIMS CI,是一个独立的应用程序/服务,实现仪器数据的采集(GC.LC等带有工作站的仪器). 将仪器输出数据转换为LIMS所需数据并传输,使用Talend这 ...

  8. c++ 关于引用变量你不知道的东西

    引用变量延迟绑定 我们知道引用变量定义时要立刻赋值,告诉编译器他是谁的引用.如果不赋值,编译会失败. 如果引用变量是单个定义的,对他赋值还比较简单. struct test_T { int data; ...

  9. 图机器学习(GML)&图神经网络(GNN)原理和代码实现(前置学习系列二)

    项目链接:https://aistudio.baidu.com/aistudio/projectdetail/4990947?contributionType=1 欢迎fork欢迎三连!文章篇幅有限, ...

  10. Installing ClickHouse-22.10.2.11 on openEuler

    一.Installing ClickHouse-22.10.2.11 on openEuler 1 地址 https://clickhouse.com https://packages.clickho ...