Decimal.js解决JavaScript精度问题：从安装到Vue实战

作者：南栀

时间：2026-10-31

JavaScript原生浮点数运算存在精度丢失风险，尤其在金融场景下后果严重。本文详细介绍Decimal.js库的安装配置与核心用法，涵盖加减乘除及取模运算。通过Vue项目完整示例，演示如何创建Decimal对象、执行高精度计算并转换回原生Number类型，帮助开发者在前端实现精确数值处理。

文章目录

精度问题控制台图样

若在前端处理涉及金额的业务逻辑时直接使用原生计算，可能导致严重的精度丢失，进而引发财务损失。这种不准确的结果往往需要后端承担修正责任，但实际上前端完全有能力通过引入Decimal.js库来确保计算精度。

01.引入Decimal.js

Decimal.js基于二进制进行计算，能够更准确地实现格式化数学运算，并对数字进行高精度处理。使用Decimal类型处理数据不仅能保证计算结果的精确性，还有助于节省存储空间。

$ npm install --save decimal.js
/**  Node.js  */
var Decimal = require('decimal.js')
 
/** ES6 方式 */
import { Decimal } from 'decimal.js'

02.使用

<template>
  <div>
    test
  </div>
</template>
<script>

import Decimal from 'decimal.js'

export default {
  created() {
    console.log('打印8.12*100的结果', 8.12*100)
    console.log('打印9.12*100的结果', 9.12*100)

    let c = new Decimal(8.12).mul(new Decimal(100))
    let d = new Decimal(9.12).mul(new Decimal(100))
    console.log('c', c)
    console.log('d', d)
  }
}
</script>

精度问题控制台图样

加减乘除全上

 const a = 9.98;
 const b = 8.03;
 
 // 加法
 let c = new Decimal(a).add(new Decimal(b)) 
 
 // 减法
 let d = new Decimal(a).sub(new Decimal(b))
 
 // 乘法
 let e = new Decimal(a).mul(new Decimal(b))
    
 // 除法
 let f = new Decimal(a).div(new Decimal(b))

附：Vue项目完整例子

以下示例展示了在Vue项目中集成Decimal.js库进行高精度数值计算的完整流程。

<template>
  <div>
    <p>0.1 + 0.2 = {{ result }}</p>
  </div>
</template>

<script>
import { Decimal } from 'decimal.js';

export default {
  data() {
    return {
      result: null,
    };
  },
  mounted() {
    const num1 = new Decimal(0.1);
    const num2 = new Decimal('0.2');
    const sum = num1.plus(num2);
    this.result = sum.toNumber();
  },
};
</script>

在上述示例中，通过Decimal类实例化两个Decimal对象，并利用plus()方法执行加法运算。最终，使用toNumber()方法将计算结果转换为JavaScript原生Number类型，随后绑定至Vue组件的result数据属性，以便在模板中正确显示计算结果。