不要再手动拼接 URL 参数，请使用 URLSearchParams
By 蚊子
在 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。这将使你的代码更加健壮、易于维护，并提升开发效率。
想参与讨论，或者查看更多优质的文章：