JavaScript金字塔星形图案在浏览器显示异常的问题咨询

问题核心原因 #

控制台会完整保留所有空格字符，但浏览器默认会合并多个连续空格为单个空格——这就是你添加了<br>实现换行，但缩进失效、图案变成直角的关键原因。

两种可行修复方案 #

方案1：用 替代普通空格 #

将代码中用于缩进的空格替换为HTML非换行空格实体 ，浏览器会保留这些空格的显示效果：

// 以5层金字塔为例的修复代码
let pyramidContent = '';
const totalRows = 5;

for (let i = 1; i <= totalRows; i++) {
  // 生成缩进用的非换行空格
  let indent = '';
  for (let j = totalRows - i; j > 0; j--) {
    indent += '&nbsp;';
  }
  // 生成当前行的星号
  let stars = '';
  for (let k = 1; k <= 2 * i - 1; k++) {
    stars += '*';
  }
  // 拼接每行内容并换行
  pyramidContent += indent + stars + '<br>';
}

// 将内容插入页面
document.body.innerHTML = pyramidContent;

方案2：用<pre>标签包裹输出内容 #

<pre>标签会完全保留文本中的空格、换行格式，和控制台的显示逻辑一致，无需修改空格代码：

let pyramidContent = '';
const totalRows = 5;

for (let i = 1; i <= totalRows; i++) {
  const indent = ' '.repeat(totalRows - i);
  const stars = '*'.repeat(2 * i - 1);
  pyramidContent += indent + stars + '\n';
}

// 用pre标签包裹后插入页面，还原控制台格式
document.body.innerHTML = `<pre>${pyramidContent}</pre>`;

额外提示 #

如果之前用document.write()输出内容，同样会遇到空格合并问题，建议改用上述两种方法之一。第二种方案更简洁，适合快速还原控制台的输出效果。

内容的提问来源于stack exchange，提问作者Khalid Nawaz