qs库使用指南
时间:2019-12-11
本文章向大家介绍qs库使用指南,主要包括qs库使用指南使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串,或者反过来将一个查询字符串解析成一个object,而且支持复杂的嵌套。它上手很容易:
Qs.parse('x[]=1') // {x: ['1']}
Qs.stringify({x: [1]}) // x%5B0%5D=1
qs的两个方法都接受一个可选的第二参数,可以让我们对结果进行配置,个人觉得比较有用的有以下几个:
ignoreQueryPrefix和addQueryPrefix
ignoreQueryPrefix这个参数可以自动帮我们过滤掉location.search前面的❓,然后再解析,addQueryPrefix
设为true可以在序列化的时候给我们加上?
// 解析
Qs.parse('?x=1') // {?x: "1"}
Qs.parse('?x=1', {ignoreQueryPrefix: true}) // {x: "1"}
// 序列化
Qs.stringify({x: "1"}) // x=1
Qs.parse({x: "1"}, {addQueryPrefix: true}) // ?x=1
数组解析和序列化
数组序列化有几种方式:indices
, brackets
, repeat
, comma
,用来控制字符串的生成格式。来看下面的例子:
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 'a=b,c'
上面的四种方式,序列化得到的结果越来越精简,但是当面对嵌套数组时,却会导致不同程度的信息丢失,而且丢失的越来越严重。以四种方式对{ a: [['b'], 'c'] }
stringify 再 parse为例:
qs.parse(qs.stringify({ a: [['b'], 'c'] }, { arrayFormat: 'indices' })) // { a: [['b'], 'c'] }
qs.parse(qs.stringify({ a: [['b'], 'c'] }, { arrayFormat: 'brackets' })) // {a: ["b", "c"]}
qs.parse(qs.stringify({ a: [['b'], 'c'] }, { arrayFormat: 'repeat' })) // {a: ["b", "c"]}
qs.parse(qs.stringify({ a: [['b'], 'c'] }, { arrayFormat: 'comma' })) // {a: "b,c"}
所以当数据里有嵌套时最好使用indices
模式,好在这也是默认模式。
delimiter
delimiter可以控制将哪种字符作为分隔符,由于cookie的格式是使用;
来分隔,一个有用的例子是用来解析cookie:
document.cookie // "_ga=GA1.2.806176131.1570244607; _jsuid=1335121594; _gid=GA1.2.1453554609.1575990858"
Qs.parse(document.cookie, {delimiter:'; '})
数字类型的解析
正如我们在第一个例子看到的那样,我们把一个数字序列化再还原,得到的并不是一个数字,而是一个字符串:
Qs.parse(Qs.stringify({x:1})) // {x: '1'}
如果希望解析出来依旧是数字,可以参考这个issue,就是写一个自定义decoder:
Qs.parse('x[0]=1', {
decoder(str, defaultEncoder, charset, type) {
if (/^(\d+|\d*\.\d+)$/.test(str)) {
return parseFloat(str)
}
return str
}
})
本文完
原文地址:https://www.cnblogs.com/imgss/p/12020058.html
- Ajax请求过程中显示“进度”的简单实现
- ASP.NET MVC基于标注特性的Model验证:ValidationAttribute
- 【深度学习系列】卷积神经网络详解(二)——自己手写一个卷积神经网络
- 区块链钱包mMoney向GooglePay、Applepay发起挑战
- Model验证系统运行机制是如何实现的?
- CentOS 6.8 部署zookeeper集群
- ASP.NET MVC基于标注特性的Model验证:DataAnnotationsModelValidator
- 使用容器进行应用程序路由
- MVVM(Knockout.js)的新尝试:多个Page,一个ViewModel
- ASP.NET MVC以ModelValidator为核心的Model验证体系: ModelValidatorProviders
- 我所理解的RESTful Web API [设计篇]
- 黑箱难题阻碍了深度学习的普及与发展
- iOS 转场动画探究(一)
- XCode中如何使用事务
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- seqtk抽取reads
- Version of Delve is too old for this version of Go【Goland Debug】报错
- python之turtle模块-黄金螺线
- python之turtle模块-生化危机
- Python之turtle模块-饼状图
- python之turtle模块-弧线
- Python之turtle模块-画圈圈
- Python之turtle模块-正多边形
- synchronized 锁的原理
- Centos: 添加一个IP地址
- 能动手绝不多说:开源评论系统remark42上手指南
- R语言入门之因子及常用函数
- R语言入门之R包的安装
- R语言入门系列之寻找你的R包
- R语言入门之折线图