二進位與進位轉換指南：從位元運算到資料編碼的視覺化理解

開發工具

進位系統基礎

四種常用進位

進位 基數 數字 前綴 範例
二進位 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 編解碼 等工具，幫你快速處理進位和編碼問題。

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