淺析emoji與零寬連接符的應用及Emoji在JavaScript中的應用


一、emoji與零寬連接符的應用

1、Emoji ZWJ Sequences

  一般的 emoji 的字符是 3 個字節或 4 個字節, 像 👩‍❤️‍👩 這種看起來只有單個字符的 emoji 之所以它的 size 遠超過 4 字節,是因為它是由若干個 emoji 按順序連接組成的,這種順序叫做 emoji zwj sequences 。

2、零寬連接符

  實際上,並不是把 👩 ❤️ 👩 這三個 emoji 並排在一起就能夠自動組成一個 👩‍❤️‍👩 。這三個 emoji 之間是需要通過一個 zwj 字符來連接的,也就是 “ 👩 zwj ❤️ zwj 👩 ”。

  那么什么是 zwj 呢?zwj 全稱 zero width joiner,也就是 “零寬連接符”。因為這個字符是零寬度的,所以我們是看不見這個字符的。根據名字我們就可以知道,zwj 的作用就是用於字符與字符之間的連接。

  zwj 的 unicode point 是 U+200D

  同樣,在 emoji 中還有非常多類似的組合式 emoji,比如:

二、Emoji在JavaScript中的應用

1、在寫 JavaScript 字串的時候,直接將 Emoji 字元寫入字符串是可以的,例如

var a = '💁👌🎍😍';

2、JavaScript 有個 Unicode escape sequences 表示法,可以用在字串中,假設 Unicode 的字碼為 U+1F197 ( 🆗 ),那么 JavaScript 有2種表示法:

(1)ES6 (ES2015) 可以使用 Unicode 的 Code point (碼點) 表示一個 Unicode 文字 🍔

var emoji1 = '\u{01F354}'; var emoji2 = String.fromCodePoint(0x1F354);

  注意:即便 ES6 可以用 Unicode 的 Code point  來表示一個 Unicode 文字,但事實上內部的文字碼點主要還是以 UTF-16 為主。

(2)ES5 僅支持 \uhhhh 表示法,大部分 Emoji 字元被定義在 BMP 以外的字碼區域,你必須把一個 Unicode 字碼碼(Code point) 轉換成2個 UTF-16 碼元 (code unit) 才行,通過 surrogate pair 的方式來表達一個 Unicode 字元。所以 U+1F197 只能用以下語法來寫: 🆗

'\uD83C\uDD97'

  你可以通過 ES6 (ES2015) 提供的 API 來計算出 ES5 可以使用的2個 UTF-16 碼元 (code unit):

var hb = '\u{01F197}'[0].codePointAt(0).toString(16); // \ud83c
var lb = '\u{01F197}'[1].codePointAt(0).toString(16); // \udd97

  也可以通過以下函數將 UTF-32 字碼轉換為2個 UTF-16 的表示法:

function toUTF16(codePoint) { var TEN_BITS = parseInt('1111111111', 2); function u(codeUnit) { return '\\u'+codeUnit.toString(16).toUpperCase(); } if (codePoint <= 0xFFFF) { return u(codePoint); } codePoint -= 0x10000; // Shift right to get to most significant 10 bits
    var leadingSurrogate = 0xD800 | (codePoint >> 10); // Mask to get least significant 10 bits
    var trailingSurrogate = 0xDC00 | (codePoint & TEN_BITS); return u(leadingSurrogate) + u(trailingSurrogate); }

3、將 12 個按鍵符號轉換為 Emoji

  Emoji 定義了 12 個按鍵符號(0123456789#*),只要加入一組 2 個字元的 Emoji Keycap Sequence ('\uFE0F\u20E3') 就可以把文字自動轉成 Emoji。

4、在現有的 Emoji 字元后方加入菲茨派屈克修飾符(虛色深度)

  在 Emoji 表情的 Unicode 規格中,有個特別的 EMOJI MODIFIER FITZPATRICK (菲茨派屈克修飾符) 可用,這個 修飾 (Modifier) 也是一個合法的 Unicode 字元,必須緊接着在 Emoji 字元后面出現。

  目前全世界人類的 虛色分級 (Fitzpatrick scale) 是 1975 年由一位叫做 Thomas B. Fitzpatrick 的人制定出來的,他當初定義了 6 種虛色等級。(Type 1 ~ Type 6)。研究 Emoji 竟然還能學到這種冷知識。

  在 Emoji 表情符符中,總共定義了 5 個字元,代表 Emoji 的顏色深度。為什么不是 6 個呢?因為 Type 1 與 Type 2 顏色太相近了,在電腦屏幕上不容易區分,索性就合並了。這5個字元分別是:

  以下是不同的 Emoji 在加上菲茨派屈克修飾符之后的比較

var adult = '🧑'; var fitz6 = '\uD83C\uDFFF'; var black = adult + fitz6; // 只要透過簡單的字串相加就可以完成!
console.log(black);

  這樣就會出現一個黑人。

  注意:不是所有 Emoji 都能加上虛色,只有跟「人類」有關的 Emoji 才能用,例如 Emoji 中有出現臉、手、腳、身體的,都可以這樣用。目前 Unicode v11.0 定義了 106 個 Emoji 是可以加上 EMOJI MODIFIER FITZPATRICK 字元的,完整清單可以參考這里

5、通過零寬連字符(ZWJ) 將多個Emoji 連接在一起

  我以前一直很納悶有些 Emoji 到底是怎樣產生的,深入研究后才發現,原諒 Emoji 這么好玩,除了有幾千種不同的 Emoji 之外,還可以將其組合成各種千變萬化的玩法。

  Unicode 中有個特殊的 零寬連字(ZWJ) 符號 (‍U+200D),這基本上是一個合法的 Unicode 文字,只是他預設是看不見的零寬(Zero Width) 字元。這個字元通常用在排版用途,不過卻被 Emoji 拿來用了。你可以通過這個字元,任意串接2個不同的 Emoji 字元,然后就可以創造出新的、不存在 Emoji 清單中的全新 Emoji 字元。

  我直接把 👨 (男人) 與👩 (女人) 串加起來,但中間卡一個 ZWJ 字元,這個 Emoji 就會自動變成 👨‍👩 (一男一女):

  如果希望顯示一家三口全家福的 Emoji ,可以直接把 👨 (男人) 、 👩 (女人) 與 🧒 (男孩) 串加起來,但不同的字元中間都要加一個 ZWJ 字元,Emoji 就會自動變成 👨‍👩‍👦 (一男一女外加一個男孩)

  基本上,你要加幾個人都可以,是不是很好玩。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM