qs.stringify 和 URLSearchParams差异

qs.stringify 和 URLSearchParams 都用于处理 URL 查询字符串，但它们在来源、功能特性、兼容性和使用场景等方面存在一些差异，下面为你详细介绍：

来源和所属环境

• qs.stringify：qs 是一个第三方库，需要单独安装（通常使用 npm install qs 进行安装）。因此 qs.stringify 不属于 JavaScript 原生 API，它提供了丰富的查询字符串处理功能，常用于 Node.js 项目和使用打包工具（如 Webpack）的前端项目中。
• URLSearchParams：是 JavaScript 的原生 API，内置于现代浏览器和 Node.js 环境中（Node.js v7.5.0 及以上版本支持），无需额外安装即可使用。

功能特性

1. 基本对象转换

• qs.stringify：可以将一个普通的 JavaScript 对象转换为 URL 查询字符串。它支持嵌套对象和数组的复杂结构，并可以通过配置选项进行灵活处理。

const qs = require('qs');
const obj = {
    name: 'John',
    age: 30,
    hobbies: ['reading', 'swimming']
};
const queryString = qs.stringify(obj);
console.log(queryString); 
// 输出: name=John&age=30&hobbies%5B0%5D=reading&hobbies%5B1%5D=swimming

• URLSearchParams：同样可以将对象转换为查询字符串，但它只能处理一维的键值对，不支持嵌套对象和数组的自动展开。

const obj = {
    name: 'John',
    age: 30
};
const searchParams = new URLSearchParams(obj);
const queryString = searchParams.toString();
console.log(queryString); 
// 输出: name=John&age=30

2. 嵌套对象和数组处理

• qs.stringify：可以通过配置选项来控制嵌套对象和数组的序列化方式，例如可以将数组序列化为以逗号分隔的字符串。

const qs = require('qs');
const obj = {
    name: 'John',
    hobbies: ['reading', 'swimming']
};
const queryString = qs.stringify(obj, { arrayFormat: 'comma' });
console.log(queryString); 
// 输出: name=John&hobbies=reading,swimming

• URLSearchParams：如果要处理数组，需要手动循环添加每个数组元素。对于嵌套对象，无法直接处理。

const obj = {
    name: 'John',
    hobbies: ['reading', 'swimming']
};
const searchParams = new URLSearchParams();
searchParams.append('name', obj.name);
obj.hobbies.forEach((hobby) => {
    searchParams.append('hobbies', hobby);
});
const queryString = searchParams.toString();
console.log(queryString); 
// 输出: name=John&hobbies=reading&hobbies=swimming

兼容性

• qs.stringify：由于 qs 是一个第三方库，只要项目中正确引入并配置，几乎可以在任何 JavaScript 环境中使用，兼容性较好。
• URLSearchParams：在现代浏览器中得到了广泛支持，但在一些旧版本的浏览器（如 IE）中不支持，需要使用 polyfill 来实现兼容。

使用场景

• qs.stringify：适用于需要处理复杂数据结构（嵌套对象和数组）的场景，以及需要对查询字符串的序列化方式进行精细控制的情况。例如在与后端 API 进行数据交互时，需要将复杂的表单数据序列化为查询字符串。
• URLSearchParams：适用于处理简单的一维键值对数据，以及在浏览器环境中操作 URL 查询参数的场景。例如在处理 URL 的查询参数、构建 AJAX 请求的查询字符串等方面非常方便。