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