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