17370845950

本文详解 javascript 中打印菱形图案时出现歪斜的根本原因——html 默认忽略连续空格及字体非等宽问题，并提供基于 ` ` 和等宽字体的完整解决方案。

在 Web 环境中使用 document.write() 打印菱形图案时，即使逻辑正确，输出也常呈现“上宽下窄”或完全错位的 skewed 效果。这并非算法错误，而是 HTML 渲染机制与字体特性的双重影响所致。

? 根本原因分析

1. HTML 空格折叠（Whitespace Collapsing）：浏览器默认将多个连续普通空格（" "）、制表符或换行符合并为单个空格，导致用于对齐的缩进空格失效；
2. 字体非等宽（Proportional Font）：如 Arial、Times New Roman 等字体中，* 和空格宽度不一致，破坏视觉对齐；
3. *`document.write(" ", "")的副作用**：每次写入" "+""实际生成的是 `（开头多一个空格），且该空格仍受 HTML 折叠影响。

✅ 正确解决方案

✅ 使用   替代普通空格

 （Non-breaking Space）是 HTML 实体，不会被浏览器折叠，可确保每个空格独立生效：

function printDiamond(input) {
  if (typeof input === 'number' && input >= 1 && input <= 100) {
    // 上半部分（含中间行）
    for (let i = 1; i <= input; i++) {
      // 左侧缩进：input - i 个  
      for (let b = 1; b <= input - i; b++) {
        document.write(" ");
      }
      // 星号行：i 个 "* "（注意：每个星号后跟一个  ，但首星前无额外空格）
      for (let a = 1; a <= i; a++) {
        if (a === 1) {
          document.write("*");
        } else {
          document.write(" *");
        }
      }
      document.write("
");
    }

    // 下半部分（不含中间行）
    for (let i = input - 1; i >= 1; i--) {
      for (let b = 1; b <= input - i; b++) {
        document.write(" ");
      }
      for (let a = 1; a <= i; a++) {
        if (a === 1) {
          document.write("*");
        } else {
          document.write(" *");
        }
      }
      document.write("
");
    }
  }
}
printDiamond(5);

? 更简洁写法（推荐）：统一用 " *" 拼接，再用 .trim() 或 slice(6) 去掉首段冗余空格；但为清晰起见，上述示例采用条件判断，避免头部多余空格。

✅ 强制使用等宽字体（Monospace）

在 CSS 中设置容器使用等宽字体，确保 * 和   占据相同水平空间：

⚠️ 注意事项与最佳实践

• ❌ 避免 document.write(" ", "*")：普通空格无效，且易引入不可见的布局偏差；
• ✅ 统一使用   进行所有对齐操作（包括星号间间隔）；
• ✅ 添加输入校验：input >= 1 防止无效输入（原代码仅检查
• ? 不推荐在现代项目中使用 document.write()（会阻塞解析、无法在 DOM 加载后调用），生产环境建议改用 innerHTML 或 DOM 操作构建

   或  容器；

• ✨ 进阶优化：可将菱形生成为字符串再一次性写入，提升性能并便于测试：

function generateDiamond(input) {
  const lines = [];
  for (let i = 1; i <= input; i++) {
    const spaces = " ".repeat(input - i);
    const stars = "*".repeat(i).split('').join(" ");
    lines.push(spaces + stars);
  }
  for (let i = input - 1; i >= 1; i--) {
    const spaces = " ".repeat(input - i);
    const stars = "*".repeat(i).split('').join(" ");
    lines.push(spaces + stars);
  }
  return lines.join("
");
}

// 使用方式
document.body.innerHTML = generateDiamond(5);

通过结合   的语义可靠性与等宽字体的视觉一致性，即可稳定输出结构精准、左右对称的菱形图案。核心在于理解「HTML 渲染规则」与「前端排版原理」的协同作用——算法只是骨架，渲染细节才是成形的关键。