npm 包 @sailshq/qs 使用教程

随着前端技术的日益发展，前端项目越来越庞大，前端开发者需要处理大量的数据。@sailshq/qs 可以帮助我们简化处理数据的过程，让我们轻松地从浏览器或 Node.js 应用程序中管理查询字符串。

安装 @sailshq/qs

在使用 @sailshq/qs 之前，我们需要先安装它：

npm install @sailshq/qs

使用 @sailshq/qs

假设我们有一个对象：

let obj = {
  name: "John Doe",
  age: 21,
  hobbies: ["swimming", "reading"],
};

如果我们要将这个对象转换成查询字符串，使用 @sailshq/qs 可以非常方便：

const qs = require("@sailshq/qs");

const querystring = qs.stringify(obj);
console.log(querystring); // "name=John+Doe&age=21&hobbies%5B0%5D=swimming&hobbies%5B1%5D=reading"

qs.stringify 方法将对象转换成查询字符串，结果如下：

name=John+Doe&age=21&hobbies%5B0%5D=swimming&hobbies%5B1%5D=reading

其中：

• name=John+Doe 表示 name 属性的值为 John Doe
• age=21 表示 age 属性的值为 21
• hobbies%5B0%5D=swimming&hobbies%5B1%5D=reading 表示 hobbies 属性的值为数组 ["swimming", "reading"]

如果我们要将查询字符串转换成对象，也可以使用 @sailshq/qs 来实现：

const querystring = "name=John+Doe&age=21&hobbies%5B0%5D=swimming&hobbies%5B1%5D=reading";

const obj = qs.parse(querystring);
console.log(obj);

qs.parse 方法将查询字符串转换成对象，结果如下：

{
  name: "John Doe",
  age: "21",
  hobbies: ["swimming", "reading"],
}

高级用法

拼接URL

使用 qs.stringify 方法可以将对象转换为查询字符串，但是对于拼接 URL，还需要手动拼接 ? 和 &，非常麻烦。使用 qs.stringify 方法的第二个参数，可以非常方便地将查询字符串拼接到 URL 中。

const obj = {
  name: "John Doe",
  age: 21,
};

const url = "/user?" + qs.stringify(obj);
console.log(url); // "/user?name=John+Doe&age=21"

禁用数组

默认情况下 qs 会将数组转换为以下格式：name[0]=John&name[1]=Doe。如果不需要此格式，可以将第二个参数 allowDots 设置为 false：

const obj = {
  name: ["John", "Doe"],
};

const querystring = qs.stringify(obj, { allowDots: false });
console.log(querystring); // "name=John&name=Doe"

自定义序列化函数

使用 qs.stringify 方法，我们可以非常方便地将对象转换为查询字符串。不过对于一些特殊的数据格式，如 Date 类型，需要自定义序列化函数。

-- -------------------- ---- -------
----- --- - -
  -------- --- -------
--

----- ----------- - ----------------- -
  -------------- ------ -- -
    ------ ------------------- -- - ---- --- --- ---- ------
  --
---

------------------------- -- ----------------------------------

总结

@sailshq/qs 可以非常方便地帮助我们处理数据，让我们的代码更加简洁高效。在实际开发中，如果需要处理查询字符串，建议使用 @sailshq/qs。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f27e4d43b0ab45f74a8ba38