Aprende a ordenar una matriz de cadenas con caracteres especiales (acentos) con JavaScript.

Los desarrolladores en países donde el inglés no es el idioma nativo, generalmente tienen muchos problemas con caracteres especiales y palabras con acentos como:

  • La cédille (cedilla) Ç ...
  • El acento aigu ( acento agudo ) é ...   
  • El acento circonflexe (circunflejo) â, ê, î, ô, û ...  
  • El acento grave ( acento grave ) à, è, ù ...   
  • El acento tréma (diéresis / diéresis) ë, ï, ü  

En JavaScript, por ejemplo, ordenar una matriz de palabras es bastante fácil para cadenas que no contienen tales caracteres, por ejemplo:

['Bogotá', 'Bucaramanga', 'Cali', 'Santa Marta', 'Cartagena'].sort();
// Esto se ordenará como
//  ["Bogotá", "Bucaramanga", "Cali", "Cartagena", "Santa Marta"]

La función de clasificación de JavaScript hace el truco automáticamente por usted. Lamentablemente, cuando clasifica palabras con los caracteres mencionados como primer carácter, por ejemplo con palabras en alemán, obtendrá resultados extraños:

['Bären', 'küssen', 'Käfer', 'Ähnlich', 'Äpfel'].sort();
// Esto se ordenará como
// ["Bären", "Käfer", "küssen", "Ähnlich", "Äpfel"]

Pobres alemanes ... esto no es lo que todo el mundo espera como orden "alfabético", sino que nos gustaría tener como resultado ["Ähnlich", "Äpfel", "Bären", "Käfer", "küssen"]. Sin embargo, la solución para este problema es bastante simple y se basa también en la función de ordenación nativa de JavaScript, pero en su lugar modificaremos la función compareFunction que recibe como primer argumento. El primer argumento de la función de clasificación especifica una función que define el orden de clasificación. Si se omite, los elementos de la matriz se convierten en cadenas y luego se ordenan según el valor del punto de código Unicode de cada carácter.

Solución usando localeCompare

La primera opción para ordenar correctamente una matriz de cadenas, es proporcionar como comparador el localeComparemétodo de una cadena, este método devuelve un número que indica si una cadena de referencia viene antes o después o es igual a la cadena dada en el orden de clasificación. Por ejemplo:

['Bären', 'küssen', 'Käfer', 'Ähnlich', 'Äpfel'].sort(function (a, b) {
    return a.localeCompare(b);
});

// Esto se ordena como:
// ["Ähnlich", "Äpfel", "Bären", "Käfer", "küssen"]

Solución usando Intl.Collator

La segunda opción para ordenar una matriz de cadenas con caracteres especiales es usar el  Intl.Collatorobjeto como comparador. Este objeto es un constructor de clasificadores, objetos que permiten la comparación de cadenas sensibles al lenguaje. Por ejemplo:

['Bären', 'küssen', 'Käfer', 'Ähnlich', 'Äpfel '].sort(Intl.Collator().compare);
// Esto se ordenará como:
// ["Ähnlich", "Äpfel ", "Bären", "Käfer", "küssen"]

Según algunas pruebas, la Intl.Collatorimplementación termina siendo mucho más rápida que localeCompareal comparar una gran cantidad de cadenas.

Que te diviertas ❤️!


Ingeniero de Software Senior en EPAM Anywhere. Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores