URL查询字符串的处理小妙招——URLSearchParams

偏执的太偏执、 2023-02-18 03:11 31阅读 0赞

## URLSearchParams ##

`URLSearchParams`接口定义了一些很实用的处理`URL`查询参数的方法；  
例如：从查询参数里获得某个属性的值，把一个对象转成查询参数，修改查询参数等。  
以前不知道这个接口的时候，是用正则表达式来处理，好痛苦的呢。

## 直接用在 for…of 结构中 ##

一个实现了 `URLSearchParams` 的对象可以直接用在`for...of`结构中（跟map很像）；

for (const [key, value] of mySearchParams) { }
    for (const [key, value] of mySearchParams.entries()) { }

## 构造函数 ##

`URLSearchParams`是构造函数，`new URLSearchParams('URL查询参数')`返回一个对象，对象拥有以下方法

## 实用方法 ##

var searchParams = new URLSearchParams("q=URLUtils.searchParams&topic=api");

#### 获取查询参数内某个属性的值 ####

1.  `searchParams.get(key)` 获取指定key的第一个值
2.  `searchParams.getAll(key)` 获取所有指定key的值（返回一个数组，在URL中某个key可能指定了多次）
3.  `searchParams.has(key)` 返回boolean值，查询参数中是否有key

#### 设置查询参数内某个属性的值 ####

1.  `searchParams.append(key, value)` 插入一个参数
2.  `searchParams.set(key, value)` 设置某个参数的值，如果已经有这个key（如果有多个key,会全都删掉）会删掉已有的值，重新设为新值；如果没有就如同append
3.  `searchParams.delete(key)` 删掉指定的key

#### 查询参数遍历 ####

1.  `searchParams.values()` 同map的values方法
2.  `searchParams.entries()`
3.  `searchParams.keys()`
4.  `searchParams.sort()` 会把查询参数的按照键的Unicode代码点把键名排序

#### 重新生成查询参数 ####

1.  `searchParams.toString()` searchParams经过以上一系列的修改后，调用toString方法可以生成查询参数，直接用到url上的那种

let url = new URLSearchParams("?query=%40&a=2");
    url.append('b', '34');
    url.append('b', 'hahaha');
    console.log(url.toString())// query=%40&a=2&a=awe&b=34&b=hahaha

## 结尾 ##

> **注意：**
> 
> 1.  URLSearchParams只能解析查询参数（开头带不带？都可以，反正都会被忽略）
> 2.  URLSearchParams不能解析完整的url，完整的url会被整个的当作一个key来处理
> 3.  URLSearchParams.toString()后的查询参数是不带？的，拼接url时要记得加上

--------------------

### 小技巧 ###

**利用ES10的`Object.fromEntries()`可以把查询参数转成对象；当某个key存在多个时，后面的会替换掉之前的，最终只保留一个；**

let url = new URLSearchParams("query=%40&a=2");
    console.log(Object.fromEntries(url));
    // {query: "@", a: "2", b: "34"}