深入解析console.log输出差异
本文分析console.log打印同一变量却产生不同输出结果的原因，并针对具体案例进行详细解读。
问题描述：
代码片段中，两次使用console.log打印变量redirectKey，输出结果却不同。第一次console.log(2, redirectKey)输出2 'banklistn'，第二次console.log(redirectKey)输出banklist。
代码分析：
关键在于redirectKey的值及其处理方式。代码从URL参数中获取redirectKey，其值为banklist%0a，其中%0a是URL编码的换行符()。
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 'banklistn'console.log(redirectKey); // banklist
第一个console.log(2, redirectKey)使用了多个参数。console.log会逐个输出参数，并对字符串进行转义，因此显示。
第二个console.log(redirectKey)直接打印redirectKey。浏览器会自动解码%0a为换行符。然而，这个换行符在控制台中可能不会显示为实际的换行，而是被浏览器处理，只显示banklist。
仍然存在于redirectKey变量中，只是显示方式不同。第一个输出中，被转义显示为n；第二个输出中，浏览器处理了，但并未在控制台中换行，因此只显示了banklist。仔细观察控制台，第一个输出的banklist后可能存在一个不可见的换行符。
因此，输出差异源于console.log参数个数和浏览器对的处理方式不同。 多参数情况下，console.log会进行转义输出；单参数情况下，浏览器会先解码URL编码，再进行显示，但换行符的实际显示效果取决于浏览器控制台的实现。
以上就是console.log打印结果差异：同一个变量，为何输出不同？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1503210.html
微信扫一扫 
支付宝扫一扫 
