search
LoginSignup
110
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

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

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)
)

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

Untitled_6_js.png


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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
110
Help us understand the problem. What are the problem?