URLSearchParams和url-search-params-polyfill

墨蓝 2022-12-26 11:23 53阅读 0赞

### URLSearchParams对象 ###

**`URLSearchParams`**接口定义了与URL的**查询字符串**一起使用的实用程序方法。**处理url的查询字符串的。 **

**兼容性：Edge17，Chrome49，Firefox29，Safari10.1**

构造函数：URLSearchParams() 返回一个`URLSearchParams`对象实例。

使用：URLSearchParams构造函数接收一个url的查询字符串部分，返回一个URLSearchParams对象。可以通过URLSearchParams对象上的方法，对查询字符串进行操作。

var urlQueryParams = '?wd=axios%E7%9A%84%E4%BD%BF%E7%94%A8&pn=10&oq=axios%E7%9A%84%E4%BD%BF%E7%94%A8&tn=baiduhome_pg&ie=utf-8&usm=3&rsv_idx=2&rsv_pq=cc3a539600088a54&rsv_t=b16';
    var params = new URLSearchParams(urlQueryParams) //构造一个URLSearchParams对象
    
    for(var [key, value] of params){
        console.log(`${key} : ${value}`)
    }

结果：

> wd : axios的使用  
> pn : 10  
> oq : axios的使用  
> tn : baiduhome\_pg  
> ie : utf-8  
> usm : 3  
> ersv\_idx : 2  
> rsv\_pq : cc3a539600088a54

**需要注意的是：该`URLSearchParams`构造函数*不能*解析完整的URL。但是，它将删除`?`字符串的初始开头（如果存在）——MDN**

传入查询字符串时，第一个字符是？号，处理的时候，会忽略？号。

当然不传？号，更好一些。

如果传入一个完整的url。那么就会把http://等当做查询字符串的key值，如下：

var paramsString = "http://example.com/search?query=%40";
    var searchParams = new URLSearchParams(paramsString);
    for(var [key, value] of searchParams){
        console.log(`${key} : ${value}`)
    }

结果：

> http://example.com/search?query : @

### 除了传入查询字符串外，还可以有下面的几种参数： ###

** 1、接收一个对象**

let params = new URLSearchParams({ id: 1, from: "home" });
    
    console.log(params.toString()) //id=1&from=home

**2、接收一个json对象**

let params = new URLSearchParams({ "id": 1, "from": "home" });
    
    console.log(params.toString()) //id=1&from=home

** 3、接收一个二维数组（2D Array），类似于Map。**

let params = new URLSearchParams([["id",1], ["from", "home"]]);
    
    console.log(params.toString()) //id=1&from=home

**4、结合URL构造函数，通过URL构造函数解析一个url地址。其中search属性是查询字符串部分。**

**URL构造函数的兼容性：ES6**

let urlObj = new URL('https://mock.yonyoucloud.com/mock/16388/test/cities?id=1&from=home');
    console.log(urlObj);
    
    let params = new URLSearchParams(urlObj.search);
    
    console.log(params.toString()) //id=1&from=home

** 下面是得到的URL对象：**

>  *  hash: ""
>  *  host: "mock.yonyoucloud.com"
>  *  hostname: "mock.yonyoucloud.com"
>  *  href: "https://mock.yonyoucloud.com/mock/16388/test/cities?id=1&from=home"
>  *  origin: "https://mock.yonyoucloud.com"
>  *  password: ""
>  *  pathname: "/mock/16388/test/cities"
>  *  port: ""
>  *  protocol: "https:"
>  *  **search**: "?id=1&from=home"
>  *  searchParams: URLSearchParams \{\}
>  *  username: ""
>  *  \_\_proto\_\_: URL

### 下面来看看URLSearchParams对象上的方法使用 ###

> URLSearchParams.append()：添加新的键值对。**增。**
> 
> URLSearchParams.delete()：根据键删除对应的键值对。**删。**
> 
> URLSearchParams.set()：将与给定搜索参数关联的值设置为给定值。没有就在末尾添加。如果有多个值，则删除其他值，保留第一个键值。**改。**
> 
> URLSearchParams.get()：得到指定键的第一个对应值。**查。**
> 
> URLSearchParams.getAll()：返回与给定搜索参数关联的所有值。
> 
> URLSearchParams.has()：返回一个Boolean指示，指出是否存在这样的给定参数。
> 
> URLSearchParams.forEach()：允许通过回调函数遍历此对象中包含的所有值。
> 
> **URLSearchParams.toString()**：返回一个字符串，其中包含适合在URL中使用的查询字符串。
> 
> URLSearchParams.keys()：返回此对象中包含的键/值对的iterator所有键的允许迭代 。
> 
> URLSearchParams.values()：返回此对象中包含的键/值对的iterator所有值的允许迭代 。
> 
> URLSearchParams.entries()：返回iterator此对象中包含的所有键/值对的允许迭代。
> 
> URLSearchParams.sort()：按所有键/值对的键对它们进行排序。**兼容性不太好。**

**1、URLSearchParams.append()：添加新的键值对。哪怕是查询字符串上已经有的键值对。总之会新增一个键值对。**

let params = new URLSearchParams('foo=1&bar=2');
    //Add a second foo parameter.
    params.append('foo', 4);
    
    console.log(params.toString())//Query string is now: 'foo=1&bar=2&foo=4'

**2、URLSearchParams.delete()：删除指定键的值。如果是多个相同的键，都会被删除。**

let params = new URLSearchParams('foo=1&bar=2&foo=4');
    
    params.delete('foo');
    
    console.log(params.toString())//Query string is now: 'bar=2'

** 3、URLSearchParams.set()：将与给定搜索参数关联的值设置为给定值。没有就在末尾添加。如果有多个值，则删除其他值，保留第一个键值。**

let params = new URLSearchParams('foo=1&bar=2&foo=4');
    params.set('foo',10)
    params.set('baz',20)
    console.log(params.toString()) //foo=10&bar=2&baz=20

** 4、URLSearchParams.get()：得到指定键的第一个对应值。**

**URLSearchParams.getAll()：返回与给定搜索参数关联的所有值**

let params = new URLSearchParams('foo=1&bar=2&foo=4');
    
    console.log(params.get('foo'))//1

let params = new URLSearchParams('foo=1&bar=2&foo=4');
    
    console.log(params.getAll('foo'))  //["1", "4"]

** 5、URLSearchParams.has()：**返回一个Boolean指示，指出是否存在这样的给定参数。**判断有没有某个键**

let params = new URLSearchParams('foo=1&bar=2&foo=4');
    
    console.log(params.has('foo')) //tue

**6、URLSearchParams.forEach()：允许通过回调函数遍历此对象中包含的所有值。**

let params = new URLSearchParams('foo=1&bar=2&foo=4');
    
    params.forEach((value, key) => {
        console.log(`${key} : ${value}`)
    })

** 7、URLSearchParams.toString()**：**返回一个字符串，其中包含适合在URL中使用的查询字符串。**

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

### url-search-params-polyfill ###

npm地址：[https://www.npmjs.com/package/url-search-params-polyfill][https_www.npmjs.com_package_url-search-params-polyfill]

**1、填充库的特点：**

> 实现了MDN文档中URLSearchParams的所有功能。
> 
> 可以用于浏览器和Node.js。
> 
> 检测浏览器是否完全支持URLSearchParams并扩展它。
> 
> **兼容IE8及以上版本。**

**2、安装**

> $ npm install url-search-params-polyfill --save

**3、引入该pollfill library 填充库**

（1）对于Babel和ES2015+，确保导入该文件

For Babel and ES2015+, make sure to import the file:

> import 'url-search-params-polyfill';

（2）对于ES5

> require('url-search-params-polyfill');

（3）对于浏览器客户端，赋值这个index.js文件到你的项目中，添加一个script标签在你的html文件中。

For browser, copy the `index.js` file to your project, and add a `script` tag in your html

> <script src="index.js"></script>

**4、使用：**

引入该填充库之后，可以直接使用URLSearchParams对象。

使用可以参考：[https://www.npmjs.com/package/url-search-params-polyfill\#usage][https_www.npmjs.com_package_url-search-params-polyfill_usage]

**5、已知的问题**

关于一些浏览器支持fetch，而不支持URLSearchParams对象，当在这些浏览器中使用fetch时，应该添加一个Content-Type 的header。

<table> 
 <thead> 
  <tr> 
   <th>Edge</th> 
   <th>Chrome</th> 
   <th>Opera</th> 
   <th>Samsung Internet</th> 
   <th>QQ</th> 
   <th>Baidu</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>14 - 16</td> 
   <td>40 - 48</td> 
   <td>27 - 35</td> 
   <td>4</td> 
   <td>1.2</td> 
   <td>7.12</td> 
  </tr> 
 </tbody> 
</table>

### 参考文章： ###

[https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams][https_developer.mozilla.org_en-US_docs_Web_API_URLSearchParams]

[https_www.npmjs.com_package_url-search-params-polyfill]: https://www.npmjs.com/package/url-search-params-polyfill
[https_www.npmjs.com_package_url-search-params-polyfill_usage]: https://www.npmjs.com/package/url-search-params-polyfill#usage
[https_developer.mozilla.org_en-US_docs_Web_API_URLSearchParams]: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams