
深入解析console.log输出差异
本文分析console.log打印同一变量却产生不同输出结果的原因,并针对具体案例进行详细解读。
问题描述:
代码片段中,两次使用console.log打印变量redirectKey,输出结果却不同。第一次console.log(2, redirectKey)输出2 'banklist\\n',第二次console.log(redirectKey)输出banklist。
代码分析:
关键在于redirectKey的值及其处理方式。代码从URL参数中获取redirectKey,其值为banklist%0a,其中%0a是URL编码的换行符(\n)。
function getUrlParams(url) {
const searchParams = new URLSearchParams(url);
const params = {};
for (let param of searchParams.entries()) {
params[param[0]] = param[1];
}
return params;
}
let url = 'https://baidu.com/abcd/index.html?appid=aabbcc&redirectKey=bankList%0A&citycode=00100';
url = url.split("?");
const { redirectKey } = getUrlParams(url[1]);
console.log(2, redirectKey); // 2 'banklist\\n'
console.log(redirectKey); // banklist
第一个console.log(2, redirectKey)使用了多个参数。console.log会逐个输出参数,并对字符串进行转义,因此显示\n。
第二个console.log(redirectKey)直接打印redirectKey。浏览器会自动解码%0a为换行符\n。然而,这个换行符在控制台中可能不会显示为实际的换行,而是被浏览器处理,只显示banklist。
\n仍然存在于redirectKey变量中,只是显示方式不同。第一个输出中,\n被转义显示为\\n;第二个输出中,浏览器处理了\n,但并未在控制台中换行,因此只显示了banklist。仔细观察控制台,第一个输出的banklist后可能存在一个不可见的换行符。
因此,输出差异源于console.log参数个数和浏览器对\n的处理方式不同。 多参数情况下,console.log会进行转义输出;单参数情况下,浏览器会先解码URL编码,再进行显示,但换行符的实际显示效果取决于浏览器控制台的实现。











