方法一:

在 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. Docker | redis集群部署实战

    前面已经简单熟悉过redis的下载安装使用,今天接着部署redis集群(cluster),简单体会一下redis集群的高可用特性. 环境准备 Redis是C语言开发,安装Redis需要先将Redis的 ...

  2. <四>1:全面掌握Const的用法

    const怎么理解? const修饰的变量不能够在作为左值!!初始化完成后,值不能被修改!! C 和C++中const 的区别? 在C程序中 test.c const int a; 只定义,不做初始化 ...

  3. 三、Kubernetes调度

    一.Kubernetes调度 Scheduler 是 kubernetes 的调度器,主要的任务是把定义的 pod 分配到集群的节点上.听起来非常简单,但有很多要考虑的问题: 公平:如何保证每个节点都 ...

  4. Golang占位符

    有哪些占位符? 常见占位符 %T 类型占位符 %v 值占位符 %d 整数占位符 %f 浮点占位符 %c 字符占位符 %s 字符串的占位符 占位符类型 通用占位符 占位符 说明 举例 %v 获取数据的值 ...

  5. 从ObjectPool到CAS指令

    相信最近看过我的文章的朋友对于Microsoft.Extensions.ObjectPool不陌生:复用.池化是在很多高性能场景的优化技巧,它能减少内存占用率.降低GC频率.提升系统TPS和降低请求时 ...

  6. Git配置和使用?Git你真的会用么?Git与SVN的主要区别

    1.Git环境配置    在学习Git之前,首先要知道什么是版本控制 1.1 版本控制:版本迭代.新的版本!版本管理器 版本控制是开发过程中用于管理我们的文件.目录或工程内容的修改内容,查看修改历史记 ...

  7. Java计算文件或文件夹大小

    导入此类后,直接调用FilesUtil.returnSizi(String path),即可获取文件或者文件夹大小. 代码: 1 /** 2 * 路人甲操作文件的工具类 3 * returnSizi( ...

  8. Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构

    在前一篇文章中分享了搭建组件库的基本开发环境.创建了 foo 组件模块和组件库入口模块,本文分享组件库的样式架构设计. 1 常见的 CSS 架构模式 常见的 CSS 架构模式有很多:OOCSS.ACS ...

  9. Pthread 并发编程(二)——自底向上深入理解线程

    Pthread 并发编程(二)--自底向上深入理解线程 前言 在本篇文章当中主要给大家介绍线程最基本的组成元素,以及在 pthread 当中给我们提供的一些线程的基本机制,因为很多语言的线程机制就是建 ...

  10. 有趣的 Go HttpClient 超时机制

    hello,大家好呀,我是既写 Java 又写 Go 的小楼,在写 Go 的过程中经常对比这两种语言的特性,踩了不少坑,也发现了不少有意思的地方,今天就来聊聊 Go 自带的 HttpClient 的超 ...