encode101, 網頁上的 `編碼` 基礎知識

July 05, 2019

編碼的作用？

用數字代表某一個文字

ASCII 編碼

Char 代表文字符號, Dec 代表相對應的十進位數字

Unicode

使用十六進制的方式來表示一個數值
把數字和全世界文字符號間做一對一的轉換

進位制

JavaScript 中：

二進制數字，需在數字的最前面加上 0b
八進制數字，需在數字的最前面加上 0 或 0o 。
十六進制數字，需在數字的最前面加上 0x。

U+<十六進制數值>

例如 U+0061 就表示英文字母的 a

其中的 0061 是十六進位制的數值，轉換成 10 進位的話是 97，這和當初的 ASCII 表示相對應的

沿用 ASCII 編碼

Unicode 直接沿用原本 ASCII 的編號與文字符號的對應，所以 ASCII 中 a 的編號會和 Unicode 中 a 的編號相同，用十進位表示都是97。

Code Point 碼點

文字或符號對應到的編號稱為「碼點」，Unicode 中指的就是 U+ 後面的數字，每個碼點都是唯一的

碼點與文字轉換

ES6 str.codePointAt() 和 String.fromCodePoint()

ES5 str.charCodeAt() 和 String.fromCharCode()

文字符號 to Unicode 碼點

'A'.codePointAt()            // 回傳 '65'（十進制）
(65).toString(16)            // 回傳 41，將 65 轉成十六進制
// 表示 A 為 U+0041

Unicode 碼點 to 文字符號

String.fromCodePoint(65)     // A，使用 10 進位
String.fromCodePoint(0x0041) // A，使用 16 進位
String.fromCodePoint(0o101)    // A，使用 8 進位

Code Point in JavaScript

只使用到 Unicode 基本平面時（\u <碼點>）
有使用到 Unicode 輔助平面時（\u {<碼點> }）
只使用到 ASCII 字符時（\x <碼點>）

// A = U+0041 = \x41 = \u0041 = \u{41} = \u{0041}

console.log('\u0041')          // 'A'
console.log('\u{41}')          // 'A'
console.log('\u{0041}')        // 'A'
console.log('\x41')            // 'A'

UTF-8, UTF-16, UTF-32

Unicode（萬國碼）讓所有國家的文字符號都有個唯一的碼點可以在電腦內被辨，但是碼點（從 U+0000 到 U+10FFFF）要如何儲存則不在 Unicode 規範中

UTF-8, UTF-16 或 UTF-32 則都可以視為是 Unicode 實做的一種方式，它們用不同的方式來規範要如何將 Unicode 中的碼點儲存在電腦中以被使用，如果直接把整個 Unicode 代碼搬進電腦裡儲存，可能會佔用太多不必要的空間（例如，UTF-32）。

在網際網路上最常被使用的則是 UTF-8 的編碼方式，而在 JavaScript 引擎中主要支援的則是 UTF-16。

HTML Encode

HTML Encode 的特點在於，它會用 & 開始 ; 結束

也可以用十六進位或十進位的方式表示

例如：

! = &excl; = ! = !，&excl 字串經過 HTML 後會顯示成 !

https://dev.w3.org/html5/html-author/charref

URI Encode

encodeURI

不編碼字符有 82 個

只是對中文字符做了編碼，編碼後的地址在瀏覽器裡可以直接打開

要編碼的 url 沒有參數存在，使用 encodeURI

encodeURIComponent

不編碼字符有 71 個

比 encodeURI 編碼的範圍更大

將 "/" 符號也已經轉碼了

編碼後的位置在瀏覽器裡不能被直接訪問

url 中有參數存在，使用 encodeURIComponent

New's News