前端取值问题总结

作者	内容	时间
jj	前端取值问题总结	2023年7月20日

背景

1. 项目中经常会遇到取整问题，所以做了下总结。总的来说分为两个方面，直接取整（不考虑小数点后的部分）还是计算后取整（例如四舍五入，向上取整等）。
2. 在项目中,经常会遇到一些比例展示问题,很多原生方法都可以实现这些需求,不过会遇到一些数值特别大的时候就会造成比例不准确,如 700002/700003这种情况就会得出 100.0%(保留一位小数),测试人员就提出了缺陷,认为这种情况应该为99.9%.所以总结整理了一些取值方法。

一、直接取整

parseInt(string,radix)

string 必需。要被解析的字符串。
radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。
如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，
将以 16 为基数。
如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

返回值

返回解析后的数字。

说明

当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。
举例，如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

提示和注释

注释：只有字符串中的第一个数字会被返回。
注释：开头和结尾的空格是允许的。
提示：如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

parseInt("2015nov"), //2015
parseInt(""), //NaN
parseInt("0xA"), //10(十六进制)
parseInt(20.15), //20
parseInt(-20.15), //-20
parseInt("070"); //56(八进制数)

二、计算取整

1.四舍五入 Math.round(number)

number 必需。必须是数字。

返回值

与 x 最接近的整数。

说明

对于 0.5，该方法将进行上舍入。
例如，3.5 将舍入为 4，而 -3.5 将舍入为 -3。

Math.round(20.1), //20
Math.round(20.5), //21
Math.round(20.9), //21
Math.round(-20.1), //-20
Math.round(-20.5), //-20 注意这里是-20 而不是-21
Math.round(-20.9); //-21

2.向上取整 Math.ceil(number)

number 必需。必须是数字。

返回值

大于等于 x，并且与它最接近的整数。

说明

ceil() 方法执行的是向上取整计算，它返回的是大于或等于函数参数，并且与之最接近的整
数。

Math.ceil(20.1), //21
Math.ceil(20.5), //21
Math.ceil(20.9), //21
Math.ceil(-20.1), //-20
Math.ceil(-20.5), //-20
Math.ceil(-20.9); //-20

3.向下取整 Math.floor(number)

number 必需。必须是数字。

返回值

小于等于 x，且与 x 最接近的整数。

说明

floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的
整数。

Math.floor()`取向下最接近的整数。
Math.floor(20.1), //20
Math.floor(20.5), //20
Math.floor(20.9), //20
Math.floor(-20.1), //-21
Math.floor(-20.5), //-21
Math.floor(-20.9), //-21

4.取绝对值 Math.abs(number)

1）abs()

number 必需。必须是一个数值。

返回值

x 的绝对值。
Math.abs(-20;); //20

2）加减法

var aaa=-20;
var bbb=-aaa //20

5.保留一位小数 toFixed(number)

number 必需。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以
支持更大的数值范围。如果省略了该参数，将用 0 代替。

返回值

返回 NumberObject 的字符串表示，不采用指数计数法，小数点后有固定的 num 位数字。
如果必要，该数字会被舍入，也可以用 0 补足，以便它达到指定的长度。如果 num 大于
le+21，则该方法只调用 NumberObject.toString()，返回采用指数计数法表示的字符串。

抛出

当 num 太小或太大时抛出异常 RangeError。0 ~ 20 之间的值不会引发该异常。有些实
现支持更大范围或更小范围内的值。
当调用该方法的对象不是 Number 时抛出 TypeError 异常。

6.保留 X 位小数(不四舍五入)

function formatDecimal(num, decimal) {//num 传入小数, decimal 保留几位小数
var _num = num.toString()
var index = _num.indexOf('.')
if (index !== -1) {
_num = _num.substring(0, decimal + index + 1)
} else {
_num = _num.substring(0)
}
return parseFloat(_num).toFixed(decimal)
}
formatDecimal(10.124, 2) // 10.12
formatDecimal(10.125, 2) // 10.12
formatDecimal(10.129, 2) // 10.12

总结

以后在项目中可以根据自己的实际需求选择取整方式以便达到展示准确,合理。