在前端开发中，接口调用是一个非常常见的操作。很多时候我们需要传递一些参数给后端接口，这时候就需要使用 query string。clever-qs 是一个 npm 包，可以让我们方便地处理 query string，避免了手写拼接的繁琐和出错。本教程将介绍如何使用 clever-qs。
安装
使用 npm 安装 clever-qs：
npm install clever-qs
基本用法
在使用 clever-qs 之前，我们先来看一下常规的 query string 是怎样构成的。比如下面的 URL：
http://example.com/api?username=john&password=123456
这个 URL 中，? 之后的部分就是 query string。它由多个键值对组成，每个键值对之间用 & 分隔，键和值之间用 = 分隔。我们可以使用 clever-qs 来解析这个 query string：
const qs = require('clever-qs');
const params = qs.parse('username=john&password=123456');
console.log(params);
// { username: 'john', password: '123456' }qs.parse 方法将 query string 转换为一个对象，键值对分别对应对象的属性和值。
我们也可以调用 qs.stringify 方法将一个对象序列化为 query string：
-- -------------------- ---- ------- ----- -- - --------------------- ----- ------ - - --------- ------- --------- --------- -- ----- ----------- - --------------------- ------------------------- -- -----------------------------
qs.stringify 方法将一个对象序列化为 query string，对象的属性和值分别对应键值对的键和值。
进阶用法
默认情况下，clever-qs 会把数组和对象结构化为嵌套的键值对，例如：
-- -------------------- ---- -------
----- -- - ---------------------
----- ------ - -
-------- -
- ---- ------- ------ ----- --
- ---- ------ ------ -- --
--
--
----- ----------- - ---------------------
-------------------------
-- -------------------------------------------------------------------------------------------------------------------
----- ------------ - ----------------------
--------------------------
-- -
-- -------- -
-- - ---- ------- ------ ----- --
-- - ---- ------ ------ ---- -
-- -
-- -在 query string 中，%5B 对应 [，%5D 对应 ]，因此我们可以看到，clever-qs 将数组和对象转换成了嵌套的键值对。
如果我们想要使用类似 PHP 的方式来处理数组，可以使用 qs.stringify 和 qs.parse 方法的第二个参数。例如：
-- -------------------- ---- -------
----- -- - ---------------------
----- ------ - -
-------- -
- ---- ------- ------ ----- --
- ---- ------ ------ -- --
--
--
----- ----------- - -------------------- - -------- ----- ---
-------------------------
-- ---------------------------------------------------------------------------------------------------------------
----- ------------ - --------------------- - ------------ --------- ---
--------------------------
-- -
-- -------- -
-- - ---- ------- ------ ----- --
-- - ---- ------ ------ ---- -
-- -
-- -在 qs.stringify 方法中，我们将 indices 设为了 false，这样就会使用 [index] 的形式来处理数组；在 qs.parse 方法中，我们将 arrayFormat 设为了 bracket，这样就会将 query string 中的 [index] 转换为数组。
总结
clever-qs 是一个非常方便的 npm 包，可以帮助我们处理 query string。本教程介绍了 clever-qs 的基本用法和进阶用法，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673e3fb81d47349e53e2d