本文详解 javascript 中打印菱形图案时出现歪斜的根本原因——html 默认忽略连续空格及字体非等宽问题，并提供基于 ` ` 和等宽字体的完整解决方案。
在 Web 环境中使用 document.write() 打印菱形图案时，即使逻辑正确，输出也常呈现“上宽下窄”或完全错位的 skewed 效果。这并非算法错误，而是 HTML 渲染机制与字体特性的双重影响所致。
? 根本原因分析
- HTML 空格折叠（Whitespace Collapsing）：浏览器默认将多个连续普通空格（" "）、制表符或换行符合并为单个空格，导致用于对齐的缩进空格失效；
- 字体非等宽（Proportional Font）：如 Arial、Times New Roman 等字体中，* 和空格宽度不一致，破坏视觉对齐；
- *`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("<br>");
}
// 下半部分（不含中间行）
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("<br>");
}
}
}
printDiamond(5);? 更简洁写法（推荐）：统一用 " *" 拼接，再用 .trim() 或 slice(6) 去掉首段冗余空格；但为清晰起见，上述示例采用条件判断，避免头部多余空格。
✅ 强制使用等宽字体（Monospace）
在 CSS 中设置容器使用等宽字体，确保 * 和 占据相同水平空间：
<style>
body {
font-family: 'Courier New', Consolas, monospace;
line-height: 1.2; /* 可选：微调行高增强可读性 */
}
</style>⚠️ 注意事项与最佳实践
- ❌ 避免 document.write(" ", "*")：普通空格无效，且易引入不可见的布局偏差；
- ✅ 统一使用 进行所有对齐操作（包括星号间间隔）；
- ✅ 添加输入校验：input >= 1 防止无效输入（原代码仅检查
- ? 不推荐在现代项目中使用 document.write()（会阻塞解析、无法在 DOM 加载后调用），生产环境建议改用 innerHTML 或 DOM 操作构建
或 <code> 容器；</li><li>✨ 进阶优化：可将菱形生成为字符串再一次性写入，提升性能并便于测试：</li></ul><pre class="brush:php;toolbar:false;">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("<br>"); } // 使用方式 document.body.innerHTML = generateDiamond(5);通过结合 的语义可靠性与等宽字体的视觉一致性，即可稳定输出结构精准、左右对称的菱形图案。核心在于理解「HTML 渲染规则」与「前端排版原理」的协同作用——算法只是骨架，渲染细节才是成形的关键。
立即学习“Java免费学习笔记（深入）”；
