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