JavaScript中保留小数点后N位方法总结

更新时间：2023年06月01日 11:59:46 作者：时倾

这篇文章主要为大家详细介绍了JavaScript中保留小数点后N位的几个常用方法，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下

四舍五入保留小数后 n 位

补0: 使用 toFixed(digits) 方法

四舍五入为指定的小数位数
返回字符串
小数实际位数不够指定的位数，不足的部分会补 0

(1).toFixed(2) // '1.00'
(1.2).toFixed(2) // '1.20'
(-2).toFixed(2) // '-2.00'
(1.12345678).toFixed(7) // '1.1234568'

劣势

参数必须是 0 ~ 20 之间的值，包括 0 和 20。参数 < 0 报错。
会出现数字精度问题。详见ECMAScript 中的 toFixed 定义。

(1111111111.1234567891234).toFixed(8) // '1111111111.12345672'

不补0：自定义转换方法

四舍五入为指定的小数位数
返回数字
小数实际位数不够指定的位数，不足的部分不会补 0

function roundFun(number, precision) {
  return Math.round(+number + 'e' + precision) / Math.pow(10, precision);
}
// 或
function roundFun(number, precision) {
  return Math.round(number * Math.pow(10, precision)) / Math.pow(10, precision);
}

roundFun(1, 2) // 1
roundFun(1.2, 2) // 1.2
roundFun(-2, 2) // -2
roundFun(1.12345678, 7) // 1.1234568
roundFun(1111111111.1234567891234, 8) // 1111111111.1234567

精确显示小数后 n 位

不补0

精确保留小数后 n 位
返回数字
小数实际位数不够指定的位数，不足的部分不会补 0

const keepDecimal = (numStr, precision) => {
  const regexp = new RegExp(`^\\d+(?:\\.\\d{0,${precision}})?`)
  const result = numStr.match(regexp)
  return result ? result[0] : '0'
}

keepDecimal('1', 2) // '1'
keepDecimal('1.2', 2) // '1.2'
keepDecimal('1.12345678', 7) // '1.1234567'
keepDecimal('12345.1234567891234', 8) // '12345.12345678'
keepDecimal('123456789.1234567891234', 10) // '123456789.1234567891'

劣势

不支持负数
不支持字符串

keepDecimal('-2', 2) // '0'
keepDecimal('122sss', 10) // '122'
keepDecimal('abcd', 10) // '0'

补0

精确保留小数后 n 位
返回字符串
小数实际位数不够指定的位数，不足的部分会补 0

const keepDecimal = (numStr, precision) => {
  const regexp = new RegExp(`^\\d+(?:\\.\\d{0,${precision}})?`)
  const result = numStr.match(regexp)
  return result ? result[0] : '0'
}

const keepDecimalPlaces = (numStr, precision) => {
  let numberStr = keepDecimal(numStr, precision)
  let rs = numberStr.indexOf('.')
  if (rs < 0 && precision > 0) {
    rs = numberStr.length
    numberStr += '.'
  }
  while (numberStr.length <= rs + precision) {
    numberStr += '0'
  }
  return numberStr
}

keepDecimalPlaces('1', 2) // '1.00'
keepDecimalPlaces('1.2', 2) // '1.20'
keepDecimalPlaces('1.12345678', 7) // '1.1234567'
keepDecimalPlaces('12345.1234567891234', 8) // '12345.12345678'
keepDecimalPlaces('123456789.1234567891234', 10) // '123456789.1234567891'
keepDecimalPlaces('123456789.000001', 10) // '123456789.0000010000'

劣势

不支持负数
不支持字符串

keepDecimalPlaces('-2', 2) // '0.00'
keepDecimalPlaces('122sss', 10) // '122.0000000000'
keepDecimalPlaces('abcd', 10) // '0.0000000000'

到此这篇关于JavaScript中保留小数点后N位方法总结的文章就介绍到这了,更多相关JavaScript保留小数点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序登录按钮遮罩浮层效果的实现方法
这篇文章主要给大家介绍了关于微信小程序登录按钮遮罩浮层效果的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
js实现按钮进行某行上移下移
这篇文章主要为大家详细介绍了js实现按钮进行某行上移下移，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
Js判断参数(String,Array,Object)是否为undefined或者值为空
在一些前端控件要提交数据到服务器端的数据验证过程中，需要判断提交的数据是否为空。如果是普通表单的字符串数据，只需要在 trim 后判断 length 即可，而这里需要的数据可以是各种不同的类型，通过 JSON.stringify(data) 进行序列化后再传递
2013-11-11
JavaScript使用闭包模仿块级作用域操作示例
这篇文章主要介绍了JavaScript使用闭包模仿块级作用域操作,结合实例形式分析了javascript闭包的原理及模仿块级作用域相关操作技巧,需要的朋友可以参考下
2019-01-01
Google Map API更新实现用户自定义标注坐标
由于工作需要，又要开始看Google Map API 代码，今天再把我之前的GoogleMap类，又更新了下，加了个简单的用户自定义标注坐标的功能。看看吧(代码没怎么优化，别见笑)
2009-07-07
JavaScript使用html2canvas实现截取HTML并生成图片
在前端开发中,有时我们需要将网页的一部分或整个页面截取并保存为图片,这在生成报告、分享内容或保存用户界面状态等场景中非常有用,本文将介绍如何使用 JavaScript 库 html2canvas 来实现这一功能,并提供一个完整的示例,需要的朋友可以参考下
2024-10-10
超实用的全新JavaScript事件Scrollend实例详解
这篇文章主要为大家介绍了超实用的全新JavaScript事件Scrollend实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
JavaScript实现加载导出CZML文件详解
CZML是一种基于 JSON 的文件格式,用于描述地理空间数据和时间动态场景,这篇文章为大家详细介绍了如何使用JavaScript实现CZML文件的加载与导出,需要的可以了解下
2025-02-02
js+css3制作时钟特效
本文给大家汇总了2个JavaScript+css3实现的时钟特效的代码，非常的漂亮，有需要的小伙伴可以来参考下
2016-10-10
用最通俗易懂的代码帮助新手理解javascript闭包推荐
我同样也是个javascript新手，怎么说呢，先学的jquery，精通之后发现了javascript的重要性，再回过头来学javascript面向对象编程
2012-03-03