Question

我目前正在使用从服务器获取的JSON数据填充HTML表。

JSON看起来像这样：

[
   {
      "field1":"someString",
      "value":6e-21
   },
   {
      "field1":"someOtherString",
      "value":1e-4
   }
]

但是在HTML表格中，如果数字适合div，“value”字段有时会转换为十进制表示法

这是展示问题的fiddle

我想在HTML表格中使用科学记数法的所有值（就像在我的JSON数据中一样）

Answer 1

将所有值转换为字符串

var data = [{
  "field1": "someString",
    "value": "6e-21"
}, {
   "field1": "someOtherString",
    "value": "1e-4"

}];

工作小提琴： - https://jsfiddle.net/e27w2poa/4/

Answer 2

使用toExponential()功能，如下所示：

data[result].value.toExponential()

来自MDN：

toExponential()方法返回表示Number的字符串对象以指数表示法。

这是一个完整的代码段：

var data = [{
  "field1": "someString",
  "value": 6e-21
}, {
  "field1": "someOtherString",
  "value": 1e-4
}];

var htmlContent = "<tbody>";

for (let result in data) {
  htmlContent += "<tr><td>" + data[result].field1 + "</td><td>" + data[result].value.toExponential() + "</td></tr>";
}

document.getElementById('table').innerHTML += htmlContent + "</tbody>";

table,
th,
td {
  border: 1px solid black;
}

<p>generated from JSON:  </p>
<table id="table">
  <thead>
    <tr>
      <td>field1</td>
      <td>value</td>
    </tr>
  </thead>
</table>
<p>expected:</p>
<table>
  <thead>
    <tr>
      <td>field1</td>
      <td>value</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>someString</td>
      <td>6e-21</td>
    </tr>
    <tr>
      <td>someOtherString</td>
      <td>1e-4</td>
    </tr>
  </tbody>
</table>

Answer 3

您可以使用toExponential()转换回指数形式。工作JSFiddle https://jsfiddle.net/e27w2poa/5/

科学记数法在表格中显示为十进制

3 个答案: