URLSearchParams和url-search-params-polyfill

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

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

5、已知的问题

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

Edge	Chrome	Opera	Samsung Internet	QQ	Baidu
14 - 16	40 - 48	27 - 35	4	1.2	7.12

function myFetch(url, { headers = {}, body }) {
    headers = headers instanceof Headers ? headers : new Headers(headers);
    
    if (body instanceof URLSearchParams) {
        headers.set('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    }
    
    fetch(url, {
        headers,
        body
    });
}

参考文章：

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams