本文详解 javascript 中使用 `document.write` 打印菱形图案时出现错位的根本原因，并提供基于等宽字体与 html 空格处理规范的完整解决方案。
在 Web 环境中用 javaScript 打印菱形图案（如 * 构成的钻石形），看似是简单的循环逻辑问题，实则涉及 html 渲染机制 与 字体排版特性 的双重影响。你遇到的“菱形歪斜”现象，根本原因并非代码逻辑错误，而是：
- ✅ 普通空格（” “）在 HTML 中会被浏览器自动合并压缩（多个连续空格仅渲染为一个），导致缩进失效；
- ❌ *非等宽字体（如默认的 sans-serif）中，空格字符宽度 ≠ `` 字符宽度**，即使空格未被压缩，视觉上仍无法对齐。
正确解法：双管齐下
1. 使用 （不换行空格）替代普通空格
是 HTML 实体，表示不可折叠的空白字符，能确保每个“空格”都被独立渲染。注意：必须写为 （带分号），否则部分浏览器可能解析失败。
2. 强制启用等宽字体（Monospace）
在 css 中设置容器（如
或包裹
）使用等宽字体，确保 和 * 占据完全相同的水平空间：
body { font-family: 'Courier New', Consolas, monospace; }3. 修正逻辑：统一使用 控制间距与星号间隔
原代码中 document.write(” “, “*”) 混用了普通空格和星号，既易被压缩又不对齐。应全部替换为 ，并注意：每颗星前需一个 ，但首颗星前的空格由外层缩进循环控制，避免冗余。
以下是修复后的完整、可运行代码：
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 颗星，每颗前加 （注意：第一颗星前已有缩进，此处从第二颗起补间隔） // 更清晰做法：先写一颗星，再循环写 " *" 共 i-1 次 document.write('*'); for (let a = 2; a <= i; a++) { document.write(' *'); } document.write('
'); } // 下半部分（不含顶点） for (let i = input - 1; i >= 1; i--) { for (let b = 1; b <= input - i; b++) { document.write(' '); } document.write('*'); for (let a = 2; a <= i; a++) { document.write(' *'); } document.write('
'); } } else { console.error('Input must be a number between 1 and 100.'); } } // 调用示例 printDiamond(5);? 关键细节说明： 每行星号之间用 * 连接，而非 ” *”，杜绝普通空格风险； 首颗星直接 document.write(‘*’)，避免左侧多出一个无意义的 ； document.write(”) 必须显式换行，HTML 不会自动识别 n； 建议添加输入校验（如 input >= 1），增强鲁棒性。
替代方案（更现代、推荐）
虽然 document.write 可快速验证逻辑，但已不推荐用于生产环境（会阻塞解析、无法在 dom 加载后调用）。更优实践是：
function printDiamondToElement(input, containerId = 'diamond-output') { const container = document.getElementById(containerId); if (!container) return; let html = ''; const maxStars = input; // 构建上半部 for (let i = 1; i <= maxStars; i++) { const spaces = ' '.repeat(maxStars - i); const stars = '*'.padStart(i, ' *'); // 简洁生成 "*, *, ..." html += `${spaces}${stars}`; } // 构建下半部 for (let i = maxStars - 1; i >= 1; i--) { const spaces = ' '.repeat(maxStars - i); const stars = '*'.padStart(i, ' *'); html += `${spaces}${stars}`; } container.innerHTML = html; }配合 CSS：
#diamond-output { font-family: monospace; line-height: 1; }✅ 总结：菱形对齐 = （语义化空格） + monospace（视觉等宽） + pre/
（保留格式）。掌握这三点，即可稳定输出工整钻石图案。