您的当前位置:首页>全部文章>文章详情

【JavaScript】JS四舍五入保留两位小数(二)

CrazyPanda发表于:2024-03-12 20:39:28浏览:305次TAG:

        在Web前端开发中,大多数的项目都是需要表单支持的,而在表单中有一种比较常见的功能是要你四舍五入保留两位小数,接下来将为大家详细的介绍一下保留两位小数的六种常用方法。

1. toFixed()方法

        介绍:这是JS自带的一个方法,可以四舍五入保留指定位数的小数,并且位数不够时可以自动补0

        注意:保留两位小数,将数值类型的数据改变成了字符串类型

NumberObject.toFixed(num)---num是保留的位数,取值为0-20,默认为0 

        基础使用如下,自动补0等就不展示了

var num1 = 55.3715; 
console.log(num1.toFixed(2));

image.png

2. substr字符串截取 

        介绍:substr是字符串自带的一个方法,主要是进行字符串的截取,所以这里使用需要将整型先转变为字符串类型。不四舍五入。

        注意:将数值类型的数据改变成了字符串类型

substr(start, length) 返回子字符串中要包含的第一个字符的索引,要提取的字符数

var num1 = 55.3785 + ""; 
console.log("substr方式保留两位小数:");
console.log(num1.substr(0,num1.indexOf(".")+3));
 
//输出55.37

3. Math自带的方法 

1). Math.floor()

        介绍:不四舍五入,向下取整。

        注意:不改变数据类型

Math.floor(11.46)=Math.floor(11.68)=Math.floor(11.5)=11
Math.floor(-11.46)=Math.floor(-11.68)=Math.floor(-11.5)=-12

2). 浮点数四舍五入

        介绍:四舍五入,(小数点后第一位)大于五全部加,等于五正数加,小于五全不加

        注意:不改变数据类型

//小数点后第一位<5
正数:Math.round(11.46)=11
负数:Math.round(-11.46)=-11
 
//小数点后第一位>5
正数:Math.round(11.68)=12
负数:Math.round(-11.68)=-12
 
//小数点后第一位=5
正数:Math.round(11.5)=12
负数:Math.round(-11.5)=-11

 3). Math.ceil()

        介绍:不四舍五入,向上取整。

        注意:不改变数据类型

Math.ceil(11.46)=Math.ceil(11.68)=Math.ceil(11.5)=12
Math.ceil(-11.46)=Math.ceil(-11.68)=Math.ceil(-11.5)=-11

4. 正则匹配

        介绍: 不四舍五入,字符串匹配

        注意:先转为字符串,再转为整型

Number(15.7784514000.toString().match(/^\d+(?:\.\d{0,2})?/))

补充:补位功能实现

        有一些方法是没有自带补位的,这时如果业务需求是要自动补位,可以添加以下方法并去调用

var num1 = parseFloat(55); 
  if (!isNaN(num1)) { 
  num1 = Math.round(num1*100)/100; 
  var str = num1.toString(); 
   var rs = str.indexOf('.'); 
   if (rs < 0) { 
    rs = str.length; 
    str += '.'; 
   } 
   while (str.length <= rs + 2) { 
    str += '0'; 
   } 
  console.log("将浮点数四舍五入,取小数点后2位,位数不够进行补位:");
  console.log(str);
}

        以上就是js保留小数的几种方法,可以根据自己的需要选择,toFixed是比较常用比较好的方法,但是IE5.5以上的版本才支持。

猜你喜欢

【JavaScript】javascript中doucument对象的属性和方法有哪些
doucument对象的属性和方法有:body、cookie、domain、lastmodified、referrer、title、close()、open()、write()、getelementbyid()、normalize()等等。本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。Document 对象每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
发表于:2024-04-14 浏览:284 TAG:
【Javascript】localStorage和sessionStorage的使用
一、什么是localStorage、sessionStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。&nbsp;二、localStorage的优势与局限localStorage的优势1、localStorage拓展了cookie的4K限制2
发表于:2024-03-27 浏览:336 TAG: #javascript #localstorage #sessionstorage
【JavaScript】JS获取时间并格式化
方法一:使用JavaScript的Date对象和相关方法来获取时间并格式化var&nbsp;now&nbsp;=&nbsp;new&nbsp;Date(); &nbsp; //&nbsp;格式化日期 var&nbsp;year&nbsp;=&nbsp;now.getFullYear(); var&nbsp;month&nbsp;=&nbsp;(now.getMonth()&nbsp;+&nbsp;1&nbsp;&lt;&nbsp;10&nbsp;?&nbsp;&quot;0&quot;&amp;nbs
发表于:2024-08-14 浏览:300 TAG:
【JavaScript】JS中referer的使用
HTTP请求中有一个referer的报文头,用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个链接到达cctv.com首页,那么就referrer就是www.sina.com.cn/sports/了。在Javascript中,我们可以通过document.referrer来获取同样的信息。通过这个信息,我们就可以知道访客是从什么渠道来到当前页面的。这对于Web Analytics来说,是非常重要的,这可以告诉我们不同渠道带来的流量的分布情况,还有用户搜索
发表于:2024-04-24 浏览:354 TAG:
【JavaScript】如何从 JavaScript 数组中删除重复元素?
在 JavaScript 中,有多种方法可以从数组中删除重复元素。在本文中,我们将探讨一些删除重复元素的顶级方法。使用filter()方法filter()方法使用传递的条件创建一个新的元素数组。这将仅包含作为此过滤器方法的一部分返回 true 的元素。因此,要实现删除重复元素,我们只需在 filter() 方法中添加条件即可,它会完成剩下的工作。#过滤器.js&lt;script&gt; &nbsp;&nbsp;&nbsp;var&nbsp;arr&nbsp;=&nbsp;[&quot;stev
发表于:2024-04-16 浏览:304 TAG:
【JavaScript】JS复制剪切神器clipboard.js基本使用
clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中 clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;
发表于:2024-11-05 浏览:143 TAG: #javascript #前端 #clipboard
【JavaScript】JS时间和时间戳互转
在JavaScript中,获取当前时间的时间戳(秒值)可以使用 Date.now() 方法,而将时间戳转换为日期格式可以使用 Date 对象。获取当前时间戳(秒值):let&nbsp;timestampSeconds&nbsp;=&nbsp;Date.now()&nbsp;/&nbsp;1000; console.log(timestampSeconds);&nbsp;//&nbsp;输出的是以秒为单位的时间戳将时间戳转换为日期:let&nbsp;timestampSeconds&nbsp;=&amp;
发表于:2024-08-14 浏览:264 TAG:
【JavaScript】JS防抖动方法
防抖动是指在事件被触发时,为了减少因为快速连续操作导致的大量事件触发,通常会设置一个延时,当事件被触发后,等待一段时间,如果在这段时间内没有新的相同事件被触发,则执行该事件的操作。在JavaScript中,防抖动通常可以通过设置定时器来实现。当事件触发时,如果已经有一个定时器在等待,则清除它并重新设置一个新的定时器。只有当定时器到期而事件也没有被触发时,事件绑定的处理函数才会执行。function&nbsp;debounce(fn,&nbsp;wait)&nbsp;{ &nbsp;&nbsp;l
发表于:2024-04-24 浏览:275 TAG:
【JavaScript】JS四舍五入保留两位小数(二)
&nbsp; &nbsp; &nbsp; &nbsp; 在Web前端开发中,大多数的项目都是需要表单支持的,而在表单中有一种比较常见的功能是要你四舍五入保留两位小数,接下来将为大家详细的介绍一下保留两位小数的六种常用方法。1.&nbsp;toFixed()方法&nbsp; &nbsp; &nbsp; &nbsp; 介绍:这是JS自带的一个方法,可以四舍五入保留指定位数的小数,并且位数不够时可以自动补0&nbsp; &nbsp; &nbsp; &nbsp; 注意:保留两位小数,将数值类型的数据改变
发表于:2024-03-12 浏览:306 TAG:
【JavaScript】JS获取时间戳秒值
方法一:使用JavaScript的Date对象的getTime()方法来获取当前时间的毫秒值,然后将其除以1000得到秒值。var&nbsp;timestamp&nbsp;=&nbsp;Math.floor(new&nbsp;Date().getTime()&nbsp;/&nbsp;1000);方法二:使用JavaScript的Date对象的getTime()方法获取当前的毫秒值,然后使用Math.floor()函数向下取整得到秒值。var&nbsp;timestamp&nbsp;=&nbsp;
发表于:2024-08-14 浏览:262 TAG: