本文详解 javascript 中打印菱形图案时出现错位的根本原因——html 空格折叠与字体非等宽问题，并提供基于 ` ` 和等宽字体的完整解决方案，确保菱形结构严格对称。
在 Web 环境中使用 document.write() 打印菱形图案时，常见的“菱形歪斜”问题并非逻辑错误，而是 HTML 渲染机制与字体特性共同导致的视觉偏差。核心原因有两个：
- HTML 空格折叠（Whitespace Collapsing）：浏览器默认将连续的普通空格（" "）、制表符或换行符合并为单个空格，导致用于对齐的前置空格失效；
- 字体非等宽（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 + '<br>');
}
// 下半部分（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 + '<br>');
}
}
// 调用示例
printDiamond(5);? 关键注意事项：
立即学习“Java免费学习笔记（深入）”；
- ✅ 必须在 CSS 中设置 <body> 或容器元素为等宽字体，例如：
body { font-family: 'Courier New', monospace; line-height: 1.2; /* 可选：微调行距提升清晰度 */ } - ⚠️ 避免在 document.write() 中混用 " " 和 —— 后者是唯一能在 HTML 中可靠保留的空白单位；
- ? 若需调试空格数量，可在控制台输出字符串长度（注意： 在 DOM 中占 1 字符，但渲染为不可见空格）；
- ? 现代开发中建议改用 innerHTML 或 DOM 操作替代 document.write()（后者会清空页面），但本例聚焦原理，保持原生逻辑。
运行后，你将得到一个完美居中、顶点对齐、左右镜像的菱形，每颗星之间由统一宽度的空格分隔，彻底解决“歪斜”问题。
