在开发小程序扫码功能时,一个简单的字符串截取操作却带来了意想不到的结果。本文记录了一次典型的调试经历,揭示字符串处理中那些容易被忽视的细节。
在开发充电桩小程序时,需要解析二维码内容。按照设计规范,二维码字符串的最后两位代表充电枪编号,前面部分为充电站编码。代码逻辑很简单:
const gunCode = scanRes.slice(-2); // 获取最后2位作为枪编码
const stationCode = scanRes.slice(0, -2); // 前面部分作为站编码
console.log(stationCode, "stationCode", gunCode);
预期结果是 "32010600019261" "stationCode" "12"
,但实际输出却是:
"320106000192611" "stationCode" "2"
gunCode 只截取到了 "2" 而不是 "12",这直接导致后续的业务逻辑无法正常工作。
首先通过详细调试来查看字符串的实际内容:
console.log("原始字符串:", JSON.stringify(scanRes));
console.log("字符串长度:", scanRes.length);
console.log("最后两个字符:", JSON.stringify(scanRes.slice(-2)));
// 字符级分析
console.log("字符分析:");
for(let i = 0; i < scanRes.length; i++) {
const char = scanRes[i];
console.log(`[${i}]: '${char}' (ASCII: ${char.charCodeAt(0)})`);
}
调试结果揭示了真相:字符串末尾存在一个不可见的换行符 \n
!
实际字符串是:"3201060001926112\n"
所以:
slice(-2)
截取到的是 "2\n"
"2"
这个问题典型地反映了字符串处理中常见的几类问题:
\n
、\r
)\t
)不同系统、不同工具生成的文本文件在行尾符上存在差异。
function parseScanResult(scanRes) {
// 去除首尾所有空白字符
const cleanStr = scanRes.trim();
const gunCode = cleanStr.slice(-2);
const stationCode = cleanStr.slice(0, -2);
console.log("清理后 stationCode:", stationCode, "gunCode:", gunCode);
return { stationCode, gunCode };
}
function parseScanResultStrict(scanRes) {
// 只保留数字字符
const numbersOnly = scanRes.replace(/\D/g, '');
if (numbersOnly.length < 2) {
throw new Error("有效数字长度不足,无法解析枪编码");
}
return {
stationCode: numbersOnly.slice(0, -2),
gunCode: numbersOnly.slice(-2)
};
}
function smartParse(scanRes) {
if (typeof scanRes !== 'string') {
throw new Error("输入必须为字符串");
}
// 多重清理
const cleanStr = scanRes
.trim() // 去除首尾空白
.replace(/\s+/g, '') // 去除所有空白字符
.replace(/\D/g, ''); // 只保留数字
if (cleanStr.length < 2) {
throw new Error(`清理后字符串长度不足: "${cleanStr}"`);
}
const result = {
stationCode: cleanStr.slice(0, -2),
gunCode: cleanStr.slice(-2)
};
// 验证结果
console.log(`解析结果: 站编码=${result.stationCode}, 枪编码=${result.gunCode}`);
return result;
}
// 使用 JSON.stringify 显示不可见字符
console.log(JSON.stringify(problematicString));
// 字符级调试
function debugString(str) {
return Array.from(str).map((char, index) =>
`[${index}]: '${char}' (U+${char.charCodeAt(0).toString(16).padStart(4, '0')})`
).join('\n');
}
您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。