vue开发|qs是什么?

介绍

qs是一个JavaScript库,主要用于查询字符串的解析和序列化。它提供了一些附加安全性的特性,是处理URL查询字符串(如将对象序列化为查询字符串或将查询字符串解析为对象)的理想工具。

主要功能和特点

1.qs.parse():

  • 功能:将URL的查询字符串解析成JavaScript对象的形式。
  • 示例:给定查询字符串method=query_sql_dataset_data&projectId=12&appToken=7d22e38e-5717-11e7-907b,使用qs.parse()可以将其解析为对象{ method: 'query_sql_dataset_data', projectId: '12', appToken: '7d22e38e-5717-11e7-907b' }

2.qs.stringify():

  • 功能:将JavaScript对象序列化成URL的查询字符串形式,多个键值对之间用&进行拼接。
  • 示例:给定对象{ name: 'nihao', age: 100 },使用qs.stringify()可以将其序列化为查询字符串name=nihao&age=100

使用场景

在项目中使用qs之前,需要先通过npm或yarn等包管理工具将其安装到项目中,安装命令如下:

npm install qs
# 或者
yarn add qs
  • 在Vue项目中:常用于处理axios等HTTP客户端发送请求时的参数序列化问题,特别是在进行POST请求时,如果后端期望接收application/x-www-form-urlencoded格式的数据,而axios默认发送的是application/json格式的数据,这时就可以使用qs来将对象序列化为查询字符串,从而满足后端的需求。

  • 全局引入:在Vue项目中,可以通过在main.jsmain.ts中全局引入qs,并通过Vue.prototype.$qs = qs的方式,使得在Vue的任意组件中都可以通过this.$qs来访问qs对象,从而方便地在项目中使用qs的功能。

qs.stringify()和 JSON.stringify()区别

1. 编码格式

  • qs.stringify() :将对象转换成URL查询字符串(query string)的格式。这意呀着它会把对象的键和值编码成"键=值"的形式,并使用&符号连接多个键值对。例如,{a: 1, b: 'foo'} 会被转换成 "a=1&b=foo"。这种格式特别适用于URL的查询参数。

  • JSON.stringify() :将对象转换成JSON字符串。它严格按照JSON格式进行编码,包括对象的键用双引号括起来,数组和对象被相应地嵌套表示。例如,{a: 1, b: 'foo'} 会被转换成 "{\"a\":1,\"b\":\"foo\"}"(注意,这里的输出是为了清晰而展示的,实际在JavaScript中不会有转义的双引号)。但在大多数情况下,你看到的是不带转义的双引号的版本:{"a":1,"b":"foo"}

2. 使用的上下文

  • qs.stringify() :主要用于需要发送查询参数给服务器的场景,如通过URL发送GET请求的参数,或者通过POST请求的application/x-www-form-urlencoded内容类型发送数据。

  • JSON.stringify() :用于在客户端和服务器之间传输数据,特别是在使用AJAX或Fetch API进行通信时,通过Content-Type: application/json头部发送JSON格式的数据。它也常用于将JavaScript对象保存到本地存储(如localStorage)中,或者将数据转换为字符串以便于调试。

3. 处理数组和特殊字符

  • qs.stringify() :能够处理数组和特殊字符,将它们编码为适合URL的格式。例如,数组{a: [1, 2, 3]} 可能被编码为 "a[]=1&a[]=2&a[]=3"(具体取决于qs的配置),而特殊字符(如空格)会被编码为%20

  • JSON.stringify() :将数组直接转换为JSON数组表示,特殊字符会被转义为Unicode转义序列(如空格被转义为\u0020),但在大多数现代浏览器中查看时,这些转义字符会被渲染为相应的字符。

4. 兼容性

  • qs.stringify():是一个第三方库,需要额外安装。但它在处理URL查询字符串方面非常灵活和强大。

  • JSON.stringify():是JavaScript的一个内置方法,自ECMAScript 5起就存在于所有现代浏览器中,因此具有极高的兼容性。

qs.parse()和JSON.parse()区别

1. 输入字符串的格式

  • qs.parse() :期望的输入字符串是URL查询字符串(query string)的格式,即"键=值"对通过&符号连接起来的字符串。例如,"name=John&age=30"

  • JSON.parse() :期望的输入字符串是有效的JSON格式字符串。JSON字符串必须严格遵守JSON规范,包括使用双引号括起键名,以及适当的逗号、括号和引号。例如,'{"name":"John","age":30}'(注意,虽然这里使用了单引号来界定整个字符串,但JSON字符串内部使用的是双引号)。

2. 输出对象

  • 两者都将输入字符串转换成JavaScript对象,但处理数组和嵌套对象的方式略有不同,这主要取决于输入字符串的格式。

  • qs.parse() :在处理数组时,它可能会根据查询字符串的格式(如使用[]来指示数组)来创建数组。例如,"items[]=1&items[]=2&items[]=3" 可能会被解析为 { items: [1, 2, 3] }

  • JSON.parse():严格按照JSON规范解析字符串,创建嵌套的对象和数组。

3. 使用的上下文

  • qs.parse():主要用于解析URL查询字符串,将其转换为JavaScript对象,以便在客户端JavaScript代码中进一步处理。

  • JSON.parse():用于将JSON格式的字符串(通常是从服务器接收到的数据)转换为JavaScript对象,以便在客户端进行进一步的操作和处理。

4. 错误处理

  • 两者在解析无效格式的字符串时都可能抛出错误,但错误的具体类型和消息可能会有所不同。

  • qs.parse():如果查询字符串格式不正确(例如,缺少等号或包含非法字符),它可能会以某种方式处理这些错误,但具体行为取决于qs库的版本和配置。

  • JSON.parse() :如果JSON字符串格式不正确(例如,缺少引号、括号不匹配等),它会抛出一个SyntaxError异常。

5. 兼容性

  • qs.parse():是一个第三方库,需要额外安装。但它提供了比原生JavaScript更灵活和强大的查询字符串解析功能。

  • JSON.parse():是JavaScript的一个内置方法,自ECMAScript 5起就存在于所有现代浏览器中,因此具有极高的兼容性。

相关推荐
也无晴也无风雨24 分钟前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational2 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤5 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui