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

本文详解 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);