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

更新於 發佈於 閱讀時間約 4 分鐘


在手機或電腦上使用Emoji表情時,每個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內容開發部長,也是一位界面設計師。


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: d9alex9d@gmail.com

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


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





留言
avatar-img
留言分享你的想法!
avatar-img
alex.d9的沙龍
20會員
11內容數
這邊應該會放軟體開發、 讀書心得和自我成長的內容。
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外,還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後,介紹了如何引入和使用 Google 字體,以提高網頁的排版效果。
Thumbnail
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外,還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後,介紹了如何引入和使用 Google 字體,以提高網頁的排版效果。
Thumbnail
高中數學主題練習—指數比大小
Thumbnail
高中數學主題練習—指數比大小
Thumbnail
解答來囉 (AI設計的縮圖代表算數學很耗能,沒錯!)
Thumbnail
解答來囉 (AI設計的縮圖代表算數學很耗能,沒錯!)
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
在本章節中,我們將學習JavaScript的基本語法,包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
Thumbnail
在本章節中,我們將學習JavaScript的基本語法,包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
Thumbnail
接下來喜特先生會介紹一系列關於文字處理時,會常常運用到的函式。我們這次先從比較簡單的 LEN、CHAR 和 REPT 開始,之後會陸續介紹其他的。如果你有什麼想要了解的函式,歡迎在下面留言告訴我! LEN:字元長度 我們可以用 LEN 函式取得儲存格或字元的長度。 語法相當簡單:
Thumbnail
接下來喜特先生會介紹一系列關於文字處理時,會常常運用到的函式。我們這次先從比較簡單的 LEN、CHAR 和 REPT 開始,之後會陸續介紹其他的。如果你有什麼想要了解的函式,歡迎在下面留言告訴我! LEN:字元長度 我們可以用 LEN 函式取得儲存格或字元的長度。 語法相當簡單:
Thumbnail
你知道Emoji看起來是一個符號,但寫程式時長度卻不一樣嗎? 😀.length 跟 👩🏽‍🦳.length 是不相等的喔! 一起來了解Emoji的故事吧
Thumbnail
你知道Emoji看起來是一個符號,但寫程式時長度卻不一樣嗎? 😀.length 跟 👩🏽‍🦳.length 是不相等的喔! 一起來了解Emoji的故事吧
Thumbnail
高中數學主題練習—相關係數計算
Thumbnail
高中數學主題練習—相關係數計算
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News