避开JavaScript浮点数计算精度问题

案例分析

最近在处理将小数转换成百分数的时候遇见一个问题，比如讲0.17换算成17%，用过滤器来实现：

  filters: {
    trans: function(value) {
      return parseFloat(value) * 100 + "%";
    }
  },

然而显示的却是17.1699999999999998%

原因

到了计算机的最底层，都是通过1和0的机器码来对具体的数据和操作进行具体的实现。由于底层实现机制的原因，浮点数在转换为二进制表示的时候，无法精确表示这种包含小数点的数据，其本质是将浮点数转换成了用二进制表示的最接近的近似值，对于浮点数的四则运算，几乎所有的编程语言都会有类似精度误差的问题，只不过在C++/C#/Java 这些语言中已经封装好了方法来避免精度的问题，而 JavaScript 是一门弱类型的语言，从设计思想上就没有对浮点数有个严格的数据类型，所以精度误差的问题就显得格外突出。

解决

本案例有4位小数的精度要求，可以用toFixed方法处理，顺便加上了去除小数点多余的0的处理：

  filters: {
    trans: function(value) {
      return (parseFloat(value) * 100).toFixed(4).replace(/[.]?0+$/, "") + "%";
    }
  },