如何在设置宽度内格式化 JavaScript / html 字符串？

Question

我想创建一个乘法 10 x 10 板。
每个 "cell" 应具有相同的宽度。

for (i = 1; i < 11; i++) {
  for (j = 1; j < 11; j++) {
    document.write(i * j + " ")
  }
  document.write("<br>")
}

Answer 1

您的代码中存在几个问题：

您应该使用 <pre>（预先格式化的文本）标签
你应该在 i 和 j 索引前面添加一个 let 以将它们的范围局部缩小到 for
在 for 循环中，如果将索引条件定义为 <= 10（因为您计算的是从 1 到 10 的数字）而不是 < 11[，将会提高可读性=33=]
你需要一个前缀和一个后缀（在我的示例中构建前缀我使用了一个函数）

document.write('<pre>');
for (let i = 1; i <= 10; i++) {
  for (let j = 1; j <= 10; j++) {
    let number = i * j;
    let prefix = get_prefix(number);
    let suffix = '&nbsp;';
    document.write(prefix + number + suffix)
  }
  document.write('<br>')
}
document.write('</pre>');

function get_prefix(number) {
  let prefix = '';
  if (number < 100) {
    prefix += '&nbsp;';
  }
  if (number < 10) {
    prefix += '&nbsp;';
  }
  return prefix;
}

Answer 2

使用String.prototype.padStart()的解决方案：

let html = "";
for (let i = 1; i < 11; i++) {
  for (let j = 1; j < 11; j++) {
    html += String(i * j).padStart(3, " ") + " ";
  }
  html += "<br>";
}
document.getElementById("output").innerHTML = html.replace(/ /g, "&nbsp;");

#output {
  font-family: monospace;
}

<output id="output"></output>

Answer 3

使用

```
 预格式化文本元素
```
原生String.prototype.padStart()

document.write("<pre>")
for (i = 1; i < 11; i++) {
  for (j = 1; j < 11; j++) {
    document.write(String(i * j).padStart(4, ' '))
  }
  document.write("<br>")
}
document.write("</pre>")

Answer 4

此解决方案适用于 pre 和 html 选项卡实体 	

document.write("<pre>")
  for (let i = 1; i < 11; i++) {
    for (let j = 1; j < 11; j++)
      document.write(i * j + "&#9;")
    document.write("<br>")
  }
document.write("</pre>")

你可以用css控制space tab-size:

* {
    -moz-tab-size: 3em;
    -o-tab-size: 3em;
    tab-size: 3em;
}

如何在设置宽度内格式化 JavaScript / html 字符串？

How can you format JavaScript / html stings in set width?

javascript

codepen