JS小数运算的正确姿势:保留两位小数技巧全解析
前言
当你在开发网页或者移动应用时,你可能会遇到需要对数字进行精确处理的情况,比如需要将一个数字保留两位小数。而 JavaScript 作为一种广泛使用的编程语言,也提供了多种方法来实现这一功能。本文将向你介绍如何在 JavaScript 中保留两位小数。
返回数据示例:
3.1415926535897
85.452655625313
99.128532659596
话不多说,下面直接进入实战
1. toFixed() 方法
toFixed()
方法用于把数字转换为字符串,结果的小数点后有指定位数的数字。
参数 | 描述 |
---|---|
x | 必需的参数。规定小数的位数,可取 0 ~ 20 之间的值,包括 0 和 20,有些实现可以支持更大的数值范围。如果省略了该参数,将用 0 代替。 |
实例
let numBer = 3.1415926;
numBer = numBer.toFixed(2);
console.log(numBer); // 3.14
注意:
该方法会将数值四舍五入,例如 3.148
经过 toFixed(2)
方法得到的结果将是 3.15
且 toFixed()
方法会改变数据类型为字符串。
2. Math.floor() 方法
Math.floor()
方法返回小于或等于一个给定数字的最大整数,可以理解 Math.floor()
为向下取整;其相对的是 Math.ceil()
,此方法是向上取整。
参数 | 描述 |
---|---|
x | 必需的参数。任意数值或表达式。 |
实例
let numBer = 3.1415926;
numBer = Math.floor(numBer * 100) / 100;
console.log(numBer); // 3.14
注意:
该方法不会修改原有数据类型。
3. 字符串+正则匹配
实例
let numBer = 3.1415926;
numBer = Number(numBer.toString().match(/^\d+(?:\.\d{0,2})?/));
console.log(numBer);// 3.14
4. 强制保留2位小数(例如3.00)
实例
let numBer = 3;
numBer = this.numWay(numBer);// 调用numWay方法
console.log(numBer); // 3.00
methods
方法代码
methods: {numWay(x) {var f = parseFloat(x);if (isNaN(f)) {return false;}var f = Math.round(x * 100) / 100;var s = f.toString();var rs = s.indexOf(".");if (rs < 0) {rs = s.length;s += ".";}while (s.length <= rs + 2) {s += "0";}return s;},
},
5. 四舍五入保留2位小数(若第二位小数为0,则保留一位小数)
实例
let numBer = 3.1001;
numBer = this.numDelivery(numBer);// 调用numDelivery方法
console.log(numBer); // 3.1
methods
方法代码
methods: {numDelivery(num) {var result = parseFloat(num);if (isNaN(result)) {alert("传递参数错误,请检查!");return false;}result = Math.round(num * 100) / 100;return result;},
},
6. substring()方法 + indexOf()方法
substring()
方法用于提取字符串中介于两个指定下标之间的字符。返回的子串包括 开始 处的字符,但不包括 结束 处的字符
参数 | 描述 |
---|---|
from | 必需的参数。一个非负的整数,规定要提取的子串的第一个字符在 string Object 中的位置。 |
to | 非必需的参数。一个非负的整数,比要提取的子串的最后一个字符在 string Object 中的位置多 1。如果省略该参数,那么返回的子串会一直到字符串的结尾。 |
indexOf()
方法可返回某个指定的字符串值在字符串中首次出现的位置,如果没有找到匹配的字符串则返回 -1
。
参数 | 描述 |
---|---|
searchvalue | 必需的参数。规定需检索的字符串值。 |
start | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。如省略该参数,则将从字符串的首字符开始检索。 |
实例
let numBer = 3.1415926 + "";
var str = numBer.substring(0, numBer.indexOf(".") + 3);
console.log(str);// 3.14
拓展
为了方便,我们可以写一个专门的方法,需要的时候调用即可。如下代码:
<template><div>{{this.getValue(719.0721)}}</div>
</template><script>
export default {methods: {getValue(val) {return val.toFixed(2);},},
};
</script>
页面展示
JS小数运算的正确姿势:保留两位小数技巧全解析相关推荐
- python保留两位小数_python中怎么实现保留两位小数
Python中实现保留两位小数的方法如下: 保留两位小数,并做四舍五入处理 方法一: 使用字符串格式化>>> a = 12.345 >>> print(" ...
- python列表数据怎么保留两位小数_python中怎么实现保留两位小数
Python中实现保留两位小数的方法如下: 保留两位小数,并做四舍五入处理 方法一: 使用字符串格式化>>> a = 12.345 >>> print(" ...
- python中保留两位小数的编写程序_P081 保留两位小数
所属年份:2011.3;2011.9 请编一个函数 float fun(double h),该函数的功能是:使变量h中的值保留两位小数,并对第三位进行四舍五入(规定h中的值为正数). 例如,若h 值为 ...
- java保留两位小数_java使double保留两位小数的多方法 java保留两位小数
这篇文章主要介绍了java使double类型保留两位小数的方法,大家参考使用吧 mport java.text.DecimalFormat; DecimalFormat df = new Decima ...
- java中想要保留2位小数_java使double保留两位小数的多方法 java保留两位小数
mport java.text.DecimalFormat; DecimalFormat df = new DecimalFormat("######0.00"); do ...
- java保留二位小数_java使double保留两位小数的多方法 java保留两位小数
复制代码代码如下: mport java.text.DecimalFormat; DecimalFormat df = new DecimalFormat("######0.00& ...
- java double 保留小数_java使double类型保留两位小数的方法
java使double类型保留两位小数的方法 本文是百分网小编整理的主要介绍关于java使double类型保留两位小数的方法,有需要的朋友们一起看看吧!想了解更多相关信息请持续关注我们应届毕业生考试网 ...
- 使double保留两位小数的多方法 java保留两位小数
import java.text.DecimalFormat; DecimalFormat df = new DecimalFormat("######0.00"); double ...
- php 保留两位小数 四舍五入的函数,PHP保留两位小数且四舍五入
php保留两位小数并且四舍五入 Php代码 $num = 123213.666666; echo sprintf("%.2f", $num); $num = 123213.6 ...
- float 保留两位小数 php,怎么使float保留两位小数或多位小数
怎么使float保留两位小数或多位小数 两种方法: import java.math.*; -- 方法1: float f = 34.232323; BigDecimal b = new BigDec ...
最新文章
- 统计学原理----描述性统计
- ElasticSearch Java Api(三) -更新索引库
- 在WinRT中读取资源文件
- Golang 标准库提供的Log(一)
- CodeForces - 1307C Cow and Message(思维)
- 大学计算机教学ppt数制,大学计算机基础 第3讲 数制及其相互转换 国家精品课程课件(可编辑)...
- UE4 多人联机显示每个人的playid
- libSVM介绍(二)
- Android Studio 创建第一个Android工程项目
- mobilenet V1
- 随笔︱MRO-Microsoft R Open使用心得与相应内容总结
- Boost Thread 编程指南、Boost线程入门教程
- 用HTML语言制作一个非常浪漫的生日祝福网,手把手教你制作炫酷生日祝福网页
- Redisson lua脚本解读
- 思科网络技术学院教程:企业中的路由和交换技术简介第十章实验总结
- java 后端,Java后端岗位职责描述
- Java计算文件MD5值
- 一次下载多个文件的解决思路-JS
- seo常用工具,seo常用工具搜行者SEO
- POSTGRESQL index advisor 4种方式 (国内,国外,远程,云)那个更好
热门文章
- 《Java语言程序设计与数据结构》编程练习答案(第四章)(二)
- FE内容付费系统源码
- 在线办公的前浪与后浪:输出工具到输出能力
- 摩杜云受邀出席CDEC中国数据智能生态大会
- 网站被K多种情况解析 怎么做才能快速恢复?
- 并发编程-25 高并发处理手段之消息队列思路 + 应用拆分思路 + 应用限流思路
- C++设计模式——状态模式
- javascript运算符:==与===的区别,||和特殊用法
- Verion 9 of Highlight.js has reached EOL
- SLM27211 4A 120V 一款国产的NMOS驱动器 兼容 UCC27211 NCP81075 商用的电源解决方案