如何用 JavaScript 正确打印居中对齐的菱形图案（含空格分隔）

本文详解 javascript 中打印菱形图案时出现错位的根本原因——html 空格折叠与字体非等宽问题，并提供基于 ` ` 和等宽字体的完整解决方案，确保菱形结构严格对称。

在 Web 环境中使用 document.write() 打印菱形图案时，常见的“菱形歪斜”问题并非逻辑错误，而是 html 渲染机制与字体特性共同导致的视觉偏差。核心原因有两个：

1. HTML 空格折叠（Whitespace Collapsing）：浏览器默认将连续的普通空格（” “）、制表符或换行符合并为单个空格，导致用于对齐的前置空格失效；
2. 字体非等宽（Proportional Font）：默认字体（如 Times New Roman、Segoe ui）中，空格字符宽度远小于 *，即使空格数量正确，视觉上也无法对齐。

✅ 正确解法是：统一使用  （不换行空格）替代普通空格，并强制容器使用等宽字体（monospace），确保每个字符（包括   和 *）占据相同水平空间。

以下是修复后的完整代码（已优化可读性与健壮性）：

function printDiamond(n) {   if (typeof n !== 'number' || n < 1 || n > 100 || !Number.isInteger(n)) {     console.error('输入必须是 1–100 的整数');     return;   }    // 上半部分（含中间行）   for (let i = 1; i <= n; i++) {     let line = '';     // 左侧缩进空格（n - i 个  ）     for (let b = 0; b < n - i; b++) {       line += ' ';     }     // 星号序列：每个星号前加一个  ，共 i 个 "*"     for (let a = 0; a < i; a++) {       line += ' *';     }     document.write(line + '
');   }    // 下半部分（n-1 行）   for (let i = n - 1; i >= 1; i--) {     let line = '';     for (let b = 0; b < n - i; b++) {       line += ' ';     }     for (let a = 0; a < i; a++) {       line += ' *';     }     document.write(line + '
');   } }  // 调用示例 printDiamond(5);

? 关键注意事项：

立即学习“Java免费学习笔记（深入）”；

• ✅ 必须在 css 中设置 或容器元素为等宽字体，例如：

  body {   font-family: 'Courier New', monospace;   line-height: 1.2; /* 可选：微调行距提升清晰度 */ }

• ⚠️ 避免在 document.write() 中混用 ” ” 和   —— 后者是唯一能在 HTML 中可靠保留的空白单位；
• ? 若需调试空格数量，可在控制台输出字符串长度（注意：  在 dom 中占 1 字符，但渲染为不可见空格）；
• ? 现代开发中建议改用 innerHTML 或 DOM 操作替代 document.write()（后者会清空页面），但本例聚焦原理，保持原生逻辑。

运行后，你将得到一个完美居中、顶点对齐、左右镜像的菱形，每颗星之间由统一宽度的空格分隔，彻底解决“歪斜”问题。