在前端开发中，经常需要处理 URL 中的查询参数。传统的方式是手动解析 URL，然后通过正则表达式等方式提取查询参数。但在ES12中，新增了 URLSearchParams 对象，可以更加便捷地处理查询参数。
URLSearchParams 介绍
URLSearchParams 是一个 JavaScript 内置对象，用于操作 URL 中查询参数部分的对象。它提供了一系列方法，可以轻松地获取、设置、删除查询参数。
获取查询参数
首先，我们来看一下如何获取查询参数。假设有如下 URL：
---------------------------------------------------------
我们可以通过以下代码获取查询参数：
----- ------------ - --- ---------------------------------------- ---------------------- -- -- ------------ --------------------------- -- -- --------
首先，我们使用 URLSearchParams 构造函数来创建一个实例，将 URL 的查询参数部分传入作为参数。然后，我们可以使用 get() 方法来获取指定参数的值。因为 get() 方法返回的可能是字符串或 null，所以需要注意参数不存在的情况。
设置查询参数
接下来，我们看一下如何设置查询参数。我们可以使用 set() 方法来设置指定参数的值。代码如下：
----- ------------ - --- ---------------------------------------- --------------------- --------- -- -- --- --- ------- ------------------------ -- -- ------------------------
在上面的代码中，我们调用 set() 方法将 q 参数的值设置为 react。最后，我们使用 toString() 方法将更新后的查询参数部分输出为字符串。
删除查询参数
最后，我们说一下如何删除查询参数。我们可以使用 delete() 方法来删除指定参数。代码如下：
----- ------------ - --- ---------------------------------------- ------------------------------ -- -- -------- -- ------------------------ -- -- ---------------
在上面的代码中，我们调用 delete() 方法将查询参数中的 source 参数删除。最后，我们使用 toString() 方法将更新后的查询参数部分输出为字符串。
总结
在 ES12 中，新增了 URLSearchParams 对象，可以极大地简化前端开发中对查询参数的处理。通过本文的介绍，我们学会了如何获取、设置和删除查询参数的方法。相信这些技能可以在日常工作中帮助到您。
示例代码
-- ------ ----- ------------ - --- ---------------------------------------- ---------------------- -- -- ------------ --------------------------- -- -- -------- -- ------ --------------------- --------- -- -- --- --- ------- ------------------------ -- -- ------------------------ -- ------ ------------------------------ -- -- -------- -- ------------------------ -- -- ---------------
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/659ebbd6add4f0e0ff790a40