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
,那么进行对数运算就会变为:
接下来就需要理解这行核心代码了:let exp = Math.floor(Math.log(bytes)/Math.log(2));
。理解它之前,我们需要搬出来对数运算的一个重要推论——换底公式,如下:
现在是不是很明了了,Math.log(bytes)/Math.log(2)
其实就是再求 bytes
以 2 为底的指数,我们换算一下,如下:
最后的 exp
就是我们得到的指数了。exp 为 10 时,bytes 就是 1024。所以后面的运算都是依据 10 这个单位量来计算的。i 为 1 就是最起码有一个 KB 的量级了,i 为 2 就是最起码有一个 MB 的量级,等等类推,后续做了一些保留小数位的优化等等,就不再赘述了,欢迎大家共同交流类似有趣的代码。