npm 包 clever-qs 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，接口调用是一个非常常见的操作。很多时候我们需要传递一些参数给后端接口，这时候就需要使用 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：

const qs = require('clever-qs');

const params = {
  username: 'john',
  password: '123456',
};
const queryString = qs.stringify(params);
console.log(queryString);
// username=john&password=123456

qs.stringify 方法将一个对象序列化为 query string，对象的属性和值分别对应键值对的键和值。

进阶用法

默认情况下，clever-qs 会把数组和对象结构化为嵌套的键值对，例如：

const qs = require('clever-qs');

const params = {
  filters: [
    { key: 'name', value: 'jim' },
    { key: 'age', value: 18 },
  ],
};
const queryString = qs.stringify(params);
console.log(queryString);
// filters%5B0%5D%5Bkey%5D=name&filters%5B0%5D%5Bvalue%5D=jim&filters%5B1%5D%5Bkey%5D=age&filters%5B1%5D%5Bvalue%5D=18

const parsedParams = qs.parse(queryString);
console.log(parsedParams);
// {
//   filters: [
//     { key: 'name', value: 'jim' },
//     { key: 'age', value: '18' }
//   ]
// }

在 query string 中，%5B 对应 [，%5D 对应 ]，因此我们可以看到，clever-qs 将数组和对象转换成了嵌套的键值对。

如果我们想要使用类似 PHP 的方式来处理数组，可以使用 qs.stringify 和 qs.parse 方法的第二个参数。例如：

const qs = require('clever-qs');

const params = {
  filters: [
    { key: 'name', value: 'jim' },
    { key: 'age', value: 18 },
  ],
};
const queryString = qs.stringify(params, { indices: false });
console.log(queryString);
// filters%5B%5D%5Bkey%5D=name&filters%5B%5D%5Bvalue%5D=jim&filters%5B%5D%5Bkey%5D=age&filters%5B%5D%5Bvalue%5D=18

const parsedParams = qs.parse(queryString, { arrayFormat: 'bracket' });
console.log(parsedParams);
// {
//   filters: [
//     { key: 'name', value: 'jim' },
//     { key: 'age', value: '18' }
//   ]
// }

在 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