如何通过 String.prototype.padStart() 构建具备原始二进制美感的十六进制查看器-js教程-PHP中文网

padstart() 是十六进制查看器实现字节级对齐的基石，通过 byte.tostring(16).padstart(2, "0") 统一每字节为2位十六进制，地址列用 .tostring(16).padstart(8, "0") + ":" 对齐，ascii栏用 padend(16, " ") 保宽，确保三列恒定、视觉秩序清晰。

如何通过 string.prototype.padstart() 构建具备原始二进制美感的十六进制查看器

用 padStart() 实现十六进制查看器，核心在于统一字节宽度、对齐列、补零可读——它不负责解析或渲染 UI，但能精准控制每个字节/字段的视觉长度，让原始二进制数据呈现出干净、等宽、符合协议规范的排版美感。

确保每个字节固定显示为 2 位十六进制

原始字节（0–255）转十六进制后长度不一：0x0 → "0"，0xff → "ff"。直接 .toString(16) 会破坏列对齐。
用 padStart(2, "0") 强制补前导零：

function byteToHex(byte) {
  return byte.toString(16).padStart(2, "0"); // 如：5 → "05"，255 → "ff"
}

按行组织并填充地址偏移量

十六进制查看器左侧通常有地址列（如 00000000:），宽度固定（如 8 字符 + 冒号）。用 padStart() 对齐起始地址：

地址以十六进制表示，左补零至 8 位：(offset).toString(16).padStart(8, "0") + ":"
若每行显示 16 字节，第 n 行起始地址为 n * 16，补零后天然对齐

统一 ASCII 栏宽度，空字符与不可见字符可视化

右侧 ASCII 栏常固定为 16 字符宽，需将不可见字节（如 \x00、\t、\n）替换为 .，再用 padEnd(16, " ") 补空格保证列宽一致——虽非 padStart，但同属字符串对齐家族，配合使用才完整：

function byteToAscii(byte) {
  const ch = String.fromCharCode(byte);
  return /[\x20-\x7E]/.test(ch) ? ch : ".";
}
// 拼接一行 ASCII：asciiChars.join("").padEnd(16, " ");