这篇文章主要讲解了“Node.js queryString解析和格式化网址查询字符串工具怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Node.js queryString解析和格式化网址查询字符串工具怎么使用”吧!
“解析 url 中的查询参数”是我们平常工作中经常遇到的问题。今天我安利一个解析和格式化网址查询字符串的实用工具:queryString,它是 Node.js v18.15.0 提供的一个模块,使用起来非常方便。
const querystring = require('node:querystring');
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解析和格式化网址查询字符串工具怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://juejin.cn/post/7221499035219132475