是时候用 URLSearchParams 替代 URL 参数拼接了

是时候用 URLSearchParams 替代 URL 参数拼接了

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

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

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

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

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

2. URLSearchParams 简介

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

. 使用 URLSearchParams 的优势

它的主要优势是：

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

4. 基本用法

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

4.1 创建 URLSearchParams 对象

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

代码语言：javascript代码运行次数：0运行复制

ct params = new URLSearchParams();

4.2 添加参数

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

代码语言：javascript代码运行次数：0运行复制

params.append("name", "零五网");
params.append("website", "零五网");
params.append("score", 96);
params.append("score", 81);

4. 获取参数

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

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

代码语言：javascript代码运行次数：0运行复制

ct name = params.get("name"); // '零五网'
ct age = params.get("age"); // '96'
ct ages = params.getAll("age"); // ['96', '81']

4.4 删除参数

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

代码语言：javascript代码运行次数：0运行复制

params.delete("age");

4.5 遍历参数

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

代码语言：javascript代码运行次数：0运行复制

for (ct [key, value] of ()) {
  cole.log(`${key}: ${value}`);
}

4.6 将参数转换为字符串

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

代码语言：javascript代码运行次数：0运行复制

ct queryString = (); // 'name=John%20Doe'

4.7 将参数附加到 URL

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

代码语言：javascript代码运行次数：0运行复制

ct url = new URL(";);
url.searchParams.append("query", "URLSearchParams");
cole.log(()); // ''

5. 实际应用

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

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

6. 结论

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