Se podría probar la opción de clasificación numeric de String.prototype.localeCompare ...

 const arr = [{ name: "Action 10", color: "transparent", type: "components" }, { name: "Action 11", color: "transparent", type: "components" }, { name: "Action 2", color: "transparent", type: "components" }, { name: "Action 20", color: "transparent", type: "components" }, { name: "Action 21", color: "transparent", type: "components" }, { name: "Action 3", color: "transparent", type: "components" }, { name: "Action 4", color: "transparent", type: "components" }, { name: "Action 5", color: "transparent", type: "components" }, { name: "Action 6", color: "transparent", type: "components" }, { name: "Action 1", color: "transparent", type: "components" }]; function sorter(a, b) { return a.name.localeCompare(b.name, undefined, { numeric: true }); } console.log(arr.sort(sorter));

 .as-console-wrapper { min-height: 100%!important; top: 0; }

El orden es correcto. La cadena "Acción 10" recopila mayor que Action 1 y menor que Action 2 , porque la comparación de cadenas se realiza carácter por carácter.

El algoritmo para la comparación de cadenas se encuentra aquí: https://262.ecma-international.org/5.1/#sec-11.8.5

[Si] tanto px como py son cadenas

• Si py es un prefijo de px , devuelve false . (Un valor de cadena p es un prefijo del valor de cadena q si q puede ser el resultado de concatenar p y alguna otra cadena r . Tenga en cuenta que cualquier cadena es un prefijo de sí mismo, porque r puede ser la cadena vacía).

• Si px es un prefijo de py , devuelve true .

Sea k el entero no negativo más pequeño tal que el carácter en la posición k dentro de px es diferente del carácter en la posición k dentro de py . (Debe haber tal k , ya que ninguna Cadena es un prefijo de la otra).

• Sea m el entero que es el valor de la unidad de código para el carácter en la posición k dentro de px .

• Sea n el número entero que es el valor de la unidad de código para el carácter en la posición k dentro de py .

• Si m < n , devuelve true . De lo contrario, devuelve false .

O, como una función de JavaScript, la expresión str1 < str2 se evalúa como si se invocara esta función (no es que alguien en su sano juicio implementaría el algoritmo como se describe en la especificación):

 function lt( px, py ) { const prefixOf = (x,y) => x.slice(0,y.length) === y; if ( prefixOf(px,py) ) return false; if ( prefixOf(py,px) ) return true; let k = 0 ; while ( px[k] === py[k] ) { ++k; } m = px.charCodeAt(k); n = py.charCodeAt(k); return m < n ? true : false; }

Si desea ordenar las cosas de acuerdo con el significado semántico de name , deberá dividir la cadena en una lista de sus segmentos numéricos y no numéricos, convertir los bits numéricos en números y luego comparar los segmentos en orden de izquierda a derecha. a derecha.

Puedes usar expresiones regulares:

 const sorter = (a, b) => +a.name.match(/\d+/) - +b.name.match(/\d+/);

MANIFESTACIÓN

 const arr = [{"name": "Action 10","color": "transparent","type": "components"}, {"name": "Action 11","color": "transparent","type": "components"}, {"name": "Action 2","color": "transparent","type": "components"}, {"name": "Action 20","color": "transparent","type": "components"}, {"name": "Action 21","color": "transparent","type": "components"}, {"name": "Action 3","color": "transparent","type": "components"}, {"name": "Action 4","color": "transparent","type": "components"}, {"name": "Action 5","color": "transparent","type": "components"}, {"name": "Action 6","color": "transparent","type": "components"}, {"name": "Action 1","color": "transparent","type": "components"}] function sorter(a, b) { return +a.name.match(/\d+/)[0] - +b.name.match(/\d+/)[0]; } console.log(arr.sort(sorter));