轻松玩转 URL 查询字符串：Qs 库实用攻略

轻松玩转 URL 查询字符串：Qs 库实用攻略

简介

Qs 是一个 JavaScript 库，全称是 Query String，用于解析和序列化 URL 查询字符串。它可以方便地将查询字符串转换为 JavaScript 对象，或者将对象转换为查询字符串格式，常用于处理 URL 参数或 API 请求。

安装

要在项目中使用 Qs，可以通过 npm 安装或通过 CDN 引入。

npm 安装

npm install qs

CDN 引入

在 HTML 中引入 Qs：

<script src="https://cdn.jsdelivr.net/npm/qs@6.13.0/dist/qs.min.js"></script>

基本用法

Qs 提供两个主要方法：Qs.parse 和 Qs.stringify，用于处理查询字符串。Qs 主要用于从 URL 中提取参数以发起 Axios 请求。

解析查询字符串

Qs.parse 方法将查询字符串转换为 JavaScript 对象。在代码中，它用于从 URL 查询字符串中提取 id：

// http://127.0.0.1:5500/AE/blog/detail.html?id=123

const url = window.location.search; // 例如 "?id=123"
const newUrl = url.substring(1); // 去掉 "?", 得到 "id=123"
let params = Qs.parse(newUrl); // { id: "123" }

示例：

const queryString = "id=123&name=张三";
const parsed = Qs.parse(queryString);
console.log(parsed);
// 输出: { id: "123", name: "张三" }

序列化对象

Qs.stringify 方法将 JavaScript 对象转换为查询字符串。这对于构造 API 请求的 URL 非常有用，例如在代码中构建 /article/detail 的请求。

示例：

const obj = { id: 123, name: "张三" };
const queryString = Qs.stringify(obj);
console.log(queryString);
// 输出: "id=123&name=%E5%BC%A0%E4%B8%89"

与 Axios 集成

Qs 解析 URL 参数以供 Axios 请求使用。也可以使用 Qs.stringify 构造查询字符串。

示例：

axios.defaults.baseURL = "http://127.0.0.1:3000/";

const params = { id: 123 };
axios({
  method: "get",
  url: `/article/detail?${Qs.stringify(params)}`,
}).then(({ data: res }) => {
  console.log(res);
});

为什么使用 Qs

• 简单易用：处理查询字符串比手动解析更高效。
• 兼容性好：支持复杂的查询字符串格式，常与 Axios 等库配合使用。
• 安全：自动处理字符编码，减少 URL 注入风险。