本文讲解 JavaScript 控制台中 console.log() 打印重复字符时被自动分组的问题，提供简洁高效的解决方案——使用 String.prototype.repeat() 一次性输出每行，确保三角形图案按预期分行显示。
本文讲解 javascript 控制台中 `console.log()` 打印重复字符时被自动分组的问题，提供简洁高效的解决方案——使用 `string.prototype.repeat()` 一次性输出每行，确保三角形图案按预期分行显示。
在 Chrome 等现代浏览器的开发者工具中，console.log() 默认会对连续、完全相同的日志条目进行自动折叠分组（例如显示为 21 #），这是为了提升日志可读性；但对初学者练习打印 ASCII 图案（如三角形）时，反而会破坏预期的视觉结构。
你原始代码的问题在于：内层循环每次调用 console.log("#") 都输出一个单独的 #，导致 15 次独立日志（第 1 行 1 个 #，第 2 行 2 个 #……共 15 个），而 Chrome 将它们识别为重复项并合并显示，无法形成“逐行递增”的三角形效果。
✅ 正确做法是：每行构造完整字符串后，仅调用一次 console.log()。利用 String.prototype.repeat() 方法可高效生成指定数量的重复字符：
for (let i = 1; i <p>运行结果将严格符合预期：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11815" title="CDP浏览器大师"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="CDP浏览器大师" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill11815" title="CDP浏览器大师" class="overflowclass">CDP浏览器大师</a> <p class="overflowclass">CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。</p> </div> <a rel="nofollow" href="/xiazai/skill11815" title="CDP浏览器大师" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div><pre class="brush:php;toolbar:false;"># ## ### #### #####
? 进阶提示：
- 若需右对齐三角形（如题图中带空格的版本），可结合空格填充：
for (let i = 1; i
- 避免依赖禁用「Group similar entries」设置——该选项仅影响显示方式，不改变日志语义，且在团队协作或不同环境（如 Node.js）中不可靠。
-
repeat()方法兼容性良好（支持 Chrome 41+、Firefox 24+、Safari 9+），无需额外 polyfill。
总结：打印图案的本质是按行构建字符串，而非逐字符输出。掌握 repeat()、模板字符串和单次 log() 的组合，是编写清晰、可维护控制台输出的基础实践。
