2021 年 10 月 30 日

Javascript 中的数字截断(Number Truncation)

使用 Math.trunc() 来截断一个浮点数并返回它的整数部分。该函数不会做任何的舍入，它简单地删除小数部分。现在你得到了整数部分，yay 🎊

const number = 80.6;
// Old Way
function truncNumber() {
  number < 0 ? Math.ceil(number) : Math.floor(number);
}
truncNumber(number); // 80

// ✅ES6 Way
const es6 = Math.trunc(number); // 80

例子

Math.trunc() 简单地截断(剪除)数字小数点和小数点后面的部分。无论参数是正数还是负数。

Math.trunc(80.9); // 80
Math.trunc(80.8); // 80
Math.trunc(80.8); // 80
Math.trunc(80.6); // 80
Math.trunc(80.5); // 80
Math.trunc(80.4); // 80
Math.trunc(80.3); // 80
Math.trunc(80.2); // 80
Math.trunc(80.1); // 80
Math.trunc(-80.1); // -80

现在让我们看看转化非数字参数的例子：

Math.trunc('80.1'); // 80
Math.trunc('hello'); // NaN
Math.trunc(NaN); // NaN
Math.trunc(undefined); // NaN
Math.trunc(); // NaN

使用 parseInt 进行数字截断

使用 parseInt 你会获得相似的结果：

parseInt(80.1); // 80
parseInt(-80.1); // -80
parseInt('80.1'); // 80
parseInt('hello'); // NaN
parseInt(undefined); // NaN
parseInt(); // NaN

Math.trunc() 与 parseInt() 相比

parseInt 主要用于数字参数。所以如果你正在处理数字，Math.trunc() 是更好的方法。

如果你对此好奇，我写过一个针对这两个函数的性能测试。

jsPerf(英文): Math.trunc() 与 parseInt() 相比

使用 parseInt 的缺陷

使用 parseInt 的潜在问题是，当你处理那些非字符串参数的时候，例如一个数字，它将首先使用 toString() 抽象操作将值转化为一个字符串。大多数情况下使用 parseInt 是运行良好的，但是让我看一个不好的例子：

const number = 1000000000000000000000.5;
const result = parseInt(number);
console.log(result); // 1 <-- 😱

☝️ 为什么会这样呢？因为我们的参数不是一个 string，于是 parseInt 首先将这个参数转化为一个 string。

const number = 1000000000000000000000.5;
const result = number.toString();
console.log(result); // "1e+21"

所以当我们尝试从 1e+21 抓取整数部分，parseInt 只知道抓取值 1。如此，使用 parseInt 确实有缺陷。因为这一边缘情况，你可能考虑使用 Math 的函数 👍

浏览器兼容性

大部分现代浏览器支持 Math.trunc()，Internet Explorer 除外。我知道如果需要支持旧的浏览器是沮丧的(😞)，请使用旧的方法 😕

MDN：Math.trunc 的浏览器兼容性

Math.trunc 浏览器填充(Polyfill)，在不支持的浏览器中提供服务：

if (!Math.trunc) {
  Math.trunc = function (v) {
    v = +v;
    if (!isFinite(v)) return v;

    return v - (v % 1) || (v < 0 ? -0 : v === 0 ? v : 0);
  };
}

或：

if (!Math.trunc) {
  Math.trunc = function (v) {
    v = +v;
    return v - (v % 1) || (!isFinite(v) || v === 0 ? v : v < 0 ? -0 : 0);
  };
}

社区支持

位操作符解决方法

双位操作符 ~~

console.log(~~80.6); // 80

感谢：twitter.com@Jorgert120

按位或(OR) `|`

console.log(80.6 | 0); // 80

感谢：twitter.com@mac_experts

toFixed 解决方法

你可以使用 .toFixed() 方法

(80.645).toFixed(); // “80”

虽然这个方法返回一个字符串，但是我们可以再次将它转化为数字：

Number((80.645).toFixed()); // 80

有一点凌乱，但是通过设置参数，你可以选择你想要位数的结果。

Number((80.645).toFixed(1)); // 80.6

感谢：medium.com@Frani 🍍

资源

本文作者 Samantha Ming，转载请注明来源链接：
原文链接：https://www.samanthaming.com/tidbits/55-how-to-truncate-number
本文链接：https://tie.pub/2019/06/number-truncation-in-javascript/