如何将科学计数法数值格式化为固定小数位的十进制字符串

10次阅读

如何将科学计数法数值格式化为固定小数位的十进制字符串

本文介绍如何在 javascript 中将 api 返回的科学计数法浮点数(如 `1.134916286172e-7`)统一转换为易读的常规小数格式(如 `0.0000001135`),并集成到动态表格渲染逻辑中,确保价格显示清晰、专业。

加密货币行情展示场景中,原始价格数据常以科学计数法(如 1.134916286172e-7)形式返回,直接插入 html 会导致可读性差、用户体验不佳。javaScript 提供了原生方法 number.prototype.toFixed(digits),可将数字格式化为指定小数位数的字符串(注意:返回值为字符串,且会四舍五入)。

✅ 正确用法示例:

const value = 1.134916286172e-7; console.log(value.toFixed(8)); // "0.00000011" —— 保留 8 位小数,自动四舍五入 console.log(value.toFixed(10)); // "0.0000001135"

⚠️ 注意事项:

  • toFixed() 的参数必须是 0–100 的整数,超出范围会抛出 RangeError;
  • 不会处理无效数字(如 NaN 或 Infinity),建议先校验:
    const safeToFixed = (num, digits = 8) =>    typeof num === 'number' && !isNaN(num) && isFinite(num)      ? num.toFixed(digits)      : '—';
  • 若需去除末尾冗余零(如 0.00010000 → 0.0001),可用 parseFloat().toString() 组合,但会丢失固定精度控制;推荐优先使用 toFixed() 保持数值对齐与一致性。

? 将其集成到您的 init() 函数中(关键修改已加注释):

async function init() {   const url = "https://exchange-api.lcx.com/market/tickers";   const resp = await fetch(url);   const json = await resp.json();    const LCXUSDCBid = json.data['LCX/USDC'].bestBid;   const BTCUSDCAsk = json.data['BTC/USDC'].bestAsk;   const BTCUSDCBid = json.data['BTC/USDC'].bestBid;   const ATRILCXBid = json.data['ATRI/LCX'].bestBid;   const ATRILCXAsk = json.data['ATRI/LCX'].bestAsk;    const ATRILCXPRICUSDCEBid = LCXUSDCBid * ATRILCXBid;   const ATRILCXPRICUSDCEAsk = LCXUSDCBid * ATRILCXAsk;   const ATRILCXPRICBTCBid = ATRILCXPRICUSDCEBid / BTCUSDCBid;   const ATRILCXPRICBTCAsk = ATRILCXPRICUSDCEAsk / BTCUSDCBid;    // ✅ 格式化为 8 位小数(可根据精度需求调整)   const formatPrice = (num) =>      typeof num === 'number' && !isNaN(num) && isFinite(num)       ? num.toFixed(8)       : '—';    const tableBody = document.querySelector("#prices tbody");   tableBody.innerHTML += `     ATRILCXPRICbtc     ${formatPrice(ATRILCXPRICBTCBid)}     ${formatPrice(ATRILCXPRICBTCAsk)}   `; } init();

? 进阶建议:

  • 若需全局统一价格格式,可将 formatPrice 提升为模块级工具函数,并在所有价格渲染处复用;
  • 对于极小值(如
  • 始终对 json.data[…] 的嵌套属性做存在性检查(如 ?.bestBid),避免运行时错误。

通过 toFixed() 的精准控制,您能确保所有价格以一致、规范、用户友好的方式呈现——这是金融前端应用专业性的基础体现。

text=ZqhQzanResources