不要再手动拼接 URL 参数，请使用 URLSearchParams-蚊子的前...

在 Web 开发中，处理 URL 参数是一个常见的需求。无论是构建 GET 请求的查询字符串，还是在客户端存储和传递数据，URL 参数都扮演着重要的角色。然而，手动拼接 URL 参数不仅繁琐，而且容易出错。

在这之前，我们可能还得需要引入 query-string 或 qs 等第三方库来操作 url 参数。但现在，现代浏览器提供了一个强大的工具 —— URLSearchParams，它极大地简化了 URL 参数的处理。

1. 手动拼接 URL 参数的弊端 #

手动拼接 URL 参数通常涉及字符串操作，比如使用&符号连接键值对，以及使用=符号分隔键和值。这种方法的问题在于：

编码问题：手动拼接时，需要确保所有特殊字符都正确编码。例如，空格应编码为%20，而&、=等字符也需要进行转义。
易出错：在拼接过程中，很容易遗漏&符号或=符号，导致参数格式错误。
可读性差：随着参数数量的增加，手动拼接的 URL 字符串会变得越来越复杂，难以阅读和维护。

2. URLSearchParams 简介 #

URLSearchParams是 Web API 的一部分，它提供了一个简单而强大的接口来处理 URL 的查询字符串。这个接口支持多种操作，包括添加、删除、获取和遍历参数。

3. 使用 URLSearchParams 的优势 #

它的主要优势是：

自动编码：URLSearchParams会自动处理 URL 编码，无需手动转义特殊字符。
易于操作：提供了丰富的 API，可以方便地添加、删除和修改参数。
可读性强：使用URLSearchParams构建的查询字符串更加清晰和结构化。

4. 基本用法 #

下面是一些URLSearchParams的基本用法示例：

4.1 创建 URLSearchParams 对象 #

URLSearchParams是全局变量，可以直接使用：

const params = new URLSearchParams();

4.2 添加参数 #

可以使用append()方法添加参数。若添加的参数名与之前的相同，则会出现多个相同的参数名，而不是覆盖之前的数据。

params.append("name", "蚊子前端博客");
params.append("website", "前端小茶馆");
params.append("score", 96);
params.append("score", 81);

4.3 获取参数 #

使用get()方法可以获取到参数的数据，若相同参数存在多个，则获取第一次添加的那个数据。

若想获取到多个相同参数的所有数据，可以使用getAll()，返回一个字符串数组。

const name = params.get("name"); // '蚊子前端博客'
const age = params.get("age"); // '96'
const ages = params.getAll("age"); // ['96', '81']

4.4 删除参数 #

使用 delete(key) 会删除实例中所有的 key。

params.delete("age");

4.5 遍历参数 #

我们不能直接变量 URLSearchParams 的实例，可以遍历params.entries()：

for (const [key, value] of params.entries()) {
  console.log(`${key}: ${value}`);
}

4.6 将参数转换为字符串 #

将实例中添加的所有参数转为字符串，并自动转义。

const queryString = params.toString(); // 'name=John%20Doe'

4.7 将参数附加到 URL #

若想在 url 的后面直接添加参数，可以直接在new URL().searchParams上进行操作。操作的方法与前面的完全一致。

const url = new URL("https://www.xiabingbao.com/search");
url.searchParams.append("query", "URLSearchParams");
console.log(url.toString()); // 'https://www.xiabingbao.com/search?query=URLSearchParams'

5. 实际应用 #

在实际开发中，URLSearchParams可以应用于多种场景，比如：

构建 GET 请求：使用fetch或XMLHttpRequest发起 GET 请求时，可以方便地构建查询字符串。
表单数据序列化：将表单数据转换为查询字符串，以便在 URL 中传递。
URL 解析：从现有 URL 中提取和修改查询参数。

6. 结论 #

手动拼接 URL 参数不仅效率低下，而且容易出错。相比之下，URLSearchParams提供了一个更加简洁、安全和强大的解决方案。通过使用URLSearchParams，开发者可以更加专注于业务逻辑，而无需担心 URL 参数的编码和格式问题。因此，强烈建议在实际开发中放弃手动拼接 URL 参数的做法，转而使用URLSearchParams。这将使你的代码更加健壮、易于维护，并提升开发效率。

推荐订阅源

蚊子的前端博客