当前位置： 首页 > news >正文

js中对数字,超大金额(千位符，小数点)格式化处理

news 2025/7/8 6:47:20

前言

这个问题的灵感来自线上一个小bug，前两天刚看完同事写的代码，对数字类型处理的很好，之前一直都是用正则和toFixed(2)处理数字相关，后面发现使用numeral.js处理更完美。

对于下面这种数据的处理，你能想到几种方法，简单思考下

0.1+0.2=0.30000000000000004
0.14*100=14.0000000000000029999999--->'9,999,999'
1234567890--->1,234,567,890

1.先说加减乘除法

0.1+0.2的精准算法，这里以加法举例了，换成减、乘、除法都是一样的

  • 1).使用toFixed()方法：
const sum = 0.1 + 0.2; // 0.14 * 100; 乘法
const roundedSum = parseFloat(sum.toFixed(10));
console.log(roundedSum); // 输出 0.3
  • 2).使用parseFloat()和toFixed()结合：
const sum = parseFloat((0.1 + 0.2).toFixed(10));
console.log(sum); // 输出 0.3
  • 3).使用Math.round()：
const sum = Math.round((0.1 + 0.2) * 1e10) / 1e10;
console.log(sum); // 输出 0.3
  • 4).使用numeral.EPSILON：
const sum = 0.1 + 0.2;
const roundedSum = Math.abs(sum - 0.3) < Number.EPSILON ? 0.3 : sum;
console.log(roundedSum); // 输出 0.3
  • 5).使用Numeral.js：
// 安装
npm i numeral -S
// 挂原型链上
import numeral from 'numeral'
Vue.prototype.$numeral = numeral; // 数字金额

let num = this.$numeral(14*100).format('0,0.00')
console.log(num); // 输出 14.00

2.再说超大金额(千位符)格式化处理

  • 1).利用字符串提供的toLocaleString()js内置的方法处理,这个方法最简单
var num = 9999999;
console.log(num.toLocaleString()) // 9,999,999
  • 2).利用正则处理
function addThousandSeparator(number) {// 将数字转换为字符串const numberString = String(number);// 使用正则表达式添加千位符const formattedNumber = numberString.replace(/\B(?=(\d{3})+(?!\d))/g, ',');return formattedNumber;
}const result = addThousandSeparator(9999999);
console.log(result); // 输出 '9,999,999'

\B(?=(\d{3})+(?!\d)) 是一个正则表达式模式，它使用正向零宽断言来匹配不在数字之前的位置，但是在每三个数字之间。这样就可以在这些位置插入千位符

  • 3).使用第三方库的Numeral.js处理
对整数的处理

<script src="https://cdn.bootcss.com/numeral.js/2.0.6/numeral.min.js"></script>
var formattedNumber = numeral(9999999).format('0,0'); // 输出：9,999,999
console.log('formattedNumber',formattedNumber);
对小数点的处理

这里注意括号里逗号与小数点的区别format('0,0.00')


<script src="https://cdn.bootcss.com/numeral.js/2.0.6/numeral.min.js"></script>
var formattedNumber = numeral(9999999.56841).format('0,0.00'); // 输出：9,999,999
console.log('formattedNumber',formattedNumber);

<script src="https://cdn.bootcss.com/numeral.js/2.0.6/numeral.min.js"></script><script>var string = numeral(1634600).format('0,0');console.log(string)// 乘法运算var result = numeral(0.14).multiply(100).value(); // 输出：6console.log('result',result);var result1 = numeral(0.14*100).value(); console.log('result1',result1,numeral(0.14*100).format('0,0.00'));// this.$numeral(0.14*100).format('0,0.00')</script>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>numeral.js</title>
</head>
<body>numeral.js<!-- <script src="https://cdn.bootcdn.net/ajax/libs/numeral.js/2.0.6/locales.min.js"></script> --><script src="https://cdn.bootcss.com/numeral.js/2.0.6/numeral.min.js"></script><script>var string = numeral(1634600).format('0,0');console.log(string)// 乘法运算var result = numeral(0.14).multiply(100).value(); // 输出：6console.log('result',result);var result1 = numeral(0.14*100).value(); console.log('result1',result1,numeral(0.14*100).format('0,0.00'));// this.$numeral(0.14*100).format('0,0.00')</script>
</body>
</html>

相关文章：

js中对数字,超大金额(千位符，小数点)格式化处理

前言 这个问题的灵感来自线上一个小bug&#xff0c;前两天刚看完同事写的代码&#xff0c;对数字类型处理的很好&#xff0c;之前一直都是用正则和toFixed(2)处理数字相关&#xff0c;后面发现使用numeral.js处理更完美。 对于下面这种数据的处理&#xff0c;你能想到几种方法…...

编程日记 2024/1/11 14:49:31

Android 打开热点2.4G系统重启解决

Android 打开热点2.4G系统重启解决 文章目录 Android 打开热点2.4G系统重启解决一、前言二、过程分析1、Android 设备开机后第一次打开热点2.4G系统重启2、日志分析3、设备重启原因 三、解决方法四、其他1、wifi/有线网 代理信息也可能导致系统重启2、Android13 热点默认5G频道…...

编程日记 2024/1/11 14:48:29

全链路压力测试有哪些主要作用

全链路压力测试是在软件开发和维护过程中不可或缺的一环&#xff0c;尤其在复杂系统和高并发场景下显得尤为重要。下面将详细介绍全链路压力测试的主要作用。 一、全链路压力测试概述 全链路压力测试是指对软件系统的全部组件(包括前端、后端、数据库、网络、中间件等)在高负载…...

编程日记 2024/1/11 14:47:28

【python基础教程】print输出函数和range()函数的正确使用方式

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 print()有多个参数&#xff0c;参数个数不固定。 有四个关键字参数&#xff08;sep end file flush&#xff09;&#xff0c;这四个关键字参数都有默认值。 print作用是将objects的内容输出到file中&#xff0c;objects中的…...

编程日记 2024/1/11 14:46:26

LeetCode255.用队列实现栈

题目传送门&#xff1a;Leetcode255.用队列实现栈 请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0c;并支持普通栈的全部四种操作&#xff08;push、top、pop 和 empty&#xff09;。 实现 MyStack 类&#xff1a; void push(int x) 将元素 x 压…...

编程日记 2024/1/11 14:44:25

PHPStudy快速搭建网站并结合内网穿透远程访问本地站点

文章目录 [toc]使用工具1. 本地搭建web网站1.1 下载phpstudy后解压并安装1.2 打开默认站点&#xff0c;测试1.3 下载静态演示站点1.4 打开站点根目录1.5 复制演示站点到站网根目录1.6 在浏览器中&#xff0c;查看演示效果。 2. 将本地web网站发布到公网2.1 安装cpolar内网穿透2…...

编程日记 2024/1/11 14:43:24

AI嵌入式K210项目（1）-芯片开发板介绍

系列文章目录 在人工智能大潮滚滚而来的时代&#xff0c;作为一个从事嵌入式行业多年的程序猿倍感焦虑&#xff0c;有被替代的焦虑&#xff0c;也有跟不上新技术步伐的无奈&#xff0c;本系列文章将介绍一个从硬件设计到ai训练、最后到模型部署的完整案例&#xff1b;第一阶段…...

编程日记 2024/1/11 14:41:22

Blazor中使用impress.js

impress.js是什么&#xff1f; 你想在浏览器中做PPT吗&#xff1f;比如在做某些类似于PPT自动翻页&#xff0c;局部放大之类&#xff0c;炫酷无比。 在Blazor中&#xff0c;几经尝试&#xff0c;用以下方法可以实现。写文不易&#xff0c;请点赞、收藏、关注&#xff0c;并在转…...

编程日记 2024/1/11 14:39:20

ros2 ubuntu 20.04 安装 foxy

设置区域设置 确保您有一个支持UTF-8. 如果您处于最小环境&#xff08;例如 docker 容器&#xff09;中&#xff0c;则区域设置可能是最小的&#xff0c;例如POSIX. 我们使用以下设置进行测试。但是&#xff0c;如果您使用不同的 UTF-8 支持的区域设置&#xff0c;应该没问题。…...

编程日记 2024/1/11 14:36:18

Blazor 错误笔记

1. 运行时问题 Microsoft.NETCore.App.Runtime.Mono.browser-wasm Microsoft.NETCore.App.Runtime.Mono.browser-wasm 是一个 .NET Core 运行时的包&#xff0c;用于在浏览器中运行 .NET Core 应用程序。它是针对 WebAssembly 架构的 .NET Core 运行时&#xff0c;可以在浏览…...

编程日记 2024/1/11 14:35:16

【深度学习1对1指导】

...

编程日记 2024/1/11 14:33:14

XUbuntu22.04之快速复制绝对路径(二百零五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…...

编程日记 2024/1/11 14:31:12

21、Kubernetes核心技术 - 高可用集群搭建（kubeadm+keepalived+haproxy）

目录 一、简介 二、高可用集群架构说明 三、部署环境说明 四、高可用集群搭建 (1)、初始化所有节点 (2)、修改host文件 (3)、调整内核参数 (4)、所有节点安装Docker (4-1)、配置 docker 的阿里 yum 源 (4-2)、yum 安装 docker (4-3)、配置 docker 的镜像源 (4-4)…...

编程日记 2024/1/11 14:28:10

使用SpringDataRedis操作Redis

Redis的java客户端 jedisLettuceSpring Data Redis Spring Data redis 是Spring的一部分&#xff0c;对 Redis 底层开发包进行了高度封装。在Spring项目中&#xff0c;可以使用Spring Data Redis来简化操作。 Spring Data Redis使用方式 操作步骤&#xff1a; 导入Spring …...

编程日记 2024/1/11 14:26:07

PyCharm社区版如何创建Django项目并运行

一、配置Django环境 1、使用PyCharm打开一个普通的Python项目 2、为该项目配置Django环境 &#xff08;1&#xff09;点击"File"-"Settings" &#xff08;2&#xff09;点击"Project:项目名"-"Python Interpreter"-"号" &…...

编程日记 2024/1/11 14:25:07

深度探讨鸿蒙工程师面试题

深度探讨鸿蒙工程师面试题 第一部分&#xff1a;引言 鸿蒙&#xff08;HarmonyOS&#xff09;作为华为推出的全场景分布式操作系统&#xff0c;引领着未来智能化时代的潮流。鸿蒙工程师在这一创新性领域中扮演着至关重要的角色。本文将深入研究一系列鸿蒙工程师面试题&#x…...

编程日记 2024/1/11 14:24:06

python数据结构堆栈

堆 堆是一种树形结构&#xff1a;满足两个主要性质 堆是一种完全二叉树&#xff1a;堆中所有层级除了最后一层都是完全填满的&#xff0c;且最后一层的节点都是向左排列堆中的任意节点都不大于&#xff08;或不小于&#xff09;其子节点的值&#xff0c;这也是堆的属性 impo…...

编程日记 2024/1/11 14:21:03

从网页连接socket服务器和I/O

1.i/o InputStream和InputStreamReader是Java I/O类库中的两个关键类&#xff0c;用于处理字节流。它们的主要区别在于它们处理数据的方式。 InputStream: InputStream是用于读取字节流的抽象类。它是所有字节输入流类的父类。InputStream的子类可以从不同的数据源读取字节&…...

编程日记 2024/1/11 14:20:02

鸿蒙HarmonyOS学习手册_入门篇

鸿蒙HarmonyOS学习手册_入门篇 文章目录 鸿蒙HarmonyOS学习手册_入门篇入门快速入门开发准备基本概念UI框架应用模型工具准备 构建第一个ArkTS应用&#xff08;Stage模型&#xff09;-快速入门-入门创建ArkTS工程ArkTS工程目录结构&#xff08;Stage模型&#xff09;构建第一个…...

编程日记 2024/1/11 14:18:00

人工智能复习

机器学习中线性回归和逻辑回归&#xff1a; 机器学习的分类&#xff1a; 监督学习和无监督学习&#xff0c;半监督学习 监督学习&#xff08;Supervised Learning&#xff09;&#xff1a; 监督学习是一种利用带有标签&#xff08;标记&#xff09;的数据进行训练的机器学习…...

编程日记 2024/1/11 14:16:59

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/7/7 16:20:34

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/7/7 15:45:25

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/6/23 2:48:54

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/7/3 22:07:42

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2025/7/7 19:00:10

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2025/7/5 17:16:12

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2025/6/17 3:19:01

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2025/7/6 15:55:44

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2025/7/6 21:02:05

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...

编程新知 2025/7/5 8:44:12