絵文字の文字列操作: '👨🏻‍💻'.replace('💻', '🏫') === '👨🏻‍🏫'

6833 ワード
unicode JavaScript JavaScript テキストリンク

Unicodeの絵文字の文字列操作は興味深い。

前提知識

「👨‍👩‍👧‍👦」という絵文字は、そういう1文字(コードポイント)が存在するわけではない。 「👨‍👩‍👧‍👦」は「👨」「👩」「👧」「👦」という4つの絵文字とZero Width Joiner(U+200D)という文字の組み合わせのデータで表現される:

console.log(
    '👨' + '\u{200D}' +
    '👩' + '\u{200D}' +
    '👧' + '\u{200D}' +
    '👦'
)
//=> 👨‍👩‍👧‍👦

上記のとおり、「👨‍👩‍👧‍👦」はデータとしては7文字なのだが、表示上1文字分の幅になっているだけなのである。

ちなみにJavaScriptのfor ... ofは文字列をコードポイントごとにループできるので、「👨‍👩‍👧‍👦」をforで回すと構成文字に分解することもできる:

for (const codePoint of '👨‍👩‍👧‍👦') {
    console.log('%o', codePoint)
}
//=> '👨'
//=> '‍'
//=> '👩'
//=> '‍'
//=> '👧'
//=> '‍'
//=> '👦'

絵文字の文字列操作

「👨‍👩‍👧‍👦」以外にも、「👨🏻‍💻」は'👨' + 明るい肌色のU+1F3FB + U+200D + '💻'で構成される絵文字だったりと、複数文字で構成される絵文字はいろいろある。

なので、絵文字を文字列操作すると、

  • 職業を変えたり
  • 性別を変えたり
  • 肌の色を変えたり

することができる。

console.log(
    '👨', // 👨 (Man)
    '👨' + '🏻', // 👨🏻 (Man: Light Skin Tone)
    '👨🏻' + '\u{200D}' + '💻', // 👨🏻‍💻 (Man Technologist: Light Skin Tone)
    '👨🏻‍💻'.replace('💻', '🏫'), // 👨🏻‍🏫 (Man Teacher: Light Skin Tone)
    '👨🏻‍🏫'.replace('🏫', '🎓'), // 👨🏻‍🎓 (Man Student: Light Skin Tone)
    '👨🏻‍🎓'.replace('👨', '👩'), // 👩🏻‍🎓 (Woman Student: Light Skin Tone)
    '👩🏻‍🎓'.replace('🏻', '🏽'), // 👩🏽‍🎓 (Woman Student: Medium Skin Tone)
    '👩🏽‍🎓'.replace('🏽', ''),   // 👩‍🎓 (Woman Student)
    '👩‍🎓'.replace('🎓', '👧'), // 👩‍👧 (Family: Woman, Girl)
)

上のコードはフォントの関係で表示されない絵文字があるので、同じコードの画像を貼っておく↓

最後までお読みくださりありがとうございました。Twitterでは、Qiitaに書かない技術ネタなどもツイートしているので、よかったらフォローお願いします→Twitter@suin