cannot get utf8 icon with charAt js

byMR

January 18, 2022

let a=["😍"] ;
let b="😍"

console.log(a[0],b,b.charAt(0))

"😍"
"😍"
"�"

this charAt prints questions mark … can someone enlighten me how to get utf8 icon with charAt in a string

>Solution :

Emojis are represented using multiple bytes:

let b="😍"
console.log(b.length)

With charAt you only get one part of the emoji.

With codePoint you can get the:

a non-negative integer that is the Unicode code point value at the given position.

You however need to know where the emojii starts at, because the index itself still refers to the bytes:

let b="😍👆👍"
console.dir(String.fromCodePoint(b.codePointAt(0)));
console.dir(String.fromCodePoint(b.codePointAt(2)));

You could split your string using the spread operator ... and then access the visible char in question using the index. This works because the iterator uses the code points and not individual bytes.

let b="😍test👆test👍"

function splitStringByCodePoint(str) {
  return [...str]
}

console.log(splitStringByCodePoint(b)[5])

But that won’t work with emojis like 👆🏽 because those consist of 👆 + byte(s) representing the variation (color).

let b="👆🏽"
console.log(b.length)
function splitStringByCodePoint(str) {
  return [...str]
}

console.log(splitStringByCodePoint(b))
console.log(String.fromCodePoint(b.codePointAt(0)));
console.log(String.fromCodePoint(b.codePointAt(2)));

If you want to support all emojis you currently need to write your own parser or look for a library that does that.