深入理解qs库:简化你的工作流程

发布时间:2023年12月21日

前言

vue 开发中,处理 url 查询字符串是一个常见的任务。qs 库是一个流行的工具,可以帮助我们轻松地处理 url 查询字符串的编码和解码。本文将介绍 qs 库的基本用法,并结合实例演示帮助你更好地理解和应用这个实用的工具。


一、qs 是什么?

qs 是一个 node.js 和浏览器中的 url 查询字符串解析和序列化库。它可以将 JavaScript 对象转换为 url 查询字符串,也可以将 url 查询字符串解析为 JavaScript 对象。qs 库支持多种编码格式,包括 application/x-www-form-urlencodedmultipart/form-data 等。它还提供了一些高级功能,例如解析嵌套对象和数组、自定义编码和解码函数等。qs 库易于使用,广泛应用于 web 开发中的 url 查询字符串处理。


二、安装

  • 安装

    npm i qs
    
  • 局部引入

    import qs from 'qs'
    
  • 全局引入

    import qs from 'qs'
    Vue.prototype.$qs = qs //使用时直接 this.$qs
    

三、使用

我们在使用 qs 库时,两个最常用的方法是 stringifyparse。下面我将详细介绍这两个方法的作用和用法:

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 是一个对象的属性名,它表示一个包含水果名称的数组。arrayFormatqs.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 的区别

相同点

qsJSON 都可以进行序列化。

不同点

  • 数据格式:

    qs.stringifyqs 库提供的方法,用于将 JavaScript 对象序列化为 url 查询字符串的格式;
    JSON.stringifyJavaScript 内置的方法,用于将 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 参数

replacerJSON.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 参数

spaceJSON.stringify() 的第三个参数。用于控制输出的缩进和格式化,它可以是一个数字或字符串。

space 参数是一个数字时,表示缩进的空格数。例如,space2 时,输出的 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);
  }
},

控制台打印

在这里插入图片描述


相关推荐

? 浅谈 JSON 对象和 FormData 相互转换,打通前端与后端的通信血脉

文章来源:https://blog.csdn.net/Shids_/article/details/135129920
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。