教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载在处理文件大小、磁盘占用、内存统计等场景时我们经常需要把一串冰冷的数字字节值如27145424323.5821转换为27.145 GB这样直观的字符串。本篇文章以仓库 pretty-print-number-of-bytes.md 中的经典工具函数prettyBytes为骨架逐步拆解其单位数组、指数计算、精度截断与字符串组装的完整实现并结合仓库源码与配套文档讲清每个细节。读完本文你将掌握一个可复制、可扩展、可直接用于生产项目的字节格式化工具并能理解其边界行为与精度控制的底层原理。为什么字节格式化看似简单实则容易出错把数字字节值转成可读字符串直觉上的做法是不断除以 1000再拼接单位后缀。但要得到一个健壮且格式美观的结果需要依次解决三个问题单位选择如何根据数值大小自动挑选B、KB、MB……中正确的单位数值缩放如何把原值换算到所选单位下并截断到合适的有效位数字符串组装如何正确处理负数符号、数字与单位之间的空格等展示细节。仓库中的prettyBytes正是按这三步依次实现的。我们先看它的完整代码再逐行深入const prettyBytes (num, precision 3, addSpace true) { const UNITS [B, KB, MB, GB, TB, PB, EB, ZB, YB]; if (Math.abs(num) 1) return num (addSpace ? : ) UNITS[0]; const exponent Math.min( Math.floor(Math.log10(num 0 ? -num : num) / 3), UNITS.length - 1 ); const n Number( ((num 0 ? -num : num) / 1000 ** exponent).toPrecision(precision) ); return (num 0 ? - : ) n (addSpace ? : ) UNITS[exponent]; };第一步定义单位数组const UNITS [B, KB, MB, GB, TB, PB, EB, ZB, YB];这个数组是格式化的字典其下标即指数UNITS[0]对应字节BUNITS[1]对应千字节KB依此类推直到UNITS[8]对应尧字节YB。这样设计的好处是单位选择完全可以用数学计算替代if/else链或查表分支让代码保持简洁。值得注意的是这套单位采用十进制SI标准即1 KB 1000 B。这是很多文件管理器、存储厂商和 Web 工具实际使用的计数方式。若你的场景需要 IEC 二进制标准1 KiB 1024 B只需把1000换成1024并把UNITS数组改为[B, KiB, MiB, GiB, ...]即可算法骨架完全不变。第二步计算指数确定单位const exponent Math.min( Math.floor(Math.log10(num 0 ? -num : num) / 3), UNITS.length - 1 );这是整个算法最精妙的一步。因为1000 10³一个数的十进制位数每增加 3 位单位就应提升一档数值在[1, 999]log10小于 3除以 3 后小于 1向下取整得到0→ 单位B数值在[1000, 999999]log10落在[3, 6)除以 3 后落在[1, 2)取整得到1→ 单位KB数值在[1000000, 999999999]log10落在[6, 9)取整得到2→ 单位MB因此Math.floor(Math.log10(n) / 3)恰好等于数值应有的单位下标。用num 0 ? -num : num而不是Math.abs()只是作者避免重复调用绝对值方法的写法语义完全相同——取绝对值后再计算指数确保负数也能得到正确的单位。Math.min(..., UNITS.length - 1)则是一个封顶保护当数值超过1000⁸ 10²⁴约 1 尧字节时指数会被钳制为8统一归入最大的YB单位避免数组越界。这与Array.prototype.at(-1)一类兜底思路异曲同工保证了函数在超大数值下的安全性。第三步用 toPrecision 控制有效位数const n Number( ((num 0 ? -num : num) / 1000 ** exponent).toPrecision(precision) );选定单位后将绝对值除以1000 ** exponent得到缩放后的数值再用Number.prototype.toPrecision()把它截断到指定有效位数默认3位。toPrecision在这里有两个值得注意的细节它返回的是字符串因此外层必须套一个Number()才能还原为数字类型同时自动去掉尾随零。例如(1000 / 1000).toPrecision(3)得到1.00经Number()转换后变成1于是最终输出是1 KB而不是1.00 KB它是有效数字而非小数位。precision 3意味着结果保留 3 位有效数字而非固定 3 位小数。对大数值来说这比toFixed()更适合展示量级如123 MB而非123.457 MB。第四步组装最终字符串return (num 0 ? - : ) n (addSpace ? : ) UNITS[exponent];组装阶段处理三类信息负数符号num 0时在开头拼接-配合第二步对绝对值取对数负数与正数的单位选择完全一致仅符号不同空格控制默认在数字与单位之间插入一个空格addSpace true得到1 KB当addSpace false时得到紧凑形式123MB适合空间受限的界面或日志单位后缀直接按下标从UNITS数组取值。边界情况与完整参数说明函数在处理小数值时还有一个提前返回分支if (Math.abs(num) 1) return num (addSpace ? : ) UNITS[0];当|num| 1包括0和纯小数时直接返回原始数值拼接B单位。这既避免了log10(0)为负无穷、log10对小数的负值导致单位倒退等异常也保证了0.5这样的值输出为0.5 B。注意此分支使用未经绝对化的num因此-0.5会正确地输出为-0.5 B。综合来看函数的三个参数及默认值如下参数默认值作用num无必传待格式化的字节数值可为负数、小数或0precision3toPrecision的有效位数决定输出数值的精度addSpacetrue是否在数字与单位之间插入空格传false得到紧凑输出从代码结构可以推断该函数未对NaN、Infinity等非有限值做显式校验此类输入会按 JS 数值运算规则传播如NaN会输出类似NaN B的结果。如需在生产环境使用建议在调用侧先行过滤非有限数值。运行示例逐行验证原文提供的三个示例恰好覆盖了三种典型情况prettyBytes(1000); // 1 KB prettyBytes(-27145424323.5821, 5); // -27.145 GB prettyBytes(123456789, 3, false); // 123MB逐一验证1000log10(1000) / 3 1→ 指数1KB1000 / 1000¹ 1toPrecision(3)为1.00Number()还原为1→1 KB-27145424323.5821绝对值约2.71 × 10¹⁰log10 ≈ 10.43除以 3 取整得指数3GB27145424323.5821 / 1000³ ≈ 27.1454toPrecision(5)得到27.145→-27.145 GB123456789log10 ≈ 8.09除以 3 取整得指数2MB123456789 / 1000² ≈ 123.46toPrecision(3)为123→123MB。三个结果与注释完全一致precision与addSpace两个参数的作用也在示例 2、3 中分别得到印证。仓库中的定位与配套资源该片段收录于 content/snippets/js/s/pretty-print-number-of-bytes.md标签为number因此通过 content/collections/js/number.yaml 中的tagMatcher: number自动归入JavaScript Number Formatting Conversion集合——这是一个包含各类数字格式化与转换工具函数的 ES6 辅助函数合集。仓库中还保留了它的历史重定向记录content/redirects.yaml 中有一条301跳转将旧路径/js/s/pretty-bytes指向新的/js/s/pretty-print-number-of-bytes说明该片段曾以pretty-bytes命名后更名保证旧链接依然可用。与之配套的还有一个上游工具计算字符串实际占用字节数的byteSize见 byte-size.md。它利用Blob.size准确统计包含 Unicode/emoji 的字符串字节数恰好可以与prettyBytes组成完整链路——先用byteSize得到字节数再用prettyBytes格式化为可读字符串是日志上报、存储统计等场景的实用组合。实战应用建议prettyBytes属于典型的即拿即用工具函数可放心投入以下场景文件管理器/上传组件展示文件大小如4.2 MB服务端与日志输出输出内存占用、磁盘配额、网络吞吐量addSpace: false可压缩日志宽度监控面板与表格结合precision参数控制展示精度避免数值冗长扩展改造如需二进制单位或更多单位层级如B → KB → MB → GB → TB → PB → EB → ZB → YB之外的自定义后缀只需调整UNITS数组与底数1000。掌握prettyBytes的算法骨架后你会发现对数求指数 底数幂缩放 有效位数截断这套思路同样适用于秒数转时长、货币量级缩写等大量格式化需求值得作为通用技能沉淀到自己的工具库中。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30 seconds of code 实战用 JavaScript 将 hsl() 颜色字符串转换为数组或对象30 seconds of code 实战用 JavaScript 将 hsl 颜色字符串转换为数组或对象 本篇技术指南源自仓库 content/snippe教程文档30 Seconds of Code用 Blob 精确计算 JavaScript 字符串字节大小30 Seconds of Code用 Blob 精确计算 JavaScript 字符串字节大小 导读 本文讲解如何精确计算 JavaScript 字符串的字教程文档30 Seconds of Code 实战在 JavaScript 中基于数字对字符串进行复数化Pluralize30 Seconds of Code 实战在 JavaScript 中基于数字对字符串进行复数化Pluralize 复数化Pluralization是教程文档上一篇GDAL项目中使用CMake进行项目构建的完整指南下一篇App-Store-Connect-CLI 实战App Tag territories 在 API 4.5 中的弃用迁移指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 30 Seconds of Code 实战：prettyBytes —— 用 JavaScript 将字节数格式化为人类可读字符串
教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载在处理文件大小、磁盘占用、内存统计等场景时我们经常需要把一串冰冷的数字字节值如27145424323.5821转换为27.145 GB这样直观的字符串。本篇文章以仓库 pretty-print-number-of-bytes.md 中的经典工具函数prettyBytes为骨架逐步拆解其单位数组、指数计算、精度截断与字符串组装的完整实现并结合仓库源码与配套文档讲清每个细节。读完本文你将掌握一个可复制、可扩展、可直接用于生产项目的字节格式化工具并能理解其边界行为与精度控制的底层原理。为什么字节格式化看似简单实则容易出错把数字字节值转成可读字符串直觉上的做法是不断除以 1000再拼接单位后缀。但要得到一个健壮且格式美观的结果需要依次解决三个问题单位选择如何根据数值大小自动挑选B、KB、MB……中正确的单位数值缩放如何把原值换算到所选单位下并截断到合适的有效位数字符串组装如何正确处理负数符号、数字与单位之间的空格等展示细节。仓库中的prettyBytes正是按这三步依次实现的。我们先看它的完整代码再逐行深入const prettyBytes (num, precision 3, addSpace true) { const UNITS [B, KB, MB, GB, TB, PB, EB, ZB, YB]; if (Math.abs(num) 1) return num (addSpace ? : ) UNITS[0]; const exponent Math.min( Math.floor(Math.log10(num 0 ? -num : num) / 3), UNITS.length - 1 ); const n Number( ((num 0 ? -num : num) / 1000 ** exponent).toPrecision(precision) ); return (num 0 ? - : ) n (addSpace ? : ) UNITS[exponent]; };第一步定义单位数组const UNITS [B, KB, MB, GB, TB, PB, EB, ZB, YB];这个数组是格式化的字典其下标即指数UNITS[0]对应字节BUNITS[1]对应千字节KB依此类推直到UNITS[8]对应尧字节YB。这样设计的好处是单位选择完全可以用数学计算替代if/else链或查表分支让代码保持简洁。值得注意的是这套单位采用十进制SI标准即1 KB 1000 B。这是很多文件管理器、存储厂商和 Web 工具实际使用的计数方式。若你的场景需要 IEC 二进制标准1 KiB 1024 B只需把1000换成1024并把UNITS数组改为[B, KiB, MiB, GiB, ...]即可算法骨架完全不变。第二步计算指数确定单位const exponent Math.min( Math.floor(Math.log10(num 0 ? -num : num) / 3), UNITS.length - 1 );这是整个算法最精妙的一步。因为1000 10³一个数的十进制位数每增加 3 位单位就应提升一档数值在[1, 999]log10小于 3除以 3 后小于 1向下取整得到0→ 单位B数值在[1000, 999999]log10落在[3, 6)除以 3 后落在[1, 2)取整得到1→ 单位KB数值在[1000000, 999999999]log10落在[6, 9)取整得到2→ 单位MB因此Math.floor(Math.log10(n) / 3)恰好等于数值应有的单位下标。用num 0 ? -num : num而不是Math.abs()只是作者避免重复调用绝对值方法的写法语义完全相同——取绝对值后再计算指数确保负数也能得到正确的单位。Math.min(..., UNITS.length - 1)则是一个封顶保护当数值超过1000⁸ 10²⁴约 1 尧字节时指数会被钳制为8统一归入最大的YB单位避免数组越界。这与Array.prototype.at(-1)一类兜底思路异曲同工保证了函数在超大数值下的安全性。第三步用 toPrecision 控制有效位数const n Number( ((num 0 ? -num : num) / 1000 ** exponent).toPrecision(precision) );选定单位后将绝对值除以1000 ** exponent得到缩放后的数值再用Number.prototype.toPrecision()把它截断到指定有效位数默认3位。toPrecision在这里有两个值得注意的细节它返回的是字符串因此外层必须套一个Number()才能还原为数字类型同时自动去掉尾随零。例如(1000 / 1000).toPrecision(3)得到1.00经Number()转换后变成1于是最终输出是1 KB而不是1.00 KB它是有效数字而非小数位。precision 3意味着结果保留 3 位有效数字而非固定 3 位小数。对大数值来说这比toFixed()更适合展示量级如123 MB而非123.457 MB。第四步组装最终字符串return (num 0 ? - : ) n (addSpace ? : ) UNITS[exponent];组装阶段处理三类信息负数符号num 0时在开头拼接-配合第二步对绝对值取对数负数与正数的单位选择完全一致仅符号不同空格控制默认在数字与单位之间插入一个空格addSpace true得到1 KB当addSpace false时得到紧凑形式123MB适合空间受限的界面或日志单位后缀直接按下标从UNITS数组取值。边界情况与完整参数说明函数在处理小数值时还有一个提前返回分支if (Math.abs(num) 1) return num (addSpace ? : ) UNITS[0];当|num| 1包括0和纯小数时直接返回原始数值拼接B单位。这既避免了log10(0)为负无穷、log10对小数的负值导致单位倒退等异常也保证了0.5这样的值输出为0.5 B。注意此分支使用未经绝对化的num因此-0.5会正确地输出为-0.5 B。综合来看函数的三个参数及默认值如下参数默认值作用num无必传待格式化的字节数值可为负数、小数或0precision3toPrecision的有效位数决定输出数值的精度addSpacetrue是否在数字与单位之间插入空格传false得到紧凑输出从代码结构可以推断该函数未对NaN、Infinity等非有限值做显式校验此类输入会按 JS 数值运算规则传播如NaN会输出类似NaN B的结果。如需在生产环境使用建议在调用侧先行过滤非有限数值。运行示例逐行验证原文提供的三个示例恰好覆盖了三种典型情况prettyBytes(1000); // 1 KB prettyBytes(-27145424323.5821, 5); // -27.145 GB prettyBytes(123456789, 3, false); // 123MB逐一验证1000log10(1000) / 3 1→ 指数1KB1000 / 1000¹ 1toPrecision(3)为1.00Number()还原为1→1 KB-27145424323.5821绝对值约2.71 × 10¹⁰log10 ≈ 10.43除以 3 取整得指数3GB27145424323.5821 / 1000³ ≈ 27.1454toPrecision(5)得到27.145→-27.145 GB123456789log10 ≈ 8.09除以 3 取整得指数2MB123456789 / 1000² ≈ 123.46toPrecision(3)为123→123MB。三个结果与注释完全一致precision与addSpace两个参数的作用也在示例 2、3 中分别得到印证。仓库中的定位与配套资源该片段收录于 content/snippets/js/s/pretty-print-number-of-bytes.md标签为number因此通过 content/collections/js/number.yaml 中的tagMatcher: number自动归入JavaScript Number Formatting Conversion集合——这是一个包含各类数字格式化与转换工具函数的 ES6 辅助函数合集。仓库中还保留了它的历史重定向记录content/redirects.yaml 中有一条301跳转将旧路径/js/s/pretty-bytes指向新的/js/s/pretty-print-number-of-bytes说明该片段曾以pretty-bytes命名后更名保证旧链接依然可用。与之配套的还有一个上游工具计算字符串实际占用字节数的byteSize见 byte-size.md。它利用Blob.size准确统计包含 Unicode/emoji 的字符串字节数恰好可以与prettyBytes组成完整链路——先用byteSize得到字节数再用prettyBytes格式化为可读字符串是日志上报、存储统计等场景的实用组合。实战应用建议prettyBytes属于典型的即拿即用工具函数可放心投入以下场景文件管理器/上传组件展示文件大小如4.2 MB服务端与日志输出输出内存占用、磁盘配额、网络吞吐量addSpace: false可压缩日志宽度监控面板与表格结合precision参数控制展示精度避免数值冗长扩展改造如需二进制单位或更多单位层级如B → KB → MB → GB → TB → PB → EB → ZB → YB之外的自定义后缀只需调整UNITS数组与底数1000。掌握prettyBytes的算法骨架后你会发现对数求指数 底数幂缩放 有效位数截断这套思路同样适用于秒数转时长、货币量级缩写等大量格式化需求值得作为通用技能沉淀到自己的工具库中。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30 seconds of code 实战用 JavaScript 将 hsl() 颜色字符串转换为数组或对象30 seconds of code 实战用 JavaScript 将 hsl 颜色字符串转换为数组或对象 本篇技术指南源自仓库 content/snippe教程文档30 Seconds of Code用 Blob 精确计算 JavaScript 字符串字节大小30 Seconds of Code用 Blob 精确计算 JavaScript 字符串字节大小 导读 本文讲解如何精确计算 JavaScript 字符串的字教程文档30 Seconds of Code 实战在 JavaScript 中基于数字对字符串进行复数化Pluralize30 Seconds of Code 实战在 JavaScript 中基于数字对字符串进行复数化Pluralize 复数化Pluralization是教程文档上一篇GDAL项目中使用CMake进行项目构建的完整指南下一篇App-Store-Connect-CLI 实战App Tag territories 在 API 4.5 中的弃用迁移指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考