JavaScript 实现大数简化,带单位显示

ops/2024/11/15 4:46:07/

一、场景

        在前端展示的数据时,如果数据数值太大,会导致展示的数据非常长,不仅用户不能迅速读出数值大小而且影响美观,此时我们需要将这种大数简化为带单位的数值,如 250000 转为 25.0万。

二、实现函数

javascript">    // 大数简化函数function simplifyNumber(num) {// 定义单位数组const units = ['', '万', '亿', '万亿', '亿亿'];// 获取数字的数量级let unitIndex = Math.floor((String(num).length - 1) / 4);let simplifiedNum = num;if (unitIndex > 0) {const unit = units[unitIndex];//获取当前数量级的整数,如 1级 则是 10000,用于下面缩小相应的倍数,来简化数字const divisor = Math.pow(10, unitIndex * 4);//缩小相应倍数,并保留1为小数,拼接单位恢复大小simplifiedNum = (num / divisor).toFixed(1) + unit;}return simplifiedNum;}

 

效果实现:如输入 14000 ,输出:1.4万


http://www.ppmy.cn/ops/8506.html

相关文章

UBUNTU新版本,一键安装NETCDF,安装netcdf-c netcdf-v

UBUNTU新版本,一键安装NETCDF,安装netcdf-c netcdf-v_ubuntu安装netcdf-CSDN博客 UBUNTU新版本,一键安装NETCDF,安装netcdf-c netcdf-v 参考连接傻瓜式安装netcdf-fortran库 1)保存bash代码,文件名为netc…

【PHP快速上手(十四)】

目录 PHP快速上手(十四)PHP 中常用数据库操作使用 WHERE 子句进行条件查询使用 ORDER BY 子句进行排序使用 UPDATE 语句更新数据使用 DELETE 语句删除数据执行事务总结 PHP快速上手(十四) PHP 中常用数据库操作 当使用 PHP 中的…

非计算机专业考软考高项有必要吗?

我认为这非常重要。 看了你的介绍,如果你已经考取了会计证书,而且想要考取计算机专业的证书,或者你的职业规划涉及到计算机岗位,又或者你对计算机感兴趣,我建议你优先考虑软考,因为这个证书的含金量是有保…

Linux gettid()系统调用源码分析

1、gettid()系统调用作用 gettid() 是一个Linux系统调用&#xff0c;用于获取当前进程的线程ID。在使用此系统调用时&#xff0c;你需要包含 <sys/syscall.h> 头文件&#xff0c;并且可以通过直接调用或使用 syscall() 函数来进行系统调用。 注意&#xff1a;ps 中显示的…

List<int[]>[] g = new ArrayList[n];

在Java中&#xff0c;List<int[]>[] g new ArrayList[n]; 这行代码定义了一个数组 g&#xff0c;该数组的每个元素都是一个 ArrayList<int[]> 类型的对象。这里&#xff0c;n 是预期图中顶点的数量&#xff0c;因此 g 数组的长度是 n。 List<int[]>&#x…

用html写一个窗口风景动画

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>窗边风景动画</title><link rel"stylesheet" href"./style.css"> </head> <body><!-- 窗户 -->&l…

NLP vs. LLMs: 理解它们之间的区别

作者&#xff1a;Elastic Platform Team 随着人工智能持续发展并在无数行业解决问题&#xff0c;技术的一个关键部分是能够无缝地桥接人类语言和机器理解之间的差距。这就是自然语言处理&#xff08;NLP&#xff09;和大型语言模型&#xff08;LLMs&#xff09;的用武之地。它们…

【函数式接口使用✈️✈️】通过具体的例子实现函数结合策略模式的使用

目录 &#x1f378;前言 &#x1f37b;一、核心函数式接口 1. Consumer 2. Supplier 3. Function,> &#x1f37a;二、场景模拟 1.面向对象设计 2. 策略接口实现&#xff08;以 Function 接口作为策略&#xff09; &#x1f379;三、对比 &#x1f377;文末 &am…