query-string 和 qs 包对比

一、安装

npm i -S query-string
npm i -S qs

二、相同点

query-string 和 qs 都是用来把对象转成查询字符串或者把查询字符串转成对象用的，都有 parse 和 stringify 方法。两者大致能实现的效果是一样的，不同的是，query-string 更适合URL查询参数处理，qs能解析嵌套对象，而 query-string 则不行。axios 的 post 请求参数转字符串用的就是 qs 插件。

三、几个常用API的对比

1. parse 方法

import queryString from 'query-string';
import qs from 'qs';

let str = 'person[name][age]=22';
location.search  // ?name=jim
location.hash  // #token=123

queryString.parse('?name=jim')  // {name: 'jim'}
qs.parse('?name=jim')  // {?name: 'jim'} 去掉问号要加参数

queryString.parse('#token=123')  // {token: '123'}
qs.parse('#token=123')  // {#token: '123'}

queryString.parse(str); // {person[name][age]: "22"}
qs.parse(str);
{
  person: {
    name: {
      age: 22
    }
  }
}

2. stringify 方法

let obj1 = {name: 'jim', age: 22};
let obj2 = {name: ['jim', 'lily'], age: 22};

queryString.stringify(obj1); // 'age=22&name=jim'
qs.stringify(obj1); // 'age=22&name=jim'

queryString.stringify(obj2); // "age=22&name=jim&name=lily"
qs.stringify(obj2); // "name%5B0%5D=jim&name%5B1%5D=lily&age=22"


四、query-string 的其他功能

1. queryString.parse(string, [options])

字符串转成对象。

options是一个 Object，可选值：

• decode：会用 decode-uri-component 解码 key 和 value
• arrayFormat：这个参数还有很多种情况，查看详情

queryString.parse('name=jim&name=lily&age=22')  
// {name: ['jim', 'lily'], age: 22} 

• parseNumbers: value 是否转成数字类型

queryString.parse('foo=1', {parseNumbers: true});
//=> {foo: 1}

• parseBooleans: value 是否转成布尔类型

queryString.parse('foo=true', {parseBooleans: true});
//=> {foo: true}

2. queryString.stringify(object, [options])

对象转成字符串（值为 undefined 的字段会被删除）。

options是一个 Object，可选值：

• encode：是否对 key 和 value 进行编码。默认 true
• arrayFormat：这个参数还有很多种情况

queryString.stringify({name: ['jim', 'lily'], age: 22});  
// 'age=22&name=jim&name=lily'

• sort

• skipNull

• skipEmptyString

3. queryString.parseUrl(string, [options])

qs.parseUrl('http://www.baidu.com?name=jim');
// {url: 'http://www.baidu.com', query: {name: 'jim'}}

原生 <a> 元素解析 url

function parseUrl(url) {
    let a = document.createElement('a');
    a.href = url;
    return {
        host: a.hostname,
        port: a.port,
        query: a.search,
        hash: a.hash.replace('#', ''),
        params: (() => {
            let searchArr = a.search.replace(/^\?/, '').split('&');
            let params = {};
            searchArr.forEach(item => {
                let [key, value] = item.split('=');
                params[key] = value;
            });
            return params;
        })()
    }
}