浅析URLSearchParams介绍及应用：生成和解析参数字符串
一、介绍
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。目前兼容性只有IE不支持，其他都已经支持。
具体内容见 MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams
需要注意的是：要使用特定的方法去访问到值。我最开始怎么以为什么都没有，原来是需要使用 get(key) 才能访问到的。
URLSearchParams 构造函数不会解析完整 URL，但是如果字符串起始位置有 ? 的话会被去除。
var paramsString1 = "http://example.com/search?query=%40";
var searchParams1 = new URLSearchParams(paramsString1);
searchParams1.has("query"); // false 无法识别完整 url，把整个http://example.com/search?query当做了key
searchParams1.has("http://example.com/search?query"); // true
searchParams1.get("query"); // null
searchParams1.get("http://example.com/search?query"); // "@" (decodeURIComponent('%40'))
var paramsString2 = "?query=value"; // 第一个字符是 ? 会去除
var searchParams2 = new URLSearchParams(paramsString2);
searchParams2.has("query"); // true
var url = new URL("http://example.com/search?query=%40"); // new URL() 解析 url
var searchParams3 = new URLSearchParams(url.search);
searchParams3.has("query") // true
二、应用：生成和解析参数字符串
1、问题现状：
无论在 Node.js 程序还是 HTML 前端程序里，我们都免不了要手工拼 URL 搜索字符串（URL Search String，或称 Query String）的情况。对于拼接参数，我们还需要考虑参数为 null 或 undefined，此外还需通过 encodeURIComponent() 函数来处理 UTF-8 编码问题。
而将 JSON 对象转为 URL 字符串还并不是最大的难题，如何从 location.search 解析出参数才是更大的问题，你需要自己写代码从 location.search 中解析出你需要的参数。
2、URLSearchParams
那么你可能会想有没有横跨不同浏览器和 Node.js 的现成解决方案或者开源项目呢？答案一定是有的，而且还是一个标准这就是 URLSearchParams
浏览器端文档：就是上面MDN咯
Node.js 文档：https://nodejs.org/api/url.html#url_class_urlsearchparams
3、引入
// 1. 浏览器代码
// 如果需要支持较低版本的 PC 浏览器，需要额外安装和引用 polyfill：
// $ npm install --save url-search-params
// import URLSearchParams from 'url-search-params';
const urlSearchParams = new URLSearchParams();
// 2. Node.js 代码
const { URLSearchParams } = require('url');
const urlSearchParams = new URLSearchParams();
4、生成搜索字符串
const params = new URLSearchParams();
params.set('k', '关键字'); // 设置参数
params.set('p', 1); // 支持 Boolean、Number 等丰富类型
console.log(params.toString()); // k=%E5%85%B3%E9%94%AE%E5%AD%97&p=1
5、解析搜索字符串
const params = new URLSearchParams('k=%E5%85%B3%E9%94%AE%E5%AD%97&p=1');
console.log(params.get('k')); // 返回字符串“关键字”，支持自动 UTF-8 解码
console.log(params.get('p')); // 返回字符串“1”
console.log(params.get('xxx')); // 如果没有 xxx 这个键，则返回 null
console.log(params.has('xxx')); // 当然也可以通过 has() 方法查询是否存在指定的键
console.log(params.keys()); // 返回一个 ES6 Iterator，内含 ['k', 'p']
console.log(params.values()); // 返一个 ES6 Iterator，内含 ['关键字', '1']
console.log(params.entries()); // 与 Map.prototype.entries() 类似
6、URL 搜索参数列表
怎么样是不是无论生成还是解析都非常简单？而更妙的是它还完美支持 URL 搜索参数列表！
相信大家都有过不知该如何在 HTTP GET 参数中传递数组的经历，我看到过不少人使用的这种方式：http://example.com/search?brands=bmw,audi,mercedes，然后后端再去split()转为数组。
事实上这种方式是不够标准的，并且需要处理原本字符串中就包含“,”的情况，而在业界广为推荐的范式是这样的：http://example.com/search?brands=bmw&brands=audi&brands=mercedes
那么我们应该如何通过 URLSearchParams 来生成及解析这种标准参数形式呢？使用 append() 和 getAll() 方法就行：
let params = new URLSearchParams();
// 通过 append() 方法添加所有的选项值
params.append('brands', 'bmw');
params.append('brands', 'audi');
params.append('brands', 'mercedes');
const searchString = params.toString();
// 解析
params = new URLSearchParams(searchString);
console.log(params.getAll('brands')); // 返回一个数组 ['bmw', 'audi', 'mercedes']
