PROBLEMA
Esto se debe a la codificación usada por javascript para representar los caracteres.
Javascript utiliza por defecto la codificación Unicode mediante el formato utf-8
, sin embargo los emojis
pertenecen al estándar Unicode con formato utf-16
, por lo cual para poder representarlos correctamente se necesitan 2 caracteres utf-8
.
Supongo que ya se intuye que al hacer el reverso de la cadena, estás revirtiendo el orden de los caracteres que conforman el emoji
, produciéndose lo que se conoce como un Mojibake
.
Por ejemplo, la siguiente cadena: "😍❤🤣😂😊"
parece tener 5 caracteres, sin embargo contiene en realidad 9, como se aprecia en el siguiente snippet:
let cadena = "😍❤🤣😂😊";
console.log(cadena);
console.log("Tamaño de la cadena:", cadena.length);
.as-console-wrapper {
min-height: 100%;
top: 0;
}
¿Pero si los emojis
necesitan 2 caracteres para ser representados, porqué el tamaño de la cadena es 9 y no 10?
Sucede que algunos emojis
se encuentran dentro del rango de valores Unicode con formato utf-8
, por lo cual se pueden representar con un sólo carácter:
let cadena = "❤❤❤";
let invertida = cadena.split("").reverse().join("");
console.log(cadena.length);
console.log(invertida);
.as-console-wrapper {
min-height: 100%;
top: 0;
}
Así, todos los emojis
, que necesiten ser representados usando 2 caracteres, se convertirán en Mojibake
si cambias el orden de los caracteres que lo representan.
SOLUCIÓN
Una posible solución es detectar si el carácter que estamos analizando es un carácter que forma parte de un par que define un emoji o si por el contrario es un caracter sencillo (utf-8
).
Para ello podemos apoyarnos en el método codePointAt()
, que nos devolverá un valor entero no negativo en el rango Unicode (de 0 a 1114111).
Dado que con utf-8
el rango de valores es de 0 a 65536, es fácil determinar si un carácter pertenece a una pareja que representa un emoji o si pertenece a un carácter sencillo, evaluando su valor entero.
Por ejemplo:
let cadena = "😍❤🤣😂😊";
function reverseStr(str) {
if(!str) return str;
let upperLimit = 65536;
let arr = [];
for(let i = 0; i < str.length; ++i) {
if(str.codePointAt(i) > upperLimit) {
arr.push(str[i] + str[i + 1]);
i++;
continue;
}
arr.push(str[i]);
}
return arr.reverse().join('');
}
let invertido = reverseStr(cadena);
console.log(cadena);
console.log(invertido);
.as-console-wrapper {
min-height: 100%;
top: 0;
}
En el código anterior estoy recorriendo la cadena y dependiendo del código de punto (code point) del carácter, lo incluyo directamente en el array
de caracteres o tomo su complemento (i + 1
) para formar un elemento compuesto de 2 caracteres que conforman el emoji
y lo añado al array
de caracteres. Luego, al aplicar el reverso al array
, no se altera el orden de los caracteres que componen el emoji
, resultando en un reverso correcto de la cadena.
Espero que esto te ayude a resolver el problema.