Cómo ordenar cadenas en JavaScript

Una respuesta actualizada (octubre de 2014)

Estaba realmente molesto por este orden de clasificación natural de cadenas, así que me tomé bastante tiempo para investigar este problema. Espero que esto ayude.

Larga historia corta

localeCompare() el soporte de personajes es rudo, solo úsalo. Como señaló Shog9, la respuesta a su pregunta es:

return item1.attr.localeCompare(item2.attr);

Errores encontrados en todas las implementaciones personalizadas de javascript "natural string sort order"

Hay un montón de costumbre implementaciones por ahí, tratando de hacer la comparación de cadenas más precisamente llamado "orden natural de clasificación de cadenas"

Al "jugar" con estas implementaciones, siempre noté alguna extraña elección de "orden natural de clasificación", o más bien errores (u omisiones en el mejor de los casos).

Normalmente, los caracteres especiales (espacio, guión, ampersand, corchetes, etc.) no se procesan correctamente.

Luego los encontrará apareciendo mezclados en diferentes lugares, típicamente eso podría be:

• algunos estarán entre la 'Z' mayúscula y la 'a' minúscula
• algunos estarán entre el ' 9 'y la'A' mayúscula
• algunos estarán después de la 'z'minúscula

Cuando uno hubiera esperado que todos los caracteres especiales estuvieran "agrupados" en un solo lugar, excepto el carácter especial del espacio tal vez (que siempre sería el primer carácter). Es decir, todo antes de números, o todo entre números y letras (minúsculas y mayúsculas siendo "juntos" uno tras otro), o todos después de las letras.

Mi conclusión es que todos ellos no proporcionan un orden consistente cuando empiezo a agregar caracteres apenas inusuales (es decir. caracteres con diacríticos o caracteres como guión, signo de exclamación, etc.).

Investigación sobre las implementaciones personalizadas:

• Natural Compare Lite https://github.com/litejs/natural-compare-lite : Falla al ordenar consistentemente https://github.com/litejs/natural-compare-lite/issues/1 y http://jsbin.com/bevututodavi/1/edit?js, console , caracteres latinos básicos ordenando http://jsbin.com/bevututodavi/5/edit?js, consola
• Natural Sort https://github.com/javve/natural-sort : Falla al ordenar de manera consistente, ver problema https://github.com/javve/natural-sort/issues/7 y ver caracteres latinos básicos ordenando http://jsbin.com/cipimosedoqe/3/edit?js, consola
• Javascript Natural Sort https://github.com/overset/javascript-natural-sort : parece bastante descuidado desde febrero de 2012, Falla en la clasificación de manera consistente, ver problema https://github.com/overset/javascript-natural-sort/issues/16
• Alphanum http://www.davekoelle.com/files/alphanum.js , Falla al ordenar de manera consistente, ver http://jsbin.com/tuminoxifuyo/1/edit?js, consola

Implementaciones nativas de "orden natural de clasificación de cadenas" de los navegadores via localeCompare()

localeCompare() la implementación más antigua (sin los argumentos locales y options) es soportada por IE6+, ver http://msdn.microsoft.com/en-us/library/ie/s4esdbwz (v=vs.94). aspx (desplácese hacia abajo hasta el método localeCompare ()). El método incorporado localeCompare() hace un trabajo mucho mejor a la hora de ordenar, incluso caracteres internacionales y especiales. El único problema con el método localeCompare() es que "la configuración regional y el orden de ordenación utilizados dependen completamente de la implementación". En otras palabras, al usar localeCompare como stringOne.localeCompare (stringTwo): Firefox, Safari, Chrome e IE tienen un orden de clasificación diferente para las cadenas.

Investigación sobre las implementaciones nativas del navegador:

• http://jsbin.com/beboroyifomu/1/edit?js, console - comparación básica de caracteres latinos con localeCompare() http://jsbin.com/viyucavudela/2 / - comparación básica de caracteres latinos con localeCompare () para probar en IE8
• http://jsbin.com/beboroyifomu/2/edit?js, console - caracteres latinos básicos en comparación de cadenas: comprobación de consistencia en cadena vs cuando un carácter está solo
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare- IE11 + soporta los nuevos argumentos locales y opciones

Dificultad del "orden de clasificación natural de la cadena"

Implementando un algoritmo sólido (significado: consistente pero también cubre una amplia gama de personajes) es una tarea muy difícil. UTF8 contiene más de 2000 caracteres & cubre más de 120 scripts (idiomas) . Finalmente, hay algunas especificaciones para estas tareas, se llama el "Algoritmo de Intercalación Unicode", que se puede encontrar en http://www.unicode.org/reports/tr10 / . Puede encontrar más información sobre esto en esta pregunta que publiqué https://softwareengineering.stackexchange.com/questions/257286/is-there-any-language-agnostic-specification-for-string-natural-sorting-order

Conclusión final

Así que teniendo en cuenta el nivel actual de soporte proporcionado por las implementaciones personalizadas de javascript que encontré, probablemente nunca veremos nada que se acerque a soportar todos estos caracteres y scripts (idiomas). Por lo tanto, prefiero usar el método nativo localeCompare() de los navegadores. Sí, es tiene la desventaja de ser no consistente en todos los navegadores, pero las pruebas básicas muestran que cubre una gama mucho más amplia de caracteres, lo que permite órdenes de clasificación sólidas y significativas.

Así como lo señala Shog9, la respuesta a su pregunta es:

return item1.attr.localeCompare(item2.attr);

Lectura adicional:

• https://softwareengineering.stackexchange.com/questions/257286/is-there-any-language-agnostic-specification-for-string-natural-sorting-order
• ¿Cómo se hace la cadena comparación en JavaScript?
• Javascript: tipo natural de cadenas alfanuméricas
• Sort Array de elementos numéricos y alfabéticos (Natural Sort)
• Ordenar alfa/numérico mixto array
• https://web.archive.org/web/20130929122019/http://my.opera.com/GreyWyvern/blog/show.dml/1671288
• https://web.archive.org/web/20131005224909/http://www.davekoelle.com/alphanum.html
• http://snipplr.com/view/36012/javascript-natural-sort /
• http://blog.codinghorror.com/sorting-for-humans-natural-sort-order /

Gracias a la buena respuesta de Shog9, que me puso en el " derecho" dirección creo

Respuesta más simple con ECMAScript 2016

list.sort((a, b) => (a.attr > b.attr) - (a.attr < b.attr))

O

list.sort((a, b) => +(a.attr > b.attr) || -(a.attr < b.attr))

Debe usar > o

list.sort(function(item1, item2) {
    var val1 = item1.attr,
        val2 = item2.attr;
    if (val1 == val2) return 0;
    if (val1 > val2) return 1;
    if (val1 < val2) return -1;
});

Me había preocupado por esto durante mucho tiempo, así que finalmente investigué esto y les di esta larga razón de por qué las cosas son como son.

De la especificación :

Section 11.9.4   The Strict Equals Operator ( === )

The production EqualityExpression : EqualityExpression === RelationalExpression
is evaluated as follows: 
- Let lref be the result of evaluating EqualityExpression.
- Let lval be GetValue(lref).
- Let rref be the result of evaluating RelationalExpression.
- Let rval be GetValue(rref).
- Return the result of performing the strict equality comparison 
  rval === lval. (See 11.9.6)

Así que ahora vamos a 11.9.6

11.9.6   The Strict Equality Comparison Algorithm

The comparison x === y, where x and y are values, produces true or false. 
Such a comparison is performed as follows: 
- If Type(x) is different from Type(y), return false.
- If Type(x) is Undefined, return true.
- If Type(x) is Null, return true.
- If Type(x) is Number, then
...
- If Type(x) is String, then return true if x and y are exactly the 
  same sequence of characters (same length and same characters in 
  corresponding positions); otherwise, return false.

Eso es todo. El operador triple igual aplicado a cadenas devuelve true iff los argumentos son exactamente las mismas cadenas (la misma longitud y los mismos caracteres en las posiciones correspondientes).

Así que === funcionará en los casos en que estamos tratando de comparar cadenas que podrían haber llegado de diferentes fuentes, pero que sabemos que eventualmente tendrán los mismos valores, un escenario lo suficientemente común para cadenas en línea en nuestro código. Por ejemplo, si tenemos una variable llamada connection_state, y queremos saber en cuál de los siguientes estados ['connecting', 'connected', 'disconnecting', 'disconnected'] se encuentra en este momento, podemos usar directamente el ===.

Pero hay más. Justo por encima de 11.9.4, hay una nota corta:

NOTE 4     
  Comparison of Strings uses a simple equality test on sequences of code 
  unit values. There is no attempt to use the more complex, semantically oriented
  definitions of character or string equality and collating order defined in the 
  Unicode specification. Therefore Strings values that are canonically equal
  according to the Unicode standard could test as unequal. In effect this 
  algorithm assumes that both Strings are already in normalized form.

Hmm. ¿Ahora qué? Las cadenas obtenidas externamente pueden, y lo más probable es que sea raro unicodey, y nuestro gentil === no les hará justicia. En viene localeCompare al rescate:

15.5.4.9   String.prototype.localeCompare (that)
    ...
    The actual return values are implementation-defined to permit implementers 
    to encode additional information in the value, but the function is required 
    to define a total ordering on all Strings and to return 0 when comparing
    Strings that are considered canonically equivalent by the Unicode standard. 

Podemos irnos a casa ahora.

Tl;dr;

Para comparar cadenas en javascript, use localeCompare; si sabe que las cadenas no tienen componentes no ASCII porque son, por ejemplo, constantes internas del programa, entonces === también funciona.

<!doctype html>
<html>
<body>
<p id = "myString">zyxtspqnmdba</p>
<p id = "orderedString"></p>
<script>
var myString = document.getElementById("myString").innerHTML;
orderString(myString);
function orderString(str) {
    var i = 0;
    var myArray = str.split("");
    while (i < str.length){
        var j = i + 1;
        while (j < str.length) {
            if (myArray[j] < myArray[i]){
                var temp = myArray[i];
                myArray[i] = myArray[j];
                myArray[j] = temp;
            }
            j++;
        }
        i++;
    }
    var newString = myArray.join("");
    document.getElementById("orderedString").innerHTML = newString;
}
</script>
</body>
</html>

En su operación en su pregunta inicial, está realizando la siguiente operación:

item1.attr - item2.attr

Entonces, asumiendo que son números (es decir, item1.attr = "1", item2.attr = "2") Todavía puede usar el operador "= = = " (u otros evaluadores estrictos) siempre que se asegure de tipo. Lo siguiente debería funcionar:

return parseInt(item1.attr) - parseInt(item2.attr);

Si son alfanuméricos, entonces use localCompare().

list.sort(function(item1, item2){
    return +(item1.attr > item2.attr) || +(item1.attr === item2.attr) - 1;
}) 

Cómo funcionan las muestras:

+('aaa'>'bbb')||+('aaa'==='bbb')-1
+(false)||+(false)-1
0||0-1
-1

+('bbb'>'aaa')||+('bbb'==='aaa')-1
+(true)||+(false)-1
1||0-1
1

+('aaa'>'aaa')||+('aaa'==='aaa')-1
+(false)||+(true)-1
0||1-1
0