快捷導(dǎo)航

Node.js?queryString?解析和格式化網(wǎng)址查詢字符串工具使用

更新時(shí)間：2023年04月14日 16:24:39 作者：前端小蜜蜂來(lái)也

這篇文章主要為大家介紹了Node.js?queryString?解析和格式化網(wǎng)址查詢字符串工具使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

“解析 url 中的查詢參數(shù)”是我們平常工作中經(jīng)常遇到的問(wèn)題。今天我安利一個(gè)解析和格式化網(wǎng)址查詢字符串的實(shí)用工具：queryString，它是 Node.js v18.15.0 提供的一個(gè)模塊，使用起來(lái)非常方便。

querystring 的使用

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

querystring 官網(wǎng)提供的 API

querystring.decode()
querystring.encode()
querystring.escape(str)
querystring.parse(str[, sep[, eq[, options]]])
querystring.stringify(obj[, sep[, eq[, options]]])
querystring.unescape(str)

例如:我們需要解析如下 url 中的參數(shù):

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

期望輸出的格式為一個(gè)對(duì)象：

 {
     name: "webharry",
     callback: "https://github.com/webharry/fe-interview",
     list: ["a","b"],
     sub: {
           str: 'abc',
           num: 123
     }
 }

沒(méi)接觸到 queryString 前，我們?cè)囍么a來(lái)解決這個(gè)問(wèn)題。首先，我們對(duì)這道題目進(jìn)行分析:

url 中含有的 queryString，看看有哪些坑（考）點(diǎn)？

1.callback 參數(shù)值是一個(gè)網(wǎng)址，需要使用 decodeURIComponent() 解密。
2.list 是一個(gè)數(shù)組，需要特殊處理。
3.sub 是一個(gè)對(duì)象，對(duì)象含有兩對(duì)鍵值對(duì)，需要特殊處理。

思考完以上問(wèn)題后，我們開(kāi)始動(dòng)手寫代碼，完整代碼如下:

// 1.首先使用 **`decodeURIComponent()`** 方法對(duì) url 進(jìn)行解密：
// 2.先使用 split('?') 方法獲取 URL 問(wèn)號(hào)后面的查詢參數(shù)，再使用 ‘&' 符號(hào)分割，得到查詢參數(shù)數(shù)組。
let queryStr = decodeURIComponent(url)?.split('?')[1]?.split('&')
/** 輸出一個(gè)新數(shù)組
* ["name=webharry", "callback=https://github.com/webharry/fe-interview", "list[]=a", "list[]=b", "json={\"str\":\"abc\",\"num\":123}']"]
*/
// 3.依次遍歷 queryStr 數(shù)組，針對(duì)每種數(shù)據(jù)類型進(jìn)行處理，輸出最終結(jié)果。
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)
// 輸出結(jié)果： {name: 'webharry', callback: 'https://github.com/webharry/fe-interview', list: ['b'], json: {str: 'abc', num: 123}}

認(rèn)真看代碼的老鐵會(huì)立馬跳出來(lái)，說(shuō)這個(gè)代碼有個(gè)錯(cuò)誤點(diǎn)，那就是數(shù)組 list 處理沒(méi)有得到預(yù)期結(jié)果。沒(méi)錯(cuò)，我們繼續(xù)絞盡腦汁來(lái)改正它。

其實(shí)，要什么自行車??？??！

我們可以使用 querystring.parse() 方法解決以上問(wèn)題。只需要一行代碼。查詢字符串 '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')

輸出結(jié)果;

{
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));
};

從中，我們可以學(xué)到幾個(gè)知識(shí)點(diǎn)：

1、isFinite 方法判斷一個(gè)數(shù)字是否是有限數(shù)。有限數(shù)返回 true ，否則返回 false 。

2、stringifyPrimitive(k) 方法處理 query 中的 key 值，只保留以下幾種數(shù)據(jù)類型：string 、boolean 、number，否則將被處理為空字符串返回?？梢苑乐挂恍┎缓戏ǖ?key 值出現(xiàn)。

以上就是Node.js queryString 解析和格式化網(wǎng)址查詢字符串工具使用的詳細(xì)內(nèi)容，更多關(guān)于Node.js queryString工具的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: