在 ES9 中，我们得到了一个很好用的新功能 —— URLSearchParams，该功能用于处理 URL 中的查询参数。这对于前端开发者来说是很实用的，因为 URL 是前端开发中一个重要的组成部分。
在这篇文章中，我们将讨论这个新功能，了解它如何在前端开发中使用，并探讨一些示例代码，以帮助读者更好地理解这个功能。
什么是 URLSearchParams？
URLSearchParams 是一个 JavaScript 中的内置类，用于对 URL 中的查询参数进行编码和解码，并提供了处理查询字符串的方法。URLSearchParams 对象可以用来解决常见的前端开发问题，例如在 Ajax 请求中向服务器发送查询参数、获取 URL 的查询参数等。
URLSearchParams 对象的使用
创建一个 URLSearchParams 对象十分简单。我们只需要使用 new 关键字来创建一个新的实例即可。
const searchParams = new URLSearchParams(query);
在上面的代码中，我们传入一个字符串 query 作为构造函数的参数。query 表示 URL 的查询参数。
对于 URLSearchParams 对象，可以使用以下方法来与查询参数进行操作：
append
在查询参数中添加一个新的键值对。如果已经存在相同的键，则数据将被合并为一个数组。
searchParams.append(key, value);
delete
从查询参数中删除一个特定的键值对。
searchParams.delete(key);
get
获取指定键的值。如果有多个相同的键，则返回第一个值。
searchParams.get(key);
getAll
获取指定键的所有值，返回一个数组。
searchParams.getAll(key);
has
判断指定的键是否存在。
searchParams.has(key);
set
设置指定键的值。如果已经存在相同的键，则覆盖原来的值。
searchParams.set(key, value);
toString
将查询参数转换为字符串。
searchParams.toString();
URLSearchParams 示例代码
下面是一些示例代码，展示了如何使用 URLSearchParams 对象来处理 URL 中的查询参数。
获取 URL 的查询参数
const params = new URLSearchParams(window.location.search);
const param1 = params.get('param1');
const param2 = params.get('param2');
console.log(param1, param2);以上代码可以获取当前 URL 中的查询参数，并将其分别存储为 param1 和 param2 变量中。
Ajax 请求中发送查询参数
const searchParams = new URLSearchParams();
searchParams.append('param1', 'value1');
searchParams.append('param2', 'value2');
fetch('/api/data?' + searchParams);以上代码可以向服务器发送一个 GET 请求，查询参数为 param1=value1¶m2=value2。
合并 URL 查询参数
const baseUrl = 'http://example.com';
const additionalParams = new URLSearchParams();
additionalParams.append('param3', 'value3');
const url = baseUrl + '?' + additionalParams;以上代码可以合并两个查询参数对象，最终生成 URL 为 http://example.com?param3=value3。
结论
在这篇文章中，我们讨论了 ES9 中的新功能 URLSearchParams，并探讨了如何在前端开发中使用该功能。URLSearchParams 使我们能更加方便地处理 URL 查询参数，并提供了许多有用的方法。我们还编写了一些示例代码，介绍了 URLSearchParams 的一些常见用法。希望这篇文章能为读者提供有价值的学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671d19489babaf620fb46e3a