Node.js queryString 解析和格式化网址查询字符串工具使用

目录

• 前言
• querystring 的使用
• querystring 官网提供的 API

前言

“解析 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工具的资料请关注脚本之家其它相关文章！