[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
19會員
11內容數
這邊應該會放軟體開發、 讀書心得和自我成長的內容。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
alex.d9的沙龍 的其他內容
使用React.js實作CAPTCHA元件的步驟和技巧
使用React.js實作CAPTCHA元件的步驟和技巧
你可能也想看
Google News 追蹤
Thumbnail
Hi 我是 VK~ 在 8 月底寫完〈探索 AI 時代的知識革命:NotebookLM 如何顛覆學習和創作流程?〉後,有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題,剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
Thumbnail
國泰CUBE App 整合外幣換匯、基金、證券等服務,提供簡便、低成本的美股定期定額投資解決方案。 5分鐘開戶、低投資門檻,幫助新手輕鬆進軍國際股市;提供人氣排行榜,讓投資人能夠掌握市場趨勢。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
文、圖/傑思·愛德威提供   農曆新年將至,家家戶戶開始辦年貨,傑思·愛德威直接把年貨大街搬到公司,提前感受滿滿年味。「JS年貨大街」一條龍包辦過年會遇到的所有「吃」「喝」「玩」「樂」,像是除夕圍爐必吃的佛跳牆、拜年伴手禮、美妝保養品、果乾零嘴、醫美療程、旅遊行程等,通通都能在JS年貨大街一網
Thumbnail
本文是2023六角JS直播班完課後給六角學院的心得回饋,但在六角的學習體驗真的很好,希望分享出來也能幫助到正在轉職路上徘徊,或是在自學路上遭遇挫折想找老師學習的你。
Thumbnail
在前端開發中,因為瀏覽器可以迅速啟動與關閉的特性,再加上 JavaScript 的 Garbage Collection 垃圾回收機制,常常讓前端開發者忽略了 JavaScript 的記憶體管理機制與 Memory Leak 帶來的危險性,有時應用的效能瓶頸可能就因此產生了。
Thumbnail
當你做好你的網站後,教大家把你的網站部署到雲端伺服器Vercel
Thumbnail
前陣子公司的專案時常發生記憶體不足的錯誤,套上監測軟體一看,逐漸攀升的使用量,到達上限後使程式崩潰,同事們馬上說出:「這是 Memory leak 啊!」 Memory leak 並不可怕,現代的工具可以讓我們快速找出問題並修正,這篇文章記錄了我們的解決方式,希望有幫助到大家!
Thumbnail
前陣子公司的專案時常發生記憶體不足的錯誤,套上監測軟體一看,逐漸攀升的使用量,到達上限後使程式崩潰,同事們馬上說出:「這是 Memory leak 啊!」 Memory leak 並不可怕,現代的工具可以讓我們快速找出問題並修正,這篇文章記錄了我們的解決方式,希望有幫助到大家!
Thumbnail
Hi 我是 VK~ 在 8 月底寫完〈探索 AI 時代的知識革命:NotebookLM 如何顛覆學習和創作流程?〉後,有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題,剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
Thumbnail
國泰CUBE App 整合外幣換匯、基金、證券等服務,提供簡便、低成本的美股定期定額投資解決方案。 5分鐘開戶、低投資門檻,幫助新手輕鬆進軍國際股市;提供人氣排行榜,讓投資人能夠掌握市場趨勢。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
文、圖/傑思·愛德威提供   農曆新年將至,家家戶戶開始辦年貨,傑思·愛德威直接把年貨大街搬到公司,提前感受滿滿年味。「JS年貨大街」一條龍包辦過年會遇到的所有「吃」「喝」「玩」「樂」,像是除夕圍爐必吃的佛跳牆、拜年伴手禮、美妝保養品、果乾零嘴、醫美療程、旅遊行程等,通通都能在JS年貨大街一網
Thumbnail
本文是2023六角JS直播班完課後給六角學院的心得回饋,但在六角的學習體驗真的很好,希望分享出來也能幫助到正在轉職路上徘徊,或是在自學路上遭遇挫折想找老師學習的你。
Thumbnail
在前端開發中,因為瀏覽器可以迅速啟動與關閉的特性,再加上 JavaScript 的 Garbage Collection 垃圾回收機制,常常讓前端開發者忽略了 JavaScript 的記憶體管理機制與 Memory Leak 帶來的危險性,有時應用的效能瓶頸可能就因此產生了。
Thumbnail
當你做好你的網站後,教大家把你的網站部署到雲端伺服器Vercel
Thumbnail
前陣子公司的專案時常發生記憶體不足的錯誤,套上監測軟體一看,逐漸攀升的使用量,到達上限後使程式崩潰,同事們馬上說出:「這是 Memory leak 啊!」 Memory leak 並不可怕,現代的工具可以讓我們快速找出問題並修正,這篇文章記錄了我們的解決方式,希望有幫助到大家!
Thumbnail
前陣子公司的專案時常發生記憶體不足的錯誤,套上監測軟體一看,逐漸攀升的使用量,到達上限後使程式崩潰,同事們馬上說出:「這是 Memory leak 啊!」 Memory leak 並不可怕,現代的工具可以讓我們快速找出問題並修正,這篇文章記錄了我們的解決方式,希望有幫助到大家!