前言
在
vue开发中，处理url查询字符串是一个常见的任务。qs库是一个流行的工具，可以帮助我们轻松地处理url查询字符串的编码和解码。本文将介绍qs库的基本用法，并结合实例演示帮助你更好地理解和应用这个实用的工具。
一、qs 是什么？
qs 是一个 node.js 和浏览器中的 url 查询字符串解析和序列化库。它可以将 JavaScript 对象转换为 url 查询字符串，也可以将 url 查询字符串解析为 JavaScript 对象。qs 库支持多种编码格式，包括 application/x-www-form-urlencoded 和 multipart/form-data 等。它还提供了一些高级功能，例如解析嵌套对象和数组、自定义编码和解码函数等。qs 库易于使用，广泛应用于 web 开发中的 url 查询字符串处理。
二、安装
-
安装
npm i qs -
局部引入
import qs from 'qs' -
全局引入
import qs from 'qs' Vue.prototype.$qs = qs //使用时直接 this.$qs
三、使用
我们在使用 qs 库时，两个最常用的方法是 stringify 和 parse。下面我将详细介绍这两个方法的作用和用法：
3.1 stringify 方法
-
作用：将
JavaScript对象序列化为url查询字符串 -
用法：
qs.stringify(object, [options]) -
参数：
object：要序列化的JavaScript对象options（可选）：一个包含序列化选项的对象
-
返回值：序列化后的
url查询字符串
实例
在下面的实例中，stringify 方法将 obj 对象序列化为 url 查询字符串。
mounted() {
const obj = {
foo: "bar", baz: ["qux", "quux"], corge: "" };
const queryString = qs.stringify(obj);
console.log(queryString);
},
控制台打印
3.2 parse 方法
- 作用：将
url查询字符串解析为JavaScript对象 - 用法：
qs.parse(str, [options]) - 参数：
str：要解析的URL查询字符串options（可选）：一个包含解析选项的对象
- 返回值：解析后的
JavaScript对象
实例
在下面的实例中，parse 方法将 queryString 解析为 JavaScript 对象。
mounted() {
const queryString = "foo=bar&baz%5B0%5D=qux&baz%5B1%5D=quux&corge=";
const obj = qs.parse(queryString);
console.log(obj);
},
控制台打印
四、qs 的高级用法
4.1 解析嵌套对象（深度序列化）
qs 库可以解析嵌套对象，将查询字符串转换为嵌套的 JavaScript 对象。
mounted() {
const queryString = "user[name]=John&user[age]=25";
const parsed = qs.parse(queryString, {
depth: 1 });
console.log(parsed); // 输出：{ user: { name: 'John', age: '25' } }
},
其中，depth 选项用于指定解析嵌套对象时的最大深度。它控制了解析过程中嵌套对象的层级数。默认情况下，depth 选项的值为 5，表示 qs 库将解析最多 5 层的嵌套对象。如果查询字符串中的嵌套对象超过了指定的深度，qs 库将停止解析并将其视为字符串。通过调整 depth 选项的值，可以控制 qs 库解析嵌套对象的深度。例如，将 depth 设置为 1，则只解析一层嵌套对象，超过一层的嵌套对象将被视为字符串。
4.2 序列化数组
mounted() {
const arr = ["apple", "banana", "cherry"];
const serialized = qs.stringify({
fruits: arr }, {
arrayFormat: "indices" });
console.log(serialized); // 输出：fruits=apple&fruits=banana&fruits=cherry
},
在这个例子中，fruits 是一个对象的属性名，它表示一个包含水果名称的数组。arrayFormat 是 qs.stringify 方法的选项之一，用于控制数组的序列化方式。
-
arrayFormat选项有以下几种取值：indices：默认值。数组的值将使用索引作为后缀进行命名，例如fruits[0]=apple&fruits[1]=banana&fruits[2]=cherry
brackets：数组的值将使用方括号进行命名，例如fruits[]=apple&fruits[]=banana&fruits[]=cherry
repeat：数组的值将重复出现在查询字符串中，例如fruits=apple&fruits=banana&fruits=cherry
4.3 自定义序列化函数
mounted() {
const obj = {
a: "value1",
b: "value2",
date: new Date(),
};
const serialized = qs.stringify(obj, {
serializeDate: (i) => {
const year = i.getFullYear();
const month = String(i.getMonth() + 1).padStart(2, "0");
const day = String(i.getDate()).padStart(2, "0");
return `${
year}-${
month}-${
day}`;
},
});
console.log(serialized); // 输出：a=value1&b=value2&date=2023-12-21
},
在这个示例中，我们使用 qs.stringify 方法将 obj 对象序列化为 url 查询字符串的形式。在这个过程中，我们传递了一个选项对象作为第二个参数，并定义了一个名为 serializeDate 的自定义序列化函数。在 serializeDate 函数中，我们使用方法将日期对象转换为 YYYY-MM-DD 格式的字符串。
4.4 自定义解析函数
mounted() {
const str = "a=value1&b=value2&date=2022-12-12";
const parsed = qs.parse(str, {
parseDate: (value) => {
const parts = value.split("-");
const year = Number(parts[0]);
const month = Number(parts[1]) - 1;
const day = Number(parts[2]);
return new Date(year, month, day);
},
});
console.log(parsed); // 输出：{a: 'value1', b: 'value2', date: '2022-12-12'}
},
在这个示例中，我们使用 qs.parse 方法将 str 字符串解析为一个对象。在这个过程中，我们传递了一个选项对象作为第二个参数，并定义了一个名为 parseDate 的自定义解析函数。在 parseDate 函数中，我们首先使用 split 方法将日期字符串按照 - 分割成三个部分，分别表示年份、月份和日期。然后，我们将这三个部分转换为数字，并使用 new Date 构造函数创建一个新的日期对象。
4.5 忽略特定属性
mounted() {
const str = "foo_a=value1&foo_b=value2&c=value3";
const parsed = qs.parse(str);
// 忽略以 'foo_' 前缀开头的属性
const filtered = Object.keys(parsed).reduce((acc, key) => {
if (!key.startsWith("foo_")) {
acc[key] = parsed[key];
}
return acc;
}, {
});
console.log(filtered); // 输出：{c: 'value3'}
},
在这个示例中，我们首先使用 qs.parse 方法解析查询字符串 str，得到一个解析后的结果对象 parsed。然后，我们使用 Object.keys 方法遍历 parsed 对象的属性，并通过 reduce 方法进行过滤。对于不以 foo_ 前缀开头的属性，我们将其添加到一个新的对象 filtered 中。
五、qs.stringify 和 JSON.stringify 的区别
相同点
qs 和 JSON 都可以进行序列化。
不同点
-
数据格式：
qs.stringify是qs库提供的方法，用于将JavaScript对象序列化为url查询字符串的格式；
JSON.stringify是JavaScript内置的方法，用于将JavaScript对象序列化为JSON字符串的格式。 -
序列化规则：
qs.stringify会对对象的属性进行url编码，并使用等号（=）连接属性名和属性值，使用与号（&）连接不同的属性；
JSON.stringify会将对象的属性和值转换为字符串，并按照 JSON 格式进行序列化，属性名会被包裹在双引号中。
使用 qs.stringify 的示例代码：
mounted() {
const data = {
name: "John Doe",
age: 25,
city: "New York",
};
const queryString = qs.stringify(data);
console.log(queryString);
// 输出：name=John%20Doe&age=25&city=New%20York
},
使用 JSON.stringify 的示例代码：
mounted() {
const data = {
name: "John Doe",
age: 25,
city: "New York",
};
const jsonString = JSON.stringify(data);
console.log(jsonString);
// 输出：{"name":"John Doe","age":25,"city":"New York"}
},
六、JSON
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于数据的序列化、存储和传输。它以简洁、易读的文本格式表示结构化的数据，通常由键值对组成。通过 JSON.parse() 和 JSON.stringify() 方法可以实现 JSON 字符串和 JavaScript 对象之间的转换。
6.1 JSON.parse() 方法
将 JSON 字符串解析为 JavaScript 对象。
示例代码：
mounted() {
const jsonString = '{"name":"John Doe","age":25}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // 输出：John Doe
},
6.2 JSON.stringify() 方法
将 JavaScript 对象序列化为 JSON 字符串。
示例代码：
mounted() {
const obj = {
name: "John Doe", age: 25 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出：{"name":"John Doe","age":25}
},
replacer 参数
replacer 是JSON.stringify() 的第二个参数。用于控制序列化过程的选项。可以是一个函数或数组，用于过滤和转换要序列化的对象的属性。
示例代码：
mounted() {
const obj = {
name: "John Doe", age: 25, city: "New York" };
const jsonString = JSON.stringify(obj, ["name", "age"]);
console.log(jsonString); // 输出：{"name":"John Doe","age":25}
},
space 参数
space 是JSON.stringify() 的第三个参数。用于控制输出的缩进和格式化，它可以是一个数字或字符串。
当 space 参数是一个数字时，表示缩进的空格数。例如，space 为 2 时，输出的 JSON 字符串会进行缩进，每个层级缩进 2 个空格。
mounted() {
const obj = {
name: "John Doe", age: 25 };
const jsonString = JSON.stringify(obj, null, 2);
console.log(jsonString);
// 输出：
// {
// "name": "John Doe",
// "age": 25
// }
},
当 space 参数是一个字符串时，表示用于缩进的字符串。例如，space 为 "\t" 时，输出的 JSON 字符串会使用制表符进行缩进。
const obj = {
name: 'John Doe', age: 25 };
const jsonString = JSON.stringify(obj, null, "\t");
console.log(jsonString);
// 输出：
// {
// "name": "John Doe",
// "age": 25
// }
如果 space 参数是一个非数字且非字符串的值，例如 null，则表示不进行缩进，输出的 JSON 字符串将没有额外的空格。
const obj = {
name: 'John Doe', age: 25 };
const jsonString = JSON.stringify(obj, null, null);
console.log(jsonString);
// 输出：{"name":"John Doe","age":25}
异常处理
JSON.parse() 和 JSON.stringify() 的异常处理。在解析或序列化过程中，如果遇到无效的 JSON 字符串，会抛出 SyntaxError 异常。
mounted() {
try {
const jsonString = '{"name":"John Doe","age":}';
const obj = JSON.parse(jsonString);
console.log(obj);
} catch (error) {
console.error(error);
}
},
控制台打印
