이모티콘 문자열 조작: '👨🏻‍💻'.replace('💻', '🏫') === '👨🏻‍🏫'

유니코드 이모티콘 문자열 조작은 흥미롭습니다.

전제 지식

「👨‍👩‍👧‍👦」라는 이모티콘은 그러한 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