Node.js queryString 解析和格式化網址查詢字符串工具使用
前言
“解析 url 中的查詢參數”是我們平常工作中經常遇到的問題。今天我安利一個解析和格式化網址查詢字符串的實用工具:queryString,它是 Node.js v18.15.0 提供的一個模塊,使用起來非常方便。
querystring 的使用
const querystring = require('node:querystring');
querystring 官網提供的 API
- querystring.decode()
- querystring.encode()
- querystring.escape(str)
- querystring.parse(str[, sep[, eq[, options]]])
- querystring.stringify(obj[, sep[, eq[, options]]])
- querystring.unescape(str)
例如:我們需要解析如下 url 中的參數:
url: https://juejin.cn/column/7218749269896970299?name=webharry&callback=https%3A%2F%2Fgithub.com%2Fwebharry%2Ffe-interview&list%5B%5D%3Da%26list%5B%5D%3Db%26json%3D%7B%22str%22%3A%22abc%22%2C%22num%22%3A123%7D
期望輸出的格式為一個對象:
{ name: "webharry", callback: "https://github.com/webharry/fe-interview", list: ["a","b"], sub: { str: 'abc', num: 123 } }
沒接觸到 queryString 前,我們試著用代碼來解決這個問題。 首先,我們對這道題目進行分析:
url 中含有的 queryString,看看有哪些坑(考)點?
- 1.callback 參數值是一個網址,需要使用
decodeURIComponent()
解密。 - 2.list 是一個數組,需要特殊處理。
- 3.sub 是一個對象,對象含有兩對鍵值對,需要特殊處理。
思考完以上問題後,我們開始動手寫代碼,完整代碼如下:
// 1.首先使用 **`decodeURIComponent()`** 方法對 url 進行解密: // 2.先使用 split('?') 方法獲取 URL 問號後面的查詢參數,再使用 ‘&' 符號分割,得到查詢參數數組。 let queryStr = decodeURIComponent(url)?.split('?')[1]?.split('&') /** 輸出一個新數組 * ["name=webharry", "callback=https://github.com/webharry/fe-interview", "list[]=a", "list[]=b", "json={\"str\":\"abc\",\"num\":123}']"] */ // 3.依次遍歷 queryStr 數組,針對每種數據類型進行處理,輸出最終結果。 let obj = {} queryStr.forEach(item => { let [k, v] = item.split('=') let arr = [] if(k.includes('[]')) { k = k.replace('[]', '') if(!obj[k]) { arr.concat([v]) v = arr.concat([v]) }else { arr.push(v) v = arr } console.log(1, v) }else if (v.indexOf('{') === 0) { console.log(2, v) v = JSON.parse(v) } obj[k] = v console.log(3, obj) }) console.log(obj) // 輸出結果: {name: 'webharry', callback: 'https://github.com/webharry/fe-interview', list: ['b'], json: {str: 'abc', num: 123}}
認真看代碼的老鐵會立馬跳出來,說這個代碼有個錯誤點,那就是數組 list 處理沒有得到預期結果。沒錯,我們繼續絞盡腦汁來改正它。
其實,要什麼自行車🚴?!!
我們可以使用 querystring.parse() 方法解決以上問題。隻需要一行代碼。查詢字符串 'name=webharry&callback=https%3A%2F%2Fgithub.com%2Fwebharry%2Ffe-interview&list%5B%5D%3Da%26list%5B%5D%3Db%26json%3D%7B%22str%22%3A%22abc%22%2C%22num%22%3A123%7D'
被解析為:
querystring.parse('name=webharry&callback=https%3A%2F%2Fgithub.com%2Fwebharry%2Ffe-interview&list%5B%5D%3Da%26list%5B%5D%3Db%26json%3D%7B%22str%22%3A%22abc%22%2C%22num%22%3A123%7D')
輸出結果;
{
name: "webharry",
callback: "https://github.com/webharry/fe-interview",
list: ["a","b"],
sub: {
str: 'abc',
num: 123
}
}
我們看下 querystring 源碼:
var stringifyPrimitive = function(v) { switch (typeof v) { case 'string': return v; case 'boolean': return v ? 'true' : 'false'; case 'number': return isFinite(v) ? v : ''; default: return ''; } }; module.exports = function(obj, sep, eq, name) { sep = sep || '&'; eq = eq || '='; if (obj === null) { obj = undefined; } if (typeof obj === 'object') { return Object.keys(obj).map(function(k) { var ks = encodeURIComponent(stringifyPrimitive(k)) + eq; if (Array.isArray(obj[k])) { return obj[k].map(function(v) { return ks + encodeURIComponent(stringifyPrimitive(v)); }).join(sep); } else { return ks + encodeURIComponent(stringifyPrimitive(obj[k])); } }).filter(Boolean).join(sep); } if (!name) return ''; return encodeURIComponent(stringifyPrimitive(name)) + eq + encodeURIComponent(stringifyPrimitive(obj)); };
從中,我們可以學到幾個知識點:
1、isFinite 方法判斷一個數字是否是有限數。有限數返回 true ,否則返回 false 。
2、stringifyPrimitive(k) 方法處理 query 中的 key 值,隻保留以下幾種數據類型:string 、boolean 、number,否則將被處理為空字符串返回。可以防止一些不合法的 key 值出現。
以上就是Node.js queryString 解析和格式化網址查詢字符串工具使用的詳細內容,更多關於Node.js queryString工具的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- Node.js前後端交互實現用戶登陸的實踐
- JS前端認證授權技巧歸納總結
- Vue3如何根據搜索框內容跳轉至本頁面指定位置
- Node.js的路由、EJS模板引擎、GET和POST請求講解
- JS數組reduce你不得不知道的25個高級用法