1、qs.js庫說明

qs是一個url參數轉化（parse和stringify）的js庫。

https://www.npmjs.com/package/qs

2、使用（以vue文件做示例）

（1）基本語法

<template>
    <div>
        qs.js
    </div>
</template>

<script>
    import qs from ‘qs‘
    import _ from ‘lodash‘
    export default {
        components: {},
        methods: {
            qs() {
                
 
var obj = qs.parse(‘a=b&c=d‘);
                //輸出true
                console.log(_.isEqual(obj, {
                    a: ‘b‘,
                    c: ‘d‘
                }))

                var str = qs.stringify(obj);
                //輸出true
                console.log(_.isEqual(str, ‘a=b&c=d‘));
            }
        },
        mounted() {
            
 
this.qs();
        }
    };
</script>

<style scoped>

</style>

（2）忽略符號?

<template>
<div>
qs.js
</div>
</template>

<script>
import qs from ‘qs‘
import _ from ‘lodash‘
export default {
components: {},
methods: {
qs() {
//忽略前面的？
var
 
 obj = qs.parse(‘?a=b&c=d‘, { ignoreQueryPrefix: true });
//輸出true
console.log(_.isEqual(obj, {
a: ‘b‘,
c: ‘d‘
}))

var str = qs.stringify(obj);
//輸出true
console.log(_.isEqual(str, ‘a=b&c=d‘));
}
},
mounted() {
this.qs();
}
};
</script>

<style scoped>

</style>

（3）stringify方法編碼

<template>

<div>
qs.js
</div>
</template>

<script>
import qs from ‘qs‘
import _ from ‘lodash‘
export default {
components: {},
methods: {
qs() {
//輸出a[b]=c
console.log(qs.stringify({
a: {
b: ‘c‘
}
}, {
encode: false
}))
}
},
mounted() {
this.qs();
}
};
</script>

<style scoped>

</style>

（4）qs 處理數組

<template>
<div>
qs.js
</div>
</template>

<script>
import qs from ‘qs‘
import _ from ‘lodash‘
export default {
components: {},
methods: {
qs() {
//輸出 ‘a%5B0%5D=b&a%5B1%5D=c&a%5B2%5D=d‘
console.log(qs.stringify({
a: [‘b‘, ‘c‘, ‘d‘]
}))
//輸出 a[0]=b&a[1]=c&a[2]=d
console.log(qs.stringify({
a: [‘b‘, ‘c‘, ‘d‘]
}, {
encode: false
}))
//輸出 ‘a=b&a=c&a=d‘
console.log(qs.stringify({
a: [‘b‘, ‘c‘, ‘d‘]
}, {
indices: false
}))
}
},
mounted() {
this.qs();
}
};
</script>

<style scoped>

</style>

qs.js庫 使用方法