GeezerVison

Código Unicode de un carácter

Desde Javascript es muy sencillo convertir un carácter a su representación en Unicode. Es tan sencillo como utilizar el método .codePointAt(), al que se le debe pasar la posición del carácter a analizar:

const letter = "Manz";

letter[0];                            // "M" (En la posición 0 está la "M")
letter.codePointAt(0);                // 77 (77 es el número decimal de la "M")
letter.codePointAt(0).toString(16);   // "4d" (0x004d es el número hexadecimal de "M")

letter.codePointAt(3);                // 122
letter.codePointAt(4);                // undefined (no hay carácter en esta posición)

Si un carácter no existe, observa que devuelve .

Carácter de un código Unicode

Si queremos realizar el paso inverso, es decir, teniendo un número decimal o hexadecimal, obtener el carácter que representa, podemos hacerlo de la siguiente forma, utilizando el método estático String.fromCodePoint(), al que se le pasa el número en cuestión:

String.fromCodePoint(65);             // "A"
String.fromCodePoint(77);             // "M"
String.fromCodePoint(0x004d);         // "M"

Observa que en el último caso, le pasamos el número en hexadecimal. Funciona perfectamente también, ya que 0x004d y 77 son el mismo número, sólo que representado en otra base numérica.

Emojis individuales

La longitud de un emoji se puede ver muy fácilmente de la siguiente forma:

"⚡".length;     // 1
"⛔".length;     // 1
"😀".length;     // 2
"🚗".length;     // 2

Ahora, vamos a intentar separarlos utilizando el método .split() que aprendimos en temas anteriores. Te encontrarás con que los emojis «más antiguos» sólo tienen su propio elemento, mientras que los posteriores, los descompone en dos code points combinados.

"⚡".split("");     // ["⚡"]
"⛔".split("");   // ["⛔"]
"😀".split("");   // ["\uD83D", "\uDE00"]
"🚗".split("");   // ["\uD83D", "\uDE97"]

Esto permite que se puedan crear muchos más emojis realizando combinaciones, ya que observa que los dos últimos emojis, comparten el primer code point \u{D83D}, sin embargo, varía el último.

Emojis combinados

Quizás no lo sepas, pero hay algún que otro giro de guión interesante con los emojis, más concretamente con los más recientes. Nada mejor que demostrarlo con un ejemplo de código, que luego explicaremos:

"👨‍👩‍👧‍👦".length;              // 11

const paste = "\u{200d}";  // Code point de "pegamento"
"👨‍👩‍👧‍👦".split(paste);        // ["👨", "👩", "👧", "👦"]

["👨", "👩", "👧", "👦"].join("");     // "👨👩👧👦"
["👨", "👩", "👧", "👦"].join(paste);  // "👨‍👩‍👧‍👦"
["👨", "👨", "👧"].join(paste);        // "👨‍👨‍👧"
["👩", "👩"].join(paste);              // "👩‍👩"

En primer lugar, observa que el emoji de la familia nos dice que tiene un tamaño de 11. Si investigamos un poco, y hacemos una desestructuración con [..."👨‍👩‍👧‍👦"], veremos que el truco es que está combinado por varios emojis individuales, que tienen mucho sentido al combinar.

Observa que si unimos los cuatro emojis individuales por una cadena vacía "", obtenemos los cuatro emojis individuales unidos en un , sin embargo, si utilizamos el code point \u{200d} como "pegamento", esos emojis se unen formando un emoji individual que forma una familia. De hecho, podemos incluso ir cambiando los emojis individuales que lo forman, y veremos que se refleja en el resultado.

Existen varios emojis de este tipo, que permiten hacer combinaciones. Algunos ejemplos:

Recuerda que los caracteres Unicode se definen de forma universal, y hay muchos y muy variados, sin embargo, cada sistema operativo es la responsable de definirlos, y cada plataforma puede modificarlos o crear los suyos propios.

Con el tiempo, van surgiendo nuevos emojis, por lo que es posible que algunos emojis muy recientes no puedas verlo en un sistema Mac pero si en un sistema Windows (o viceversa). Con esta forma de crear emojis combinables, en el caso de que el emoji de la bandera 🏴‍☠️ no esté listo en tu sistema, siempre verías los anteriores 🏴☠️, por lo que tienes un fallback interesante que te da a entender el concepto.