Qs 和 Querystring：解析和格式化 URL query 字符串的工具庫
今天介紹兩個庫 qs、querystring，但是作用一樣，都是用來解析和格式化 URL query 字符串（URL query string）的工具庫。
背景
在學習 express 的中間件 body-parser 的文檔[1]時，bodyParser.urlencoded([options]) 的 options 參數有一個 extended 參數，是個布爾值。
// 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 內部在解析 URL query 字符串時，內部使用哪個工具庫：
- 為 false 時，body-parser 內部使用的是 querystring（只支持單層對象和數組的解析）
- 為 true 時，body-parser 內部使用的是 qs（能支持嵌套對象和數組的解析）
extended 默認值雖然為 true，但這個默認值已被棄用了。我們需要學習 qs 和 querystring 之間的區別并選擇適當的進行設置。
我們下面就分別來學習。
querystring
querystring 開始是一個三方工具庫，后面內置到了 Node.js 中[2]，querystring 支持單層對象和數組的解析和格式化
你可以通過下列方式引用 querystring：
const querystring = require('node:querystring');querystring 提供的核心方法就 2 個：.parse() 和 .stringify() 有點類似與 JSON.parse()/JSON.stringify()。
querystring.parse()
.parse() 用來將 URL query 字符串轉換成對象和數組。
const querystring = require('node:querystring');
querystring.parse('foo=bar&abc=xyz') // { foo: 'bar', abc: 'xyz' }URL query 字符串中，鍵值對采用 = 連接，每個鍵值對之間采用 & 連接。
如果 URL query 字符串包含一樣的鍵名，那么會作為數組解析。
const querystring = require('node:querystring');
querystring.parse('foo=bar&abc=xyz&abc=123')
/*
{
"foo": "bar",
"abc": ["xyz", "123"]
}
*/.parse() 方法的完整語法是：querystring.parse(str[, sep[, eq[, options]]]) 。
- 第 2 個參數 sep 用于控制鍵值對之間的間隔，默認值 '&'
- 第 3 個參數 eq 用于控制鍵值之間的間隔，默認值 '='
const querystring = require('node:querystring');
querystring.parse('foo:bar;abc:xyz;abc:123', ';', ':')
/*
{
"foo": "bar",
"abc": ["xyz", "123"]
}
*/querystring.stringify()
.stringify() 用來將對象或數組轉換成 URL query 字符串，是 .parse() 方法的逆向操作。
querystring.stringify({ foo: 'bar', baz: ['qux', 'quux'], corge: '' });
// Returns 'foo=bar&baz=qux&baz=quux&corge='.stringify() 方法的完整語法是：querystring.stringify(obj[, sep[, eq[, options]]])。
- 第 2 個參數 sep 用于控制鍵值對之間的間隔，默認值 '&'
- 第 3 個參數 eq 用于控制鍵值之間的間隔，默認值 '='
querystring.stringify({ foo: 'bar', baz: ['qux', 'quux'], corge: '' }, ';', ':');
// Returns 'foo:bar;baz:qux;baz:quux;corge:'qs
qs[3] 是對 querystring 工具庫的擴展，能支持嵌套對象和數組的解析和格式化。
qs.parse()
.parse() 用來將 URL query 字符串轉換成對象和數組·。
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'] }可以發現，qs.parse() 對數組的解析是兼容 querystring.parse() 的，還可以在鍵中使用 [] 指定顯式指定是數組。
此外，qs.parse() 還支持嵌套對象的解析。
qs.parse('foo[bar]=baz')
/*
{
foo: {
bar: 'baz'
}
}
*/
qs.parse('foo[bar][baz]=foobarbaz')
/*
{
foo: {
bar: {
baz: 'foobarbaz'
}
}
}
*/鍵部分，[nestedProp] 中的 nestdProp 會被看作嵌套屬性解析。
不過為了減少這個功能的濫用，qs.parse() 默認設置了 5 層的深度限制，可以通過 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 嵌套屬性語法跟數組語法是重復的。數組中的索引和對象中的鍵之間的唯一區別是括號之間的值必須是數字才能創建數組，否則就是對象。
qs.parse('a[1]=c&a[0]=b') // { a: ['b', 'c'] }
qs.parse('foo[bar]=baz') // { foo: { bar: 'baz' } }不過為了減少這個功能的濫用，qs.parse() 默認將數組中指定的索引值限制到最大 20 ，任何索引大于 20 的索引都會作為對象屬性使用?？梢酝ㄟ^ arrayLimit option 重置。
qs.parse('a[100]=b') // { a: { '100': 'b' } }
qs.parse('a[1]=b', { arrayLimit: 0 }) // { a: { '1': 'b' } }qs.stringify()
qs.stringify() 用來將對象或數組轉換成 URL query 字符串，是 qs.parse() 方法的逆向操作。
qs.stringify({ a: 'b' }) // 'a=b'
qs.stringify({ a: { b: 'c' } }) // 'a%5Bb%5D=c'字符串化時，qs 默認對 URI 進行編碼輸出。當然，也可以通過指定 encode option 設置成 false 指定不用編碼。
qs.stringify({ a: { b: 'c' } }, { encode: false }) // a[b]=c還有字符串化數組。
qs.stringify({ a: ['b', 'c', 'd'] })
// 'a[0]=b&a[1]=c&a[2]=d'注意，這里跟 querystring.stringify() 不同的是，數組默認會賦予索引標識（[]），可以通過將 indices option 設置為 false 來覆蓋此設置。
qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false })
// 'a=b&a=c&a=d'delimiter 選項參數
qs.stringify()/qs.parse() 還支持通過 delimiter 選項參數自定義鍵值對分隔符。
qs.parse('a=b;c=d', { delimiter: ';' }) // { a: 'b', c: 'd' }不過，目前并不支持自定義鍵值之間的分隔符。
總結
本文介紹了兩個庫：qs 和 querystring。他們作用是一樣的，都是用來解析和格式化 URL query 字符串的工具庫。
qs 是對 querystring 工具庫的擴展。querystring 支持單層對象和數組的解析和格式化；而 qs 則能支持嵌套對象和數組的解析和格式化。如果 URL query 字符串不是那種嵌套結構，那么使用 Node.js 內置的 querystring 模塊就夠了。
對應到 express 的 body-parser 中間件的使用，那就是在調用 bodyParser.urlencoded() 時，extended 選項設置成 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)
})希望本文內容對你有所幫助，感謝閱讀，Happing Coding！
參考資料
[1]body-parser 的文檔:https://www.npmjs.com/package/body-parser#body-parser
[2]內置到了 Node.js 中:https://nodejs.org/api/querystring.html
[3]qs:https://www.npmjs.com/package/qs
