URLSearchParams 初体验

在之前发的工具方法文章的留言中有人就关于验证网址的操作时可以使用URL对象，之后有人提到了URLSearchParams这个URL对象接口。由于之前没有接触过，所以搜索了一下具体的用处，发现这个接口的功能很实用，特此整理分享一下。

URLSearchParams是什么

URLSearchParams 接口定义了一些实用的方法来处理  URL 的查询字符串。参照

从而我们可以知道，它是用来处理URL相关的。那具体都有哪些功能呢？

接口方法

首先，我们调用 newURLSearchParams() 会返回一个  URLSearchParams 对象实例。在这个实例下面我们可以调用以下方法：

append(name, value):插入一个指定的键/值对作为新的搜索参数。 其中  name 是需要插入搜索参数的键名，  value 是需要插入搜索参数的对应值。

delete(name):从搜索参数列表里删除指定的搜索参数及其对应的值。  name 是需要删除的键值名称。

entries():返回一个  iterator 可以遍历所有键/值对的对象。

get(name):获取指定搜索参数的第一个值。  name 是将要返回的参数的键名。返回一个  USVString ；如果没有，则返回  null 。 如果一个页面的URL是  https://example.com/?name=Jonathan&age=18 ，你可以这样解析参数  name 和  age :

getAll(name):获取指定搜索参数的所有值，返回是一个数组。  name 是返回的参数的名称。

has(name):返回 Boolean 判断是否存在此搜索参数。  name 是我们要查询的参数的键名。

keys():返回iterator 此对象包含了键/值对的所有键名。

set(name, value):设置一个搜索参数的新值， 假如原来有多个值将删除其他所有的值 。 其中  name 是需要插入修改参数的键名，  value 是需要插入搜索参数的新值。

sort(): 按键名排序。

toString():返回搜索参数组成的字符串，可直接使用在URL上。

values():返回iterator 此对象包含了键/值对的所有值。

上面就是针对其所有的接口方法进行的一个梳理。然而，感觉好像和我们平时的关联没有很大呢？下面让我们来看几个具体的使用场景。

使用场景

场景一 获取浏览器地址参数

我们之前在获取浏览器地址参数时很多时候是通过对地址进行分割，然后拼接字段对象的方式来做的，类似

但是我们如果使用 URLSearchParams 时就不用这么繁琐了

使用URLSearchParams处理axios发送的数据

在我们使用 axios 和  fetch 来替换之前的  ajax 进行数据请求时，我们会遇到数据格式不一致的问题。

上面的调用方法和我们使用ajax时非常相似，我们可能也会自然而然的这样来写，但是我们会发现，其默认的数据格式是有差别的：

axios数据格式：

ajax数据格式：

是的，多了一层包裹，这样和我们后端的对接就出现问题了。哪怕是手动去修改ContentType为 application/x-www-form-urlencoded 仍然没有解决。

那么URLSearchParams能如何解决呢

兼容性解决

工具好用，但是不可避免的兼容性并没有那么的理想。那我们该怎么办呢？

工欲善其事，必先利其器

url-search-params-polyfill

这是一个专门为URLSearchParams制作的polyfill库。具体的使用方法大家可以参照库的相关说明。在这主要再强调一下，这个库能够解决浏览器的兼容性问题，但是在使用fetch进行请求调用时，我们仍然需要手动去设置ContentType的值。引用该库中给到的一个实例

小结

通过我们对官方接口的说明以及实际场景的使用，详细了解了URLSearchParams的主要功能和使用方法，希望能够在我们以后的开发中起到帮助作用。

参考资料：

URLSearchParams API

使用URLSearchParams处理axios发送的数据