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保留小数点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript避免数字计算精度误差的方法详解
本篇文章主要是对javascript避免数字计算精度误差的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
JavaScript提取元素中第一个子元素的实现方法
本文主要介绍了JavaScript提取元素中第一个子元素的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06
微信小程序之高德地图多点路线规划过程示例详解
这篇文章主要介绍了微信小程序之高德地图多点路线规划过程示例详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-01
JS打印彩色菱形的实例代码
本文通过一段简单的实例代码给大家介绍js实现打印彩色菱形的方法，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-08-08
在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）
在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）
2011-12-12
js随机生成字母数字组合的字符串随机动画数字
本篇文章给大家分享的js随机生成字母数字组合的字符串，js随机生成动画数字，包括常用的产生随机数的用法，需要的朋友可以参考下
2015-09-09
js判断一个字符串是以某个字符串开头的简单实例
下面小编就为大家带来一篇js判断一个字符串是以某个字符串开头的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-12-12
用函数式编程技术编写优美的 JavaScript_ibm
函数式编程语言在学术领域已经存在相当长一段时间了，但是从历史上看，它们没有丰富的工具和库可供使用。随着 .NET 平台上的 Haskell 的出现，函数式编程变得更加流行。一些传统的编程语言，例如 C++ 和 JavaScript，引入了由函数式编程提供的一些构造和特性。在许多情况下，JavaScript 的重复代码导致了一些拙劣的编码。如果使用函数式编程，就可以避免这些问题。此外，可以利用函数式编程风格编写更加优美的回调。
2008-05-05
如何将JS的变量值传递给ASP变量
asp作为主页面，外接一个js的，我想知道一下能否在js里面调用asp的变量值，如果能这些值是怎么传递过去的呢？本文将提供解决方法，需要的朋友可以参考下
2012-12-12
postMessage的两种使用方式
这篇文章主要介绍了使用postMessage实现iframe跨域通信，第一种使用postMessage在irfame中实现跨域数据传递，第二种使用postMessage在window.open()中的使用，本文结合示例代码给大家详细讲解，需要的朋友跟随小编一起看看吧
2022-03-03