ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Beaker 浏览器中的 bytes 字节换算工具:从 History.md 解析 format/parse 的 API 演进与实战用法

Beaker 浏览器中的 bytes 字节换算工具:从 History.md 解析 format/parse 的 API 演进与实战用法 前端【免费下载链接】beakerAn experimental peer-to-peer Web browser项目地址https://gitcode.com/gh_mirrors/be/beaker点击查看免费下载bytes是 Beaker 项目在 explorer文件浏览器与 app-stdlib 中一并内置的字节换算工具用于把字节数如1099511627776格式化为1TB这样的可读字符串或反向解析1TB为字节整数。本篇以 app/userland/explorer/vendor/bytes/History.md 为骨架结合同目录 Readme.md 与 index.js 的实现完整还原其format/parse双 API、全部格式化选项与单位语义并梳理 2012 至 2019 年间十余个版本的演进脉络最后给出该工具在 Beaker explorer、下载页等真实界面中的调用证据。读完本文你可以直接上手使用这套 API也能从源码级理解其边界行为。一、工具定位一份随仓库分发的字节换算模块在 Beaker 仓库中bytes是独立于项目业务代码的 vendored 依赖同一份源码在仓库里存在两份app/userland/explorer/vendor/bytes/explorer 前端使用的副本含 History.md、Readme.md、index.js 与 LICENSEapp/userland/app-stdlib/vendor/bytes/app-stdlib 标准库内置的副本供beaker://app-stdlib/vendor/bytes/index.js形式引用。按 Readme.md 的描述其核心职责是把一个字节字符串例如1TB解析为字节数1099511627776反之亦然。实现上它是一个单文件 ES Module入口 index.js 根据入参类型自动分派传入string→ 走parse(value)传入number→ 走format(value, options)其他类型 → 返回null。因此bytes(...)一个函数即可同时承担格式化与解析两条路径这也是 Beaker 各处 UI 只import bytes一个默认导出即可的原因。二、bytes.format字节数 → 可读字符串bytes.format(number value, [options])将给定字节数格式化为字符串负值原样保留符号浮点数会被四舍五入遇到非有限数NaN、Infinity时返回null。2.1 选项一览Readme.md 定义了 5 个可配置项index.js 中给出了对应的默认取值逻辑属性类型说明默认值decimalPlacesnumbernull输出保留的最大小数位数2fixedDecimalsbooleannull是否始终显示满decimalPlaces位小数不省略尾部 0falsethousandsSeparatorstringnull千分位分隔符常用 、,、.不加分隔unitstringnull强制指定结果单位B/KB/MB/GB/TB/PB空串表示自动探测unitSeparatorstringnull数字与单位之间的分隔符从实现看各选项的解析分别对应 index.js 中的thousandsSeparator、unitSeparator、decimalPlaces、fixedDecimals、unit五个局部变量其中decimalPlaces用! undefined判断是否显式传入fixedDecimals用Boolean()强制布尔化其余用||兜底为默认值。2.2 自动单位探测当未指定unit或指定单位不在内部单位表内时format会按绝对值mag从大到小逐级探测单位index.jsmag map.pb→PBmag map.tb→TBmag map.gb→GBmag map.mb→MBmag map.kb→KB否则 →B内部单位表定义在 index.js全部基于二进制幂1024var map { b: 1, kb: 1 10, // 1024 mb: 1 20, // 1048576 gb: 1 30, // 1073741824 tb: Math.pow(1024, 4), pb: Math.pow(1024, 5), };换算公式为val value / map[unit.toLowerCase()]随后val.toFixed(decimalPlaces)完成舍入index.js。2.3 输出修饰去尾零与千分位fixedDecimals false默认时会通过正则/(?:\.0*|(\.[^0])0)$/去掉小数尾部的无意义 0index.js设置了thousandsSeparator时通过正则/\B(?(\d{3})(?!\d))/g在整数位插入千分位index.js最后拼上unitSeparator unit返回。2.4 官方示例Readme.md 给出的完整可运行示例bytes(1024); // output: 1KB bytes(1000); // output: 1000B bytes(1000, {thousandsSeparator: }); // output: 1 000B bytes(1024 * 1.7, {decimalPlaces: 0}); // output: 2KB bytes(1024, {unitSeparator: }); // output: 1 KB注意第二行1000因为未达到1024的 KB 阈值自动单位探测落在B同时decimalPlaces默认 2 位会把1000.00去尾零为1000因此得到1000B。这印证了二进制单位、不做十进制换算的设计。三、bytes.parse字符串 → 字节整数bytes.parse(stringnumber value)把字符串解析为字节整数若未带单位或传入的是数字则视为已是字节数直接返回。3.1 支持的单位Readme.md 明确列出解析时大小写不敏感b— 字节kb— 千字节mb— 兆字节gb— 吉字节tb— 太字节pb— 拍字节并强调单位基于 2 的幂而非 10 的幂即按此解析器1kb 1024b。与之对应2.0.0 版本起解析就不再区分单位大小写见下文版本史。3.2 实现要点解析逻辑在 index.jsvar parseRegExp /^((-|\)?(\d(?:\.\d)?)) *(kb|mb|gb|tb|pb)$/i;若输入是合法数字且非NaN直接原样返回视为字节数若输入不是字符串返回null先用正则匹配数值 可选空格 单位匹配成功则取出数值与单位unit.toLowerCase()后查表匹配失败则回退为parseInt(val, 10)按纯字节数处理最终统一Math.floor(map[unit] * floatValue)返回所有单位上的小数部分都被截断这正是 2.3.0 变更Drop partial bytes on all parsed units的落地形态。一个容易忽视的细节正则在kb|mb|gb|tb|pb中并不包含单独的b分支因此1b这类输入会落入回退路径被parseInt(1b, 10)解析为1而1024、1KB这类则是典型用例。3.3 官方示例bytes(1KB); // output: 1024 bytes(1024); // output: 1024 bytes(1024); // output: 1KB第三行展示了入口函数的自动分派数字入参走format字符串入参走parse与 2.0.0 变更记录中支持bytes(bytes(num)) num的完整往返互相印证——整数经过 format→parse 可无损还原。四、History.md 版本史API 如何一步步长成现在的样子History.md 记录了 2012 至 2019 年间共 15 个版本的变更把这些条目按主题串起来恰好勾勒出这套 API 的完整演进过程4.1 单位与容量b → pb0.1.02012-07-04最初只有bytes 到字符串的转换即 format 方向0.2.02012-10-28补充行为断言bytes(200).should.eql(200b)确立格式化输出契约0.3.02014-03-19新增tb太字节支持3.1.02019-01-22新增pb拍字节支持至此单位表补全为b/kb/mb/gb/tb/pb六档——对应 index.js 中Math.pow(1024, 5)的pb条目3.0.02017-08-31格式化输出中的kB改为KB统一为大写显示同时移除对 Node.js 0.6 与 ComponentJS 的支持README 中已标注为 npm 上的 Node.js 模块。4.2 格式化选项的逐项引入版本变更对应当前实现2.0.02015-04-12新增thousandsSeparator选项index.js 千分位正则替换2.0.0新增case选项、解析不再区分单位大小写解析用parseRegExp的i标志与unit.toLowerCase()见 index.js、index.js当前版本格式化输出统一为大写单位2.0.0无效解析输入返回null支持bytes(bytes(num)) num往返parse非字符串返回nullindex.js2.2.02015-11-13新增decimalPlaces、fixedDecimals选项index.js 及去尾零正则2.4.02016-06-01新增unitSeparator选项index.js 拼接逻辑2.5.02017-03-24新增unit选项可强制指定输出单位index.js 跳过自动探测4.3 健壮性与性能修复2.3.02016-02-15三条修复值得关注——① 在所有单位上丢弃小数Math.floor逻辑② 修复非有限数传入.format时返回null对应 index.js 的Number.isFinite前置检查③ 修复解析看起来像十六进制的字节字符串回退路径改用十进制parseInt(val, 10)避免0x10这类串被误读另外做了正则提升hoist的性能优化——formatThousandsRegExp、formatDecimalsRegExp、parseRegExp都定义在模块顶层正是这次优化的产物2.0.22015-05-20移除单位表的反复重建与多余对象构造让map成为模块级常量2.0.12015-05-07修复 browserify 下的 require 方式移除node.extend依赖2.1.02015-05-21正式导出.format与.parse两个具名 API形成默认入口 具名导出的双重使用形态1.0.02014-05-05新增负数支持即格式化时保留负号index.js 以Math.abs(value)探测单位、以value / map[...]保留符号参与计算0.2.12013-04-01补充.component说明对应当年 Component 生态的接入方式后随 3.0.0 一并移除。五、在 Beaker 中的真实调用点字节格式化并非文档中的孤立示例而是 Beaker 前端界面的通用基础设施仓库内至少有以下五处直接调用explorer 文件列表的 Size 列app/userland/explorer/js/com/folder/file-list.js 以具名导入方式import { format as formatBytes } from ../../../vendor/bytes/index.js在第 50 行用formatBytes(item.stat.size)渲染每个文件/目录的字节大小explorer 侧栏的 Drive 信息app/userland/explorer/js/com/sidebar/drive-info.js 默认导入bytes第 74 行bytes(this.driveInfo.size)显示整个 drive 的总容量explorer 选中文件的属性面板app/userland/explorer/js/com/sidebar/selection-info.js 用bytes(sz)展示当前选中项的大小library 的下载管理页app/userland/library/js/views/downloads.js 从beaker://app-stdlib/vendor/bytes/index.js导入第 66 行用bytes(download.downloadSpeed || 0) /s渲染下载速度第 112 行渲染bytes(download.receivedBytes) / bytes(download.totalBytes)的进度第 145 行展示总字节数——这是格式化 字符串拼接单位的典型场景drive-view 与 hypercore-toolsapp/userland/drive-view/index.js 与 app/userland/hypercore-tools/js/main.js 同样以bytes(entry.stat.size)形式输出文件大小。值得注意第 4、5 处引用的是 app/userland/app-stdlib/vendor/bytes/ 副本通过beaker://app-stdlib/vendor/bytes/index.js协议地址访问说明该工具在 Beaker 的标准前端组件库中也被当作共享基础件分发。六、边界行为与使用注意事项综合 History.md 变更记录与 index.js 实现以下是实践中容易踩到的边界点二进制单位不是十进制1kb 1024b与 SI 前缀1 KB 1000 B含义不同跨场景换算时务必先确认预期语义浮点入参会被舍入format 内部toFixed完成舍入bytes(1024 * 1.7, {decimalPlaces: 0})得到2KB非有限数返回nullNaN、±Infinity不会抛异常而是返回null调用方需自行兜底解析丢弃小数Math.floor截断意味着1.5KB解析为1536而非1536.5无效输入返回nullparse 对非字符串数字除外返回null格式化对非法输入返回null官方约定以null表示错误而非抛错往返约束bytes(bytes(num)) num只对整数严格成立浮点数值经 format 舍入后无法完美还原单位大小写当前版本格式化输出统一为大写如KB解析则大小写不敏感1kb与1KB等价这是 2.0.0 与 3.0.0 两次变更叠加后的最终行为。七、独立的安装与使用方式虽然 Beaker 仓库内以 vendored 源码方式分发但该模块本身是 npm 包Readme.md 给出了独立接入方式$ npm install bytesvar bytes require(bytes);配合文中的选项表与示例即可在任意 Node.js 或前端项目中复现 Beaker explorer 的同款容量显示能力。模块采用 MIT 协议Copyright (c) 2012-2014 TJ Holowaychuk、2015 Jed Watson可自由用于开源与闭源项目。综上从 0.1.0 的单向字符串转换到 3.1.0 的六档二进制单位与五个格式化选项bytes工具用十余次小版本迭代沉淀出一个稳定、无依赖、边界清晰的字节换算 API而 Beaker 在 explorer 与 app-stdlib 两处内置同一份实现则是它在真实浏览器产品中经得起反复调用的最佳注脚。赞分享前端【免费下载链接】beakerAn experimental peer-to-peer Web browser项目地址https://gitcode.com/gh_mirrors/be/beaker点击查看免费下载相关推荐Beaker 内置 bytes 字节工具解析格式化与解析 API、版本演进与源码实现Beaker 内置 bytes 字节工具解析格式化与解析 API、版本演进与源码实现 字节数值与可读字符串之间的转换是桌面应用中最常见的需求之一——文件大小、前端react-native-router-flux 版本演进全览从 HISTORY.md 读懂路由 API 的设计与变迁react native router flux 版本演进全览从 HISTORY.md 读懂路由 API 的设计与变迁 本文以仓库根目录的 HISTORY.m移动开发UI组件Telepresence 配置中的 quantity 字节量格式从 129M 到 123Mi 的换算与实战用法Telepresence 配置中的 quantity 字节量格式从 129M 到 123Mi 的换算与实战用法 本篇技术指南聚焦 Telepresence 项云原生开发工具微服务网络上一篇智能音箱音乐播放解决方案15个高效技巧让小爱音箱变身高品质音乐服务器下一篇Argo Workflows WorkflowStep 全字段详解Java SDK 类型参考与 steps 模板实战指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表