17370845950

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

? 关键注意事项：

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

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

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

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