This article is not available in your language yet. Showing the zh-CN version.

二进制与进制转换指南：从位运算到数据编码的可视化理解

Dev Tools(Updated Jun 2, 2026)

进制系统基础

四种常用进制

进制 基数 数字 前缀 示例
二进制 2 0,1 0b 0b1010 = 10
八进制 8 0-7 0o 0o12 = 10
十进制 10 0-9 无 10
十六进制 16 0-9,A-F 0x 0xA = 10

转换方法

任意进制 → 十进制

二进制 1010 → 1×2³ + 0×2² + 1×2¹ + 0×2⁰ = 8 + 0 + 2 + 0 = 10
十六进制 FF → 15×16¹ + 15×16⁰ = 240 + 15 = 255

十进制 → 任意进制

10 → 二进制：
10 ÷ 2 = 5 余 0
5 ÷ 2 = 2 余 1
2 ÷ 2 = 1 余 0
1 ÷ 2 = 0 余 1
从下往上读：1010

255 → 十六进制：
255 ÷ 16 = 15 余 15
15 ÷ 16 = 0 余 15
从下往上读：FF

JavaScript 进制转换

// parseInt 转十进制
parseInt('1010', 2)    // 10
parseInt('FF', 16)     // 255
parseInt('12', 8)      // 10

// toString 转目标进制
(10).toString(2)       // "1010"
(255).toString(16)     // "ff"
(255).toString(8)      // "377"

// 字面量
0b1010   // 10
0o12     // 10
0xFF     // 255

位运算实战

六种位运算

运算 符号 示例 结果
AND & 0b1100 & 0b1010 0b1000 (8)
OR | 0b1100 | 0b1010 0b1110 (14)
XOR ^ 0b1100 ^ 0b1010 0b0110 (6)
NOT ~ ~0b1100 -0b1101 (-13)
左移 << 0b0011 << 2 0b1100 (12)
右移 >> 0b1100 >> 2 0b0011 (3)

应用一：权限系统

const PERMISSIONS = {
  READ:    1 << 0,  // 0b0001 = 1
  WRITE:   1 << 1,  // 0b0010 = 2
  DELETE:  1 << 2,  // 0b0100 = 4
  ADMIN:   1 << 3,  // 0b1000 = 8
};

// 组合权限
const editor = PERMISSIONS.READ | PERMISSIONS.WRITE;  // 0b0011 = 3
const admin = PERMISSIONS.READ | PERMISSIONS.WRITE | PERMISSIONS.DELETE | PERMISSIONS.ADMIN;  // 0b1111 = 15

// 检查权限
function hasPermission(userPermissions: number, permission: number): boolean {
  return (userPermissions & permission) === permission;
}

hasPermission(editor, PERMISSIONS.READ);    // true
hasPermission(editor, PERMISSIONS.DELETE);  // false
hasPermission(admin, PERMISSIONS.ADMIN);    // true

// 添加权限
function addPermission(userPermissions: number, permission: number): number {
  return userPermissions | permission;
}

// 移除权限
function removePermission(userPermissions: number, permission: number): number {
  return userPermissions & ~permission;
}

应用二：标志位

const FLAGS = {
  BOLD:      1 << 0,  // 1
  ITALIC:    1 << 1,  // 2
  UNDERLINE: 1 << 2,  // 4
  STRIKETHROUGH: 1 << 3, // 8
};

// 设置：粗体 + 斜体
let style = FLAGS.BOLD | FLAGS.ITALIC;  // 3

// 切换下划线
style ^= FLAGS.UNDERLINE;  // 7 (加上下划线)
style ^= FLAGS.UNDERLINE;  // 3 (移除下划线)

应用三：RGB 颜色

// RGB → 数字
function rgbToNumber(r: number, g: number, b: number): number {
  return (r << 16) | (g << 8) | b;
}

// 数字 → RGB
function numberToRgb(n: number): { r: number; g: number; b: number } {
  return {
    r: (n >> 16) & 0xFF,
    g: (n >> 8) & 0xFF,
    b: n & 0xFF,
  };
}

rgbToNumber(255, 128, 0);     // 0xFF8000 = 16744448
numberToRgb(0xFF8000);        // { r: 255, g: 128, b: 0 }

应用四：快速计算

// 乘以 2 的幂
n * 2     === n << 1
n * 4     === n << 2
n * 8     === n << 3

// 除以 2 的幂（取整）
n / 2     === n >> 1  // 正数
Math.floor(n / 2) === n >> 1

// 判断奇偶
n & 1     // 0 = 偶数，1 = 奇数

// 取模 2 的幂
n % 4     === n & 3
n % 8     === n & 7
n % 16    === n & 15

// 交换两数（不用临时变量）
a ^= b; b ^= a; a ^= b;

IEEE 754 浮点数

双精度（64位）结构

符号位(1)  指数位(11)      尾数位(52)
S         EEEEEEEEEEE    MMMMMMMMMMMM...MMMM

示例：-12.375
符号：1（负数）
指数：10000000010（1026，偏移后 3）
尾数：1001001100000000...0

精度问题

// 经典问题
0.1 + 0.2 === 0.3   // false！
0.1 + 0.2            // 0.30000000000000004

// 原因：0.1 和 0.2 在二进制中是无限循环小数
// 0.1 = 0.0001100110011...（循环）
// 0.2 = 0.0011001100110...（循环）

// 解决方案
// 1. 使用整数运算
(0.1 * 10 + 0.2 * 10) / 10  // 0.3

// 2. 使用 toFixed
(0.1 + 0.2).toFixed(1)       // "0.3"

// 3. 使用 EPSILON 比较
Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON  // true

特殊值

Number.MAX_SAFE_INTEGER    // 9007199254740991 (2^53 - 1)
Number.MIN_SAFE_INTEGER    // -9007199254740991
Number.MAX_VALUE           // 1.7976931348623157e+308
Number.EPSILON             // 2.220446049250313e-16
Infinity                   // 正无穷
-Infinity                  // 负无穷
NaN                        // 非数字

Base64 编码与二进制

编码原理

3 字节（24 bit）→ 4 个 Base64 字符（每字符 6 bit）

示例： "Man"
M = 77  = 01001101
a = 97  = 01100001
n = 110 = 01101110

合并：010011010110000101101110
分组：010011 010110 000101 101110
索引：  19      22      5      46
字符：  T       W       F       u

结果："TWFu"

使用工具库编解码

  1. 打开 Base64 编解码工具
  2. 输入文本或 Base64 字符串
  3. 点击"编码"或"解码"
  4. 支持文件和图片的 Base64 转换

Hex 编码

二进制 → Hex 对照表

0000 = 0    0100 = 4    1000 = 8    1100 = C
0001 = 1    0101 = 5    1001 = 9    1101 = D
0010 = 2    0110 = 6    1010 = A    1110 = E
0011 = 3    0111 = 7    1011 = B    1111 = F

常见用途

用途 示例
颜色值 #FF8000
MAC 地址 00:1A:2B:3C:4D:5E
哈希值 a1b2c3d4e5f6...
内存地址 0x7fff5fbff8c0
二进制查看 xxd file.bin

使用工具库进行进制转换

  1. 打开 进制转换工具
  2. 输入数值
  3. 选择输入进制
  4. 查看所有进制的转换结果

常见问题

为什么 JavaScript 位运算只支持 32 位？

JavaScript 位运算将数字转为 32 位有符号整数，超过 32 位的部分被截断：

0xFFFFFFFF          // 4294967295（正常数字）
0xFFFFFFFF | 0      // -1（转为 int32 后溢出）

// 大数位运算需要用 BigInt
(0xFFFFFFFFFn & 0xFFn).toString(16)  // "ff"

如何查看文件的二进制内容？

# hex dump
xxd file.bin

# 或使用工具库的 Hex 查看器
# 上传文件 → 查看十六进制/二进制内容

总结

二进制是计算的基础——权限系统、颜色编码、浮点数精度、Base64 编码都离不开它。掌握进制转换和位运算，能写出更高效、更底层的代码。工具库提供 进制转换、Base64 编解码 等工具，帮你快速处理进制和编码问题。

#二进制#进制转换#位运算#数据可视化#教程