您现在的位置是：首页 > 文章详情

每日一博 | JavaScript 字节单位换算函数【详解】

日期：2021-11-08点击：516收藏

前言：我们在日常开发中，经常会遇到字节单位换算的场景。一般用简单的除法来计算时，都会遇到计算精度的问题。下面，我们着重要将的是一种精确字节单位换算的详解：

1. 先看代码

const byteConvert = function(bytes) { if (isNaN(bytes)) { return ''; } let symbols = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; let exp = Math.floor(Math.log(bytes)/Math.log(2)); if (exp < 1) { exp = 0; } let i = Math.floor(exp / 10); bytes = bytes / Math.pow(2, 10 * i); if (bytes.toString().length > bytes.toFixed(2).toString().length) { bytes = bytes.toFixed(2); } return bytes + ' ' + symbols[i]; }; // 函数调用 byteConvert(bytes); 复制代码

这段代码很好用，而且也是网上普遍流传的一种方法，我们下面就详细了解一下，为什么这段代码可以实现这种效果呢？

我们可以看到，这个函数中的核心运算是对数运算和指数运算，JavaScript 中的 Math.log() 函数是对数运算，需要强调的一点是，它是自然对数运算（以 e 为底）。

我们都知道，1024 = 2^10，那么进行对数运算就会变为:

$10 = log_{2}1024$

接下来就需要理解这行核心代码了：let exp = Math.floor(Math.log(bytes)/Math.log(2));。理解它之前，我们需要搬出来对数运算的一个重要推论——换底公式，如下：

$log_{a}b = \frac{log_{c}b}{log_{c}a}$

现在是不是很明了了，Math.log(bytes)/Math.log(2) 其实就是再求 bytes 以 2 为底的指数，我们换算一下，如下：

$\frac{log_{e}{bytes}}{log_{e}{2}} = log_{2}{bytes}$

$exp = log_{2}{bytes}$

最后的 exp 就是我们得到的指数了。exp 为 10 时，bytes 就是 1024。所以后面的运算都是依据 10 这个单位量来计算的。i 为 1 就是最起码有一个 KB 的量级了，i 为 2 就是最起码有一个 MB 的量级，等等类推，后续做了一些保留小数位的优化等等，就不再赘述了，欢迎大家共同交流类似有趣的代码~~