npm包之query-string

安裝

npm i --save-dev query-string

常用API 

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

import qs from 'query-string';
 
location.search  // ?name=jim
location.hash  // #token=123
qs.parse('?name=jim')  // {name: 'jim'}
qs.parse('#token=123')  // {token: '123'}
qs.parse('name=jim&name=lily&age=22')  // {name: ['jim', 'lily'], age: 22}

options是一個 Object，可選值：decode，arrayFormat。查看詳情

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

import qs from 'query-string';
 
qs.stringify({name: 'jim', age: 22});  // 'age=22&name=jim'
qs.stringify({name: ['jim', 'lily'], age: 22});  // 'age=22&name=jim&name=lily'

options是一個 Object，可選值：strict，encode，arrayFormat，sort。

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

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

用 a 鏈接解析 url

這是不用第三方庫的時候解析 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;
        })()
    }
}