[JS] 你不知道的emoji🧝‍♀️小知識

在手機或電腦上使用Emoji表情時，每個Emoji符號看起來似乎都只佔據了一個字的長度，但在實際開發中，這些可愛的符號代表的文字長度卻可能截然不同。

ALEX.D9 IG | Emoji 長度不一樣長？

猜猜看下面印出來的長度是多少？

console.log('😀'.length)  
console.log('👩🏽‍🦳'.length) 
console.log('👨‍👧‍👧'.length)

.
.
.

答案揭曉
'😀'.length === 2

'👩🏽‍🦳'.length === 7

'👨‍👧‍👧'.length === 8

是的，答案不是1，而且每個還不太一樣長🥸，讓我們一起來認識一下Emoji吧！

Emoji的由來

Emoji一開始是90年代由日本知名電信公司NTT Docomo公司的栗田穣崇(Shigetaka Kurit)創建的，他1995年從日本專修大學經濟學部畢業，同年擔任NTT DOCOMO內容開發部長，也是一位界面設計師。

NTT Docomo Logo

Emoji的e在日語中表示"絵"，moji則表示"文字"，連在一起就是"絵文字"。

自從蘋果公司在iOS 5輸入法中加入了Emoji後，開始席捲全球🔥。

Emoji的實作方式

實際上的Emoji 其實是由 Unicode 編碼表示，每個emoji都有一個code point。

例如: 笑脸 😊 的 Unicode code point是 U+1F60A

Unicode 只規定 Emoji 的code point 和涵義，這張笑臉長什麼樣由各個系統自己實現，所以你看到的😊在手機或是其他不同系統的設備上看到的會是不太一樣的笑臉。

不同系統會有不同笑臉

Emoji的長度

既然Emoji 是由 Unicode 編碼表示，當我們使用程式語言檢查字串長度時，就會使用該程式語言預設的編碼方式來檢查長度，例如:

JS預設的Unicode 編碼方式為utf-16，我們嘗試用16進制把它印出

const message = '😀'; 
for (let i = 0; i < message.length; i++) 
 { 
			console.log(`0x${message.charCodeAt(i).toString(16).toUpperCase()}`); 
 }

輸出的結果是： 0xD83D 和 0xDE00
可以發現😀是由兩個utf-16編碼組成，所以長度就是2囉！

Emoji也可以組合

透過上述方法，把👩🏽‍🦳這張印出來，可以得到7個編碼：

0xD83D, 0xDC69, 0xD83C, 0xDFFD, 0x200D, 0xD83E, 0xDDB3

其中0x200D代表其實是表示零寬度連字符(Zero Width Joiner)，這個連字符可以用來連接emoji喔！

因此我們可以以0x200D為界，把整組編碼分為前半段(part1)與後半段(part2)

part1: 0xD83D, 0xDC69, 0xD83C, 0xDFFD
part2: 0xD83E, 0xDDB3

我們來試試看把part1組合起來看看會出現什麼：

const part1 = String.fromCharCode(0xD83D, 0xDC69, 0xD83C, 0xDFFD); 
console.log(part1);

結果: 👩🏽

再把後半段part2組合起來，

const part2 = String.fromCharCode(0xD83E, 0xDDB3);
console.log(part2);

結果: 🦳

由此可知，👩🏽 +0x200D+ 🦳就是👩🏽‍🦳。

• 考考你：看到這邊有辦法用上面兩段程式碼得知👨🏿＋🦳是什麼嗎？

神奇的emoji妙用

Emoji除了用來傳訊息寫文章，還能當作域名喔！

表情圖示百科就是使用 http://📙.la/ 當作他們的短網址服務，有emoji找不到的可以到這邊 http://📙.la/ 來尋找看看。

參考資料:

栗田穰崇維基百科

Emoji Unicode Tables

http://📙.la/

喜歡以上的分享嗎？ 歡迎大家透過任何方式跟我說自己的想法喔 !

| Email: [email protected]

| IG: ALEX.D9 軟體工程師 ｜ 軟體開發、閱讀、生活分享

最近天氣陰晴不定，恰逢公司這禮拜product release壓力山大，現在感冒咳嗽咳到隔壁同事把珍藏多年的喉糖都給我吃了，大家記得注意身體健康，晚上被子要蓋好。