JavaScript/Vue2中如何不修改原始精度值仅向用户展示两位小数

两种场景下的实现均无需修改原始变量、无需额外定义重复存储变量，仅在展示层做处理，运算时直接调用原变量即可保留完整精度。

原生JavaScript实现 #

仅在需要展示的位置调用格式化方法，原变量全程保留原始值：

let myDecimal = 117.049701384;

// 展示时调用，输出字符串"117.05"，不修改原变量
console.log(myDecimal.toFixed(2));

// 运算时直接使用原变量，保留全部精度
console.log(myDecimal * 2); // 输出234.099402768

如果需要和Excel舍入规则完全对齐，避免极特殊场景下toFixed的精度异常，可以封装专用格式化方法：

function formatDecimal(num, digit = 2) {
  const base = Math.pow(10, digit);
  return (Math.round(num * base) / base).toFixed(digit);
}
// 调用示例：formatDecimal(myDecimal, 2) 返回"117.05"

Vue.js 2.x 实现 #

方案1：模板内直接处理（适合零散使用场景） #

<template>
  <!-- 仅展示格式化后的值，原变量不受任何影响 -->
  <p>展示值：{{ myDecimal.toFixed(2) }}</p>
  <!-- 运算时直接调用原变量即可 -->
  <p>乘以2运算结果：{{ myDecimal * 2 }}</p>
</template>
<script>
export default {
  data() {
    return {
      myDecimal: 117.049701384
    }
  }
}
</script>

方案2：全局过滤器（适合项目全局统一格式要求） #

首先在项目入口main.js中注册全局过滤器：

// main.js
import Vue from 'vue'

Vue.filter('formatDecimal', function (value, digit = 2) {
  if (!value && value !== 0) return ''
  const base = Math.pow(10, digit)
  return (Math.round(value * base) / base).toFixed(digit)
})

在任意组件模板中直接调用即可：

<template>
  <p>展示值：{{ myDecimal | formatDecimal(2) }}</p>
</template>

内容的提问来源于stack exchange，提问作者user3670188