用普通浮点值替换表中的指数值

Question

我的html文件中有一个表：

<table class="dataframe">
<thead>
<tr style="text-align: right;">
<th>timestamp</th>
<th>cid1</th>
<th>cid2</th>
<th>cid3</th>
<th>cid4</th>
</tr>
</thead>
<tbody>
<tr>
<td>2023-04-08 15:39:21</td>
<td>1.0</td>
<td>55.560000</td>
<td>5.123143e+06</td>
</tr>
<tr>
<td>2023-04-08 15:39:21</td>
<td>1.0</td>
<td>27913.540000</td>
<td>4.653931e+04</td>
</tr>
</tbody>
</table>

正如我们所看到的，在指数形式的单元格中有很多浮点值，或者最后有很多零。现在我在文件头中写了一个计算：

<form onsubmit="return false;"oninput="document.getElementById('rez_float').innerHTML= 
parseFloat(document.getElementById('expo').value).toFixed(20).replace(/.?0+$/,'')">
<input id="expo" value="Paste exponential" onfocus="if (this.value === 'Paste exponential') this.value=''">  
<br>float = <output id="rez_float"></output>
</form>

如果我放入2.572962e+09，则此计算返回2572962000。

但我想在表中找到所有包含指数值的单元格，并用函数toFixed(20).replace(/.?0+$/,'')规范化浮点值来代替它。对于类似于27913.540000的值，可以移除多余的零。

如何使用JS？我是蟒蛇爱好者，我有初级JS级别。请帮帮我！

Answer 1

您可以使用IntlAPI中的数字格式化程序实例。

在下面的例子中，我选择了一些构造函数选项，这些选项在我解释问题时似乎适合您的问题的细节，但一定要探索可用的选项。

const formatter = new Intl.NumberFormat("en-US", {
maximumFractionDigits: 20,
notation: "standard",
roundingMode: "expand",
signDisplay: "auto",
style: "decimal",
useGrouping: false,
});
const formatNumberCell = (td) => {
const formatted = formatter.format(Number(td.textContent.trim()));
td.textContent = formatted;
};
document.querySelectorAll("table > tbody > tr > td:not(:nth-of-type(1))")
.forEach(formatNumberCell);

table {
font-family: sans-serif;
border-collapse: collapse;
}
td, th, tr {
border: 1px solid hsla(0, 0%, 50%, 0.2);
padding: 0.5rem;
}

<table>
<thead>
<tr>
<th>timestamp</th>
<th>cid1</th>
<th>cid2</th>
<th>cid3</th>
</tr>
</thead>
<tbody>
<tr>
<td>2023-04-08 15:39:21</td>
<td>1.0</td>
<td>55.560000</td>
<td>5.123143e+06</td>
</tr>
<tr>
<td>2023-04-08 15:39:21</td>
<td>1.0</td>
<td>27913.540000</td>
<td>4.653931e+04</td>
</tr>
<tr>
<td>2023-04-08 15:39:21</td>
<td>-41</td>
<td>-27913.540000</td>
<td>4.653931e-04</td>
</tr>
</tbody>
</table>

---

如果您不喜欢作用域中额外的formatter变量，您可以在闭包中创建它——这里有一个具有以上相同输出的示例，以及其他一些将默认数字序列化与自定义格式进行比较的示例：

const formatNumber = (() => {
const formatter = new Intl.NumberFormat("en-US", {
maximumFractionDigits: 20,
notation: "standard",
roundingMode: "expand",
signDisplay: "auto",
style: "decimal",
useGrouping: false,
});
return formatter.format.bind(formatter);
})();
for (const nStr of [
"1.0",
"55.560000",
"5.123143e+06",
"1.0",
"27913.540000",
"4.653931e+04",
"-41",
"-27913.540000",
"4.653931e-04",
"1.234e40",
"-1.234e40",
"1.234e-40",
"-1.234e-40",
]) console.log(`Input: ${nStr}nDefault: ${String(Number(nStr))}nCustom: ${formatNumber(Number(nStr))}`);

TypeScript Playground 中的代码