qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。
最近在React 项目中,用到npm 的qs模块的parse函数,用于获取url参数及解析&拼接的数据,再此过程中遇到参数中“+”丢失的问题。
查看qs 模块的使用示例后发现(https://www.npmjs.com/package/qs), qs.parse()函数默认会进行 URI 编码解析,如果这种解码方式与之前数据编码方式不同就会有问题,同时解码会将“+”变成空格。这个同浏览器有点类似,当我们在url中传递的参数带有加号+,会被浏览器转换成空格,这样会导致后台获取到无效的参数。所以我们希望采用encodeURIComponent()进行编码,并且采用decodeURIComponent()进行解码,这就需要我们在使用qs时指定编码方式。
编码示例如下:
var encoded = qs.stringify({ a: { b: 'c' } }, { encoder: function (str, defaultEncoder, charset, type) {
if (type === 'key') {
return str; // 对于key值不进行编码
} else if (type === 'value') {
return decodeURIComponent(str);// Encoded value
}
}})
解码示例如下:
var decoded = qs.parse('x=AA+&y=AA-', { decoder: function (str, defaultEncoder, charset, type) {
if (type === 'key') {
return str;
} else if (type === 'value') {
return encodeURIComponent(str);
}
}})
如果不需要进行编码和解码操作,可以不进行编码:
var strObj = qs.parse('key=x=AA+&y=AA-', { decoder: str => str }