今天介紹兩個(gè)庫(kù) qs、querystring，但是作用一樣，都是用來(lái)解析和格式化 URL query 字符串（URL query string）的工具庫(kù)。

背景

在學(xué)習(xí) express 的中間件 body-parser 的文檔[1]時(shí)，bodyParser.urlencoded([options]) 的 options 參數(shù)有一個(gè) extended 參數(shù)，是個(gè)布爾值。

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }))

extended 控制 body-parser 內(nèi)部在解析  URL query 字符串時(shí)，內(nèi)部使用哪個(gè)工具庫(kù)：

• 為 false 時(shí)，body-parser 內(nèi)部使用的是 querystring（只支持單層對(duì)象和數(shù)組的解析）
• 為 true 時(shí)，body-parser 內(nèi)部使用的是 qs（能支持嵌套對(duì)象和數(shù)組的解析）

extended 默認(rèn)值雖然為 true，但這個(gè)默認(rèn)值已被棄用了。我們需要學(xué)習(xí) qs 和 querystring 之間的區(qū)別并選擇適當(dāng)?shù)倪M(jìn)行設(shè)置。

我們下面就分別來(lái)學(xué)習(xí)。

querystring

querystring 開(kāi)始是一個(gè)三方工具庫(kù)，后面內(nèi)置到了 Node.js 中[2]，querystring 支持單層對(duì)象和數(shù)組的解析和格式化

你可以通過(guò)下列方式引用 querystring：

const querystring = require('node:querystring');

querystring 提供的核心方法就 2 個(gè)：.parse() 和 .stringify() 有點(diǎn)類(lèi)似與 JSON.parse()/JSON.stringify()。

querystring.parse()

.parse() 用來(lái)將 URL query 字符串轉(zhuǎn)換成對(duì)象和數(shù)組。

const querystring = require('node:querystring'); 

querystring.parse('foo=bar&abc=xyz') // { foo: 'bar', abc: 'xyz'  }

URL query 字符串中，鍵值對(duì)采用 = 連接，每個(gè)鍵值對(duì)之間采用 & 連接。

如果 URL query 字符串包含一樣的鍵名，那么會(huì)作為數(shù)組解析。

const querystring = require('node:querystring'); 

querystring.parse('foo=bar&abc=xyz&abc=123')
/*
{
  "foo": "bar",
  "abc": ["xyz", "123"]
}
*/

.parse() 方法的完整語(yǔ)法是：querystring.parse(str[, sep[, eq[, options]]]) 。

• 第 2 個(gè)參數(shù) sep 用于控制鍵值對(duì)之間的間隔，默認(rèn)值 '&'
• 第 3 個(gè)參數(shù) eq 用于控制鍵值之間的間隔，默認(rèn)值 '='

const querystring = require('node:querystring'); 

querystring.parse('foo:bar;abc:xyz;abc:123', ';', ':')
/*
{
  "foo": "bar",
  "abc": ["xyz", "123"]
}
*/

querystring.stringify()

.stringify() 用來(lái)將對(duì)象或數(shù)組轉(zhuǎn)換成 URL query 字符串，是 .parse() 方法的逆向操作。

querystring.stringify({ foo: 'bar', baz: ['qux', 'quux'], corge: '' });
// Returns 'foo=bar&baz=qux&baz=quux&corge='

.stringify() 方法的完整語(yǔ)法是：querystring.stringify(obj[, sep[, eq[, options]]])。

• 第 2 個(gè)參數(shù) sep 用于控制鍵值對(duì)之間的間隔，默認(rèn)值 '&'
• 第 3 個(gè)參數(shù) eq 用于控制鍵值之間的間隔，默認(rèn)值 '='

querystring.stringify({ foo: 'bar', baz: ['qux', 'quux'], corge: '' }, ';', ':');
// Returns 'foo:bar;baz:qux;baz:quux;corge:'

qs

qs[3] 是對(duì) querystring 工具庫(kù)的擴(kuò)展，能支持嵌套對(duì)象和數(shù)組的解析和格式化。

qs.parse()

.parse() 用來(lái)將 URL query 字符串轉(zhuǎn)換成對(duì)象和數(shù)組·。

var qs = require('qs');

qs.parse('foo=bar&abc=xyz') // { foo: 'bar', abc: 'xyz'  }

qs.parse('a=b&a=c') // { a: ['b', 'c'] }
qs.parse('a[]=b&a[]=c') // { a: ['b', 'c'] }

可以發(fā)現(xiàn)，qs.parse() 對(duì)數(shù)組的解析是兼容 querystring.parse() 的，還可以在鍵中使用 [] 指定顯式指定是數(shù)組。

此外，qs.parse() 還支持嵌套對(duì)象的解析。

qs.parse('foo[bar]=baz')
/*
{
    foo: {
        bar: 'baz'
    }
}
*/

qs.parse('foo[bar][baz]=foobarbaz')
/*
{
    foo: {
        bar: {
            baz: 'foobarbaz'
        }
    }
}
*/

鍵部分，[nestedProp] 中的 nestdProp 會(huì)被看作嵌套屬性解析。

不過(guò)為了減少這個(gè)功能的濫用，qs.parse() 默認(rèn)設(shè)置了 5 層的深度限制，可以通過(guò) depth option 重置。

qs.parse('a[b][c][d][e][f][g][h][i]=j')
/*
{
    a: {
        b: {
            c: {
                d: {
                    e: {
                        f: {
                            '[g][h][i]': 'j'
                        }
                    }
                }
            }
        }
    }
}
*/

qs.parse('a[b][c][d][e][f][g][h][i]=j', { depth: 1 })
/*
{ a: { b: { '[c][d][e][f][g][h][i]': 'j' } } }
*/

qs 嵌套屬性語(yǔ)法跟數(shù)組語(yǔ)法是重復(fù)的。數(shù)組中的索引和對(duì)象中的鍵之間的唯一區(qū)別是括號(hào)之間的值必須是數(shù)字才能創(chuàng)建數(shù)組，否則就是對(duì)象。

qs.parse('a[1]=c&a[0]=b') // { a: ['b', 'c'] }
qs.parse('foo[bar]=baz') // { foo: { bar: 'baz' } }

不過(guò)為了減少這個(gè)功能的濫用，qs.parse() 默認(rèn)將數(shù)組中指定的索引值限制到最大 20 ，任何索引大于 20 的索引都會(huì)作為對(duì)象屬性使用?？梢酝ㄟ^(guò) arrayLimit option 重置。

qs.parse('a[100]=b') // { a: { '100': 'b' } }
qs.parse('a[1]=b', { arrayLimit: 0 }) // { a: { '1': 'b' } }

qs.stringify()

qs.stringify() 用來(lái)將對(duì)象或數(shù)組轉(zhuǎn)換成 URL query 字符串，是 qs.parse() 方法的逆向操作。

qs.stringify({ a: 'b' }) // 'a=b'
qs.stringify({ a: { b: 'c' } }) // 'a%5Bb%5D=c'

字符串化時(shí)，qs 默認(rèn)對(duì) URI 進(jìn)行編碼輸出。當(dāng)然，也可以通過(guò)指定 encode option 設(shè)置成 false 指定不用編碼。

qs.stringify({ a: { b: 'c' } }, { encode: false }) // a[b]=c

還有字符串化數(shù)組。

qs.stringify({ a: ['b', 'c', 'd'] }) 
// 'a[0]=b&a[1]=c&a[2]=d'

注意，這里跟 querystring.stringify() 不同的是，數(shù)組默認(rèn)會(huì)賦予索引標(biāo)識(shí)（[]），可以通過(guò)將 indices option 設(shè)置為 false 來(lái)覆蓋此設(shè)置。

qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false })
// 'a=b&a=c&a=d'

delimiter 選項(xiàng)參數(shù)

qs.stringify()/qs.parse() 還支持通過(guò) delimiter 選項(xiàng)參數(shù)自定義鍵值對(duì)分隔符。

qs.parse('a=b;c=d', { delimiter: ';' }) // { a: 'b', c: 'd' }

不過(guò)，目前并不支持自定義鍵值之間的分隔符。

總結(jié)

本文介紹了兩個(gè)庫(kù)：qs 和 querystring。他們作用是一樣的，都是用來(lái)解析和格式化 URL query 字符串的工具庫(kù)。

qs 是對(duì) querystring 工具庫(kù)的擴(kuò)展。querystring 支持單層對(duì)象和數(shù)組的解析和格式化；而 qs 則能支持嵌套對(duì)象和數(shù)組的解析和格式化。如果 URL query 字符串不是那種嵌套結(jié)構(gòu)，那么使用 Node.js 內(nèi)置的 querystring 模塊就夠了。

對(duì)應(yīng)到 express 的 body-parser 中間件的使用，那就是在調(diào)用 bodyParser.urlencoded() 時(shí)，extended 選項(xiàng)設(shè)置成 false 就夠了。

// express v4.16.0 之前
// ===

var express = require('express')
var bodyParser = require('body-parser')

var app = express()

// create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })

// POST /login gets urlencoded bodies
app.post('/login', urlencodedParser, function (req, res) {
  res.send('welcome, ' + req.body.username)
})

// express v4.16.0 之后（包含）
// ===

var express = require('express')

var app = express()

// create application/x-www-form-urlencoded parser
var urlencodedParser = express.urlencoded({ extended: false })

// POST /login gets urlencoded bodies
app.post('/login', urlencodedParser, function (req, res) {
  res.send('welcome, ' + req.body.username)
})

希望本文內(nèi)容對(duì)你有所幫助，感謝閱讀，Happing Coding！

參考資料

[1]body-parser 的文檔:https://www.npmjs.com/package/body-parser#body-parser

[2]內(nèi)置到了 Node.js 中:https://nodejs.org/api/querystring.html

[3]qs:https://www.npmjs.com/package/qs