介绍
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.js
或main.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起就存在于所有现代浏览器中,因此具有极高的兼容性。