qs庫使用指南

qs是一個流行的查詢參數序列化和解析庫。能夠將一個普通的object序列化成一個查詢字符串，或者反過來將一個查詢字符串解析成一個object，並且支持複雜的嵌套。它上手很容易：

Qs.parse('x[]=1') // {x: ['1']}
Qs.stringify({x: [1]}) // x%5B0%5D=1

qs的兩個方法都接受一個可選的第二參數，可讓咱們對結果進行配置，我的以爲比較有用的有如下幾個：

ignoreQueryPrefix和addQueryPrefix

ignoreQueryPrefix這個參數能夠自動幫咱們過濾掉location.search前面的❓，而後再解析，addQueryPrefix設爲true能夠在序列化的時候給咱們加上?

// 解析
Qs.parse('?x=1') // {?x: "1"}
Qs.parse('?x=1', {ignoreQueryPrefix: true}) //  {x: "1"}

// 序列化
Qs.stringify({x: "1"}) //  x=1
Qs.parse({x: "1"}, {addQueryPrefix: true}) //  ?x=1

數組解析和序列化

數組序列化有幾種方式：indices, brackets, repeat, comma，用來控制字符串的生成格式。來看下面的例子：

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 'a=b,c'

上面的四種方式，序列化獲得的結果愈來愈精簡，可是當面對嵌套數組時，卻會致使不一樣程度的信息丟失，並且丟失的愈來愈嚴重。以四種方式對{ a: [['b'], 'c'] } stringify 再 parse爲例：

qs.parse(qs.stringify({ a: [['b'], 'c'] }, { arrayFormat: 'indices' })) // { a: [['b'], 'c'] }
qs.parse(qs.stringify({ a: [['b'], 'c'] }, { arrayFormat: 'brackets' })) // {a: ["b", "c"]}
qs.parse(qs.stringify({ a: [['b'], 'c'] }, { arrayFormat: 'repeat' })) // {a: ["b", "c"]}
qs.parse(qs.stringify({ a: [['b'], 'c'] }, { arrayFormat: 'comma' })) // {a: "b,c"}

因此當數據裏有嵌套時最好使用indices模式，好在這也是默認模式。

delimiter

delimiter能夠控制將哪一種字符做爲分隔符，因爲cookie的格式是使用;來分隔，一個有用的例子是用來解析<span style="color:#ff40ff">cookie</span>：

document.cookie // "_ga=GA1.2.806176131.1570244607; _jsuid=1335121594; _gid=GA1.2.1453554609.1575990858"
Qs.parse(document.cookie, {delimiter:'; '})

數字類型的解析

正如咱們在第一個例子看到的那樣，咱們把一個數字序列化再還原，獲得的並非一個數字，而是一個字符串：

Qs.parse(Qs.stringify({x:1})) // {x: '1'}

若是但願解析出來依舊是數字，能夠參考這個issue,就是寫一個自定義decoder：

Qs.parse('x[0]=1', {
    decoder(str, defaultEncoder, charset, type) {
      if (/^(\d+|\d*\.\d+)$/.test(str)) {
        return parseFloat(str)
      }
      return str
    }
  })

或者再加上一個解析中文的功能:

if (/^%[A-Za-z0-9+/]/.test(str)) {
        return decodeURIComponent(str)
      }

本文完