当前位置: 首页 > article >正文

vue中给数字新增四舍五入属性

背景:js的数字属性toFixed不是我们正常理解的四舍五入,但是希望能和toFixed一样方便使用,达到四舍五入效果。可以在Number上新增一个属性。

文章目录

  • 一、编写四舍五入方法
    • 1、新增js文件
    • 2、在新增js文件中写方法
  • 二、在vue项目中给数字新增rewriteToFixed属性
    • 1.在main.js中引入rewriteToFixed
    • 2.使用
  • 三、其他方式解决该问题
    • 1、使用toLocaleString
    • 2、使用 Intl.NumberFormat

一、编写四舍五入方法

1、新增js文件

在vue项目中存放js文件的文件夹中新增一个js文件,例如utils文件夹下边新增一个index.js文件。

2、在新增js文件中写方法

// 重写toFixed,为了不替代原生属性toFixed,重新命名rewriteToFixed
// 参数d表示要保留多少位小数
export function rewriteToFixed(d) {
  var s = this + "";
  if (!d) d = 0;
  if (s.indexOf(".") == -1) s += ".";
  s += new Array(d + 1).join("0");
  let test = new RegExp(
    "^(-|\\+)?(\\d+(\\.\\d{0," + (d + 1) + "})?)\\d*$"
  ).exec(s);
  if (test) {
    var s = "0" + test[2],
      pm = test[1] ? test[1] : "",
      a = test[3].length,
      b = true;
    if (a == d + 2) {
      a = s.match(/\d/g);
      if (parseInt(a[a.length - 1]) > 4) {
        for (var i = a.length - 2; i >= 0; i--) {
          a[i] = parseInt(a[i]) + 1;
          if (a[i] == 10) {
            a[i] = 0;
            b = i != 1;
          } else break;
        }
      }
      s = a.join("").replace(new RegExp("(\\d+)(\\d{" + d + "})\\d$"), "$1.$2");
    }
    if (b) s = s.substring(1);
    return (pm + s).replace(/\.$/, "");
  }
  return this + "";
}

二、在vue项目中给数字新增rewriteToFixed属性

1.在main.js中引入rewriteToFixed

// 引入步骤1中你写好的函数rewriteToFixed 
import { rewriteToFixed } from "./utils/index";
// 给Number新增rewriteToFixed属性
Number.prototype.rewriteToFixed = rewriteToFixed;

2.使用

// 此时你可以在vue项目文件中直接使用rewriteToFixed属性
console.log(100.635.rewriteToFixed(2));
console.log(1.45.rewriteToFixed(1));
console.log(-1.45.rewriteToFixed(1)); // -1.5
// 你可以对比toFixed
console.log(1.45.toFixed(1)); // 1.4

三、其他方式解决该问题

1、使用toLocaleString

const format = (num, decimals=2) => num.toLocaleString('en-US', {
   minimumFractionDigits: decimals,      
   maximumFractionDigits: decimals,
});
console.log(format(1.345));

2、使用 Intl.NumberFormat

const formatter = new Intl.NumberFormat('en-US', {
   minimumFractionDigits: 2,      
   maximumFractionDigits: 2,
});
console.log(formatter.format(1.345)); // "2.01"

http://www.kler.cn/a/37266.html

相关文章:

  • docker-compose常用模板
  • 从小白开始学习CAD(一)
  • MySQL常用命令1
  • vscode 端口转发实现端口映射,实现端口自由
  • Leetcode 43 字符串相乘
  • xShell中使用vim编辑时,无法粘贴外来文本
  • [C++] C++特殊类设计 以及 单例模式:设计无法拷贝、只能在堆上创建、只能在栈上创建、不能继承的类, 单例模式以及饿汉与懒汉的场景...
  • VMware ESXi 7.0 U3n macOS Unlocker OEM BIOS 集成网卡驱动和 NVMe 驱动 (集成驱动版)
  • Qt5.15.2 Webassembly源码裁剪编译
  • 分布式应用之zookeeper集群+消息队列Kafka
  • mmc记录
  • 并发和并行的区别
  • NLog写日志到数据库
  • 网络安全面试题
  • 【探索 Kubernetes|作业管理篇 系列 16】离线业务 Job、CronJob
  • 【NLP】BERT和原理揭示
  • 女孩与花田-InsCode Stable Diffusion 美图活动一期
  • 驾驶证——科目一技巧(三)
  • 文心一言 VS 讯飞星火 VS chatgpt (57)-- 算法导论6.4 1题
  • Es直方图聚合--date_histogram