使用 URLSearchParams 生成和解析参数字符串

2022-01-20 23:09:16
手工拼 URL 搜索字符串(URL Search String、Query String) ``` function getQueryString(api, param = {}) { let queryArr = [] for (let k in param) { queryArr.push(encodeURIComponent(k) + '=' + encodeURIComponent(param[k])) } let queryStr = '' if (queryArr.length > 0) { const mark = api.indexOf('?') >= 0 ? '&' : '?' queryStr = mark + queryArr.join('&') } return queryStr } ``` 现在浏览器提供 URLSearchParams ``` // 如果需要支持较低版本的 PC 浏览器,需要额外安装和引用 polyfill: // $ npm install --save url-search-params // import URLSearchParams from 'url-search-params'; const urlSearchParams = new URLSearchParams(); ``` Node.js ``` const { URLSearchParams } = require('url'); const urlSearchParams = new URLSearchParams(); ``` ``` /*const params = new URLSearchParams(); params.set('name', 'foo?bar'); params.set('age', 18); console.log(params.toString());*/ // 解析搜索字符串 /*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() 类似 */ /* // search?brands=bmw&brands=audi&brands=mercedes let params = new URLSearchParams(); 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'] */ ```