【Day 18】A 原來是 65？我終於搞懂 ASCII 跟 bit 是什麼了！

A 原來是 65？我終於搞懂 ASCII 跟 bit 是什麼了

那時候我被我爸下了「網咖禁足令」，雖然偶爾還是會偷偷跑去，但總會小心控制時間，避免被抓包。也因為這樣，那段日子我反而花更多時間在球場上，讓籃球暫時取代了電玩的刺激。

記得是下午四、五點下課，然後先去球場打到六點或六點半再回家。可是打了一段時間後，我開始把那段時間偷偷換成去網咖。每次家人問我：「你去哪了？」我都只會淡淡回一句：「去打球啊。」

然後有一次在網咖打 CS 時，看到學長正在使用 Yahoo 即時通跟他女友曬恩愛。

因為好奇學長和女友在聊什麼，我們這群損友趁他去上廁所的空檔，偷偷打開了他的即時通對話視窗。結果沒看到情話，反倒看到一串神秘數字：

0011 0101
0011 0010
0011 0000

「嗯？這不是二進位嗎？」腦中第一反應就是這樣。平常課本都記不住，偏偏這次剛學的轉換竟然派上用場。

學長回來後，我們先笑他放閃，接著就繼續打 CS。可那串數字一直卡在我心裡，於是趁著遊戲裡殺掉他時，順口問了一句——

「欸學長，你剛傳給女朋友那串數字是什麼意思啊？」完全是不小心把自己心裡話說出來。

話一出口我才愣住，學長的眼神瞬間變成「小子你死定了」，嚇得我全身僵硬。

「520 的意思啦！Ｘ的！」學長超級兇的回答著。

不用想也知道學長超不爽，為什麼？因為接下來整場 CS，學長專殺我，還每次都爆頭，遊戲體驗直接負分 Orz 。

不知道被學長殺了幾次之後，他終於氣消，嘴角勾起一抹笑，淡淡說：
「那個啊，對照 ASCII 就知道了。」

「ASCII？那是什麼啊？」我急著追問。

學長沒看我，只是盯著螢幕，邊操作邊回：
「等我再殺你幾次，我就告訴你。」

我頓時啞口無言，只能默默挨打。
一直到後來上課剛好教到 ASCII，我才恍然大悟。

ASCII

ASCII 其實全名超級無敵長，叫做「American Standard Code for Information Interchange」，中文翻譯是「美國標準資訊交換碼」，不過嚴格來說，正確名稱應該是「US-ASCII」，因為 ASCII 算是早期的舊稱。

Note
需注意 US-ASCII 僅定義 0–127 的字元編碼（共 128 個字元）。

所以 ASCII 到底是什麼呢？簡單來講，ASCII 是一種「字元編碼標準」，用來規範字母、數字、符號各自對應到哪些二進位數字。

畢竟我們平常使用的字母、數字和符號，電腦本身是無法直接理解的，因此需要透過這樣的標準，讓電腦能夠「看懂」並處理。

ASCII 其實有點類似我們電影上看到的「摩斯密碼」，只是 ASCII 是透過二進位來表示：

• A： 0100 0001
• B： 0100 0010
• C： 0100 0011

而摩斯密碼則是透過點跟線來表示：

• A： .-
• B： -…
• C： -.-.

所以，你可以把它想像成某種「工程師版的摩斯密碼」。
不過我們現在不是在學摩斯密碼，所以還是把重點放在 ASCII 本身。
底下我附上一張 ASCII 對照表，方便你參考：

看到這張表時，你可能會有點疑惑：為什麼除了二進位之外，還出現了十進位、十六進位，甚至還有一些圖形？
別擔心，接下來我會一一解釋，讓你看懂這些欄位分別代表什麼意思。

• 二進位：這一欄表示電腦實際儲存的二進位數字。舉例來說：A 的二進位是 0100 0001，就代表著電腦是用 0100 0001 來表示 A。
• 十進位：這一欄對應到十進位數字。舉例：A 的十進位是 65，就代表著 A 在 ASCII 表中對應的數值就是 65。
• 十六進位：這一欄則是十六進位的表示方式。舉例：A 的十六進位是 41，就代表著 A 在 ASCII 表中的十六進位數字是 41。
• 圖形：這是我們最直觀關心的部分，也就是字母或符號本身。舉例：0100 0001 對應的就是 A，但實際的「外觀」由字型檔決定。

其實整個轉換過程是有一套流程的，下面這張圖就能幫助我們更直觀地理解：

在電腦裡，每個字元都對應一個數字並以二進位儲存，ASCII 就是規範這種對應的標準。當我們按下 A 時，電腦其實接收到的是 0100 0001 ，再透過 ASCII 對照表顯示成 A 。

「如果是這樣的話，那為什麼還會區分出十進位、十六進位呢？」你可能會這樣問。

我們日常使用的是十進位，而十六進位則常見於電腦科學與程式設計。因此 ASCII 表會同時列出這三種數字系統，方便不同領域的人閱讀。以前端為例，CSS 的顏色表示就常用十六進位，例如#FFFFFF 代表白色。

color: #FF5733; /* 十六進位 */
color: rgb(255, 87, 51); /* 十進位 */

所以你可以用十進位或十六進位來表示顏色，但在電腦內部，這些最終都會被轉成二進位來處理。

而這裡最重要的一點是：

「最終呈現的圖形，其實是由字型（Font）決定的，包含字體、大小、粗細等等。」

也就是說，當你在不同應用程式中看到 A 長得不一樣，其實差別就在於字型。

那要怎麼驗證 A 真的對應到 65 呢？其實很簡單。既然 ASCII 是電腦用來溝通的字元編碼標準，我們只要透過程式碼就能驗證。

底下提供一小段 JavaScript 程式碼，你可以直接複製貼上，並打開 Console 來查看結果。

「等等，什麼是 Console？」你可能會這樣問。

Console 是瀏覽器提供給開發者的除錯工具，你可以透過以下方式打開：

• Windows/Linux：F12 或 Ctrl + Shift + I
• Mac 是 Cmd + Option + I

打開開發者工具後，切換到 Console 頁籤，就能看到程式碼的輸出結果。

打開 Console 後，就可以透過 JavaScript 來驗證 ASCII 的對應關係了，你只需要將筆者提供的程式碼貼上到 Console 中，然後按下 Enter 鍵就可以看到結果囉！

document.addEventListener('keydown', (event) => {
  const key = event.key; // 取得按下的鍵
  const charCode = key.charCodeAt(0); // 注意：charCodeAt 回傳的是 Unicode 碼點，但在 ASCII 範圍 (0–127) 會與 ASCII 碼一致
  console.log(`你按下的鍵是：${key}`);
  console.log(`對應的 ASCII 碼是：${charCode}`);
});

Note
Unicode 的知識點我們將會在下一篇介紹，你可以簡單理解為 Unicode 是一個更大的字元編碼標準，包含了 ASCII 的所有字元，並且擴展了更多的字元，以支援更多語言和符號。

底下是一個 CodePen 的範例，你也可以直接在這裡操作看看：

See the Pen keydown show ASCII by Ray (@hsiangfeng) on CodePen.

這段程式碼會在你按下鍵盤任意按鍵時，顯示出該鍵以及對應的 ASCII 碼，讓你直觀地看到電腦是如何處理這些字母的。

四組數字為一碼

前面你可能已經注意到一件事：在說明二進位時，我們通常會把數字分成四位一組，比如寫成 0100 0001，而不是 01000001 或者是 010 00001。

在解釋這件事之前，我們要先理解一個概念：「電腦的最小單位」。

前面的章節中，我們有介紹到電腦儲存的單位是以「位元組」（byte）為單位，因此，記憶體大小的分類方式大致如下：

• 1 Byte = 8 bits
• 1 KB = 1024 Bytes
• 1 MB = 1024 KB
• 1 GB = 1024 MB
• 1 TB = 1024 GB
• 1 PB = 1024 TB
• 1 EB = 1024 PB

而電腦最小的單位就是 1 bits（位元），也就是 0 或 1。

通常情況下，電腦並不會單獨使用一個位元（bit），而是將 8 個位元 組合成一個 位元組（byte）。

所以電腦在儲存記憶體時，真正的樣貌會是：

01000001 01000010 01000011 00100001

這樣的形式，才能夠完整地表示一個字母或符號（上方個代表 A、B、C、!）。

不過這種連在一起的二進位對我們來說很難閱讀，所以我們會習慣把它分成四位一組。
例如： 0100 0001、0100 0010、0100 0011、0010 0001，看起來就清楚許多。

另外，四位一組的分法也剛好對應十六進位的表示方式。
例如：0100 對應的是 4，而 0001 對應的是 1，所以 0100 0001 就對應到十六進位的 41。

綜合以上原因，我們在表示二進位時，才會習慣把數字拆成四位一組。這樣不但方便閱讀，也更容易轉換成十六進位喔～

結語

每次在介紹二進位的時候，我腦中總會浮現《駭客任務》裡的數碼雨畫面。

因為那幕實在太深刻了，所以我還特地做了一個「數碼雨網頁」，讓自己隨時都能看到那種效果。

Note
由於服務是架設在免費的 Render 方案上，所以會有冷啟動的問題，第一次進入網頁時可能會需要等個 30 秒～45 秒左右的等待期，接著後續就可以正常操作。

同步更新

本文將同步更新至以下網站：

• 是 Ray 不是 Array
• Code Review 我的青春：從『嗶』聲開啟我的軟體工程師之路（佛心分享-IT 人自學之術）
• Threads - 時常會聊軟實力
• Facebook - 搞怪迷因分享
• Instagram - 搞怪迷因分享 + 軟實力
• Portaly - 入口主頁