如何格式化固定宽度的JS/HTML字符串？如何创建等宽单元格的10×10乘法表？

1. 如何格式化固定宽度的JavaScript/HTML字符串？ #

嘿，处理固定宽度字符串主要有两种思路，看你是要纯字符串层面的排版还是HTML页面上的展示：

纯字符串格式化（适合控制台或预格式化文本） #

ES6+提供的padStart()和padEnd()方法是最方便的，能帮你在字符串开头或末尾填充指定字符（默认是空格），直到达到目标宽度。举个实用例子：

// 把数字转为固定宽度4的右对齐字符串，前面补空格
const num = 7;
const rightAligned = num.toString().padStart(4, ' ');
console.log(rightAligned); // 输出"   7"

// 如果要左对齐，就用padEnd补在后面
const leftAligned = num.toString().padEnd(4, ' ');
console.log(leftAligned); // 输出"7   "

HTML页面样式控制（更稳定的网页展示） #

如果是在网页上显示，纯字符串填充容易因为字体差异导致对齐偏差，更推荐用CSS控制：

• 用<span>包裹内容，设置为块级元素并指定宽度：

<span style="display: inline-block; width: 45px; text-align: right;">9</span>
<span style="display: inline-block; width: 45px; text-align: right;">81</span>

• 或者直接用<table>，表格单元格天然支持等宽对齐，这也是处理表格类数据最靠谱的方式。

2. 10×10等宽单元格乘法表实现方案 #

你当前的代码用空格分隔乘积，但数字长度不同（比如1和100），空格没法保证对齐。这里给你两种实用的改进方案：

方案一：HTML表格（最推荐，样式可控） #

表格是处理网格数据的最优解，天然支持单元格等宽，还能加样式优化视觉效果。修改后的代码如下：

<script>
document.write('<table style="border-collapse: collapse; text-align: center; margin: 10px 0;">');
for (let i = 1; i < 11; i++) {
  document.write('<tr>');
  for (let j = 1; j < 11; j++) {
    // 固定单元格宽度，加边框让结构更清晰
    document.write(`<td style="width: 50px; border: 1px solid #eee; padding: 4px;">${i * j}</td>`);
  }
  document.write('</tr>');
}
document.write('</table>');
</script>

解释：

• border-collapse: collapse合并单元格边框，避免重复线条；
• 固定<td>宽度50px，确保所有单元格一致；
• text-align: center让内容居中，视觉更舒适。

方案二：<pre>标签+字符串填充（轻量无表格） #

如果不想用表格，也可以用<pre>标签保留空格排版，结合padStart()统一每个乘积的宽度：

<script>
document.write('<pre style="font-family: monospace; margin: 10px 0;">');
for (let i = 1; i < 11; i++) {
  let rowContent = '';
  for (let j = 1; j < 11; j++) {
    // 把乘积转为字符串，补空格到宽度4，右对齐
    rowContent += (i * j).toString().padStart(4, ' ');
  }
  document.write(rowContent + '\n');
}
document.write('</pre>');
</script>

解释：

• <pre>会严格保留字符串里的空格和换行，排版和你拼接的内容完全一致；
• padStart(4, ' ')保证每个乘积占4个字符宽度，右对齐后整个乘法表就整齐了。

内容的提问来源于stack exchange，提问作者Yanki