qs.js庫 使用方法


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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM