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