8

Eu sei como ordenar com acento, o problema é quando essa ordem é decrescente. O código abaixo deixa na ordem decrescente e compara letras maiúsculas:

let nome=['João','alice','Julia','carla'];
nome.sort((a,b)=>{
    let x=a.toUpperCase();
    let y=b.toUpperCase();

    return x==y ? 0 : x>y?-1:1; 
});
console.log(nome);

Esse código abaixo ordena palavras acentuadas:

let words=['pé','pato','ás','abelha'];
words.sort((a,b)=>{     
    return a.localeCompare(b);
})
console.log(words);

Minha dúvida é como juntar os dois códigos, uma função que compare os caracteres acentuados e coloque na ordem decrescente.

8
  • 2
    Olhe esta resposta, talvez ajude pt.stackoverflow.com/questions/445795/… Commented 6/06/2022 às 12:18
  • 1
    Já tentou inverter a array após ordenar elas com o localeCompare? words.reverse(); Commented 6/06/2022 às 12:19
  • 1
    CypherPotato Caracas e não é que deu certo. Eu pensei que ele ia embaralhar se fosse letras maiúscula, mas foi certinho o localeCompare parece que compara letras maiúsculas também. Commented 6/06/2022 às 12:28
  • @IvairQuirino dei uma resposta mais detalhada sobre isso. Commented 6/06/2022 às 12:31
  • 1
    @AugustoVasques Bastava fazer Intl.Collator().compare(b,a) (inverter a e b, a mesma ideia que fiz na minha resposta). Aliás, como já explicado aqui, Collator e localeCompare funcionam da mesma maneira, a única diferença é que o Collator é mais performático caso precise fazer várias comparações
    – hkotsubo
    Commented 6/06/2022 às 17:29

1 Resposta 1

9

Ao contrário do indicado nos comentários e em outra resposta (que foi apagada), não precisa inverter o array. Basta trocar o a e b na comparação:

let words = ['pé', 'pato', 'ás', 'abelha'];
words.sort((a, b) => b.localeCompare(a));
console.log(words); // [ 'pé', 'pato', 'ás', 'abelha' ]

Ou seja, em vez de a.localeCompare(b), basta trocar para b.localeCompare(a), que a ordenação já será em ordem descrescente. Afinal, a ideia da função de callback passada para sort é que ela deve retornar um número negativo se o primeiro parâmetro (no caso, a) for menor que o segundo (b). Ao inverter a chamada (em vez de verificar se a é menor que b, vejo se b é menor que a), o resultado acaba ficando "invertido", e o resultado será o array ordenado em ordem descrescente.


Já para considerar letras maiúsculas e minúsculas, não precisa de toUpperCase, pois o próprio localeCompare possui opções para configurar este comportamento. No caso, basta usar a opção sensitivity. De acordo com a documentação, há vários valores diferentes para ter os mais diversos resultados:

sensitivity Diferencia acentos? Diferencia maiúsculas e minúsculas? Exemplo
"base" não não a = á
a = A
"accent" sim não a ≠ á
a = A
"case" não sim a = á
a ≠ A
"variant" sim sim a ≠ á
a ≠ A

Um detalhe importante é que a ideia de localeCompare é fazer comparações de acordo com as regras de determinado locale (conforme já explicado aqui). Ao não informar um locale, ele usa a implementação default do ambiente no qual o código está rodando (que pode ser o idioma configurado no browser/SO, por exemplo, mas vale lembrar que isso varia conforme a implementação).

De qualquer forma, se quer uma ordenação específica, sugiro informar o locale. Por exemplo, se quer que a ordenação siga as regras da língua portuguesa do Brasil (já que também existem as regras de Portugal, entre outros), pode usar 'pt-BR'. Lembrando que há diferenças no caso de ter letras maiúsculas, por exemplo:

let locale = 'pt-BR';
let words = ['Ás', 'ás', 'Ás', 'joão', 'João'];
words.sort((a, b) => b.localeCompare(a, locale));
// maiúsculas antes 
console.log(words); // [ 'João', 'joão', 'Ás', 'Ás', 'ás' ]

words = ['Ás', 'ás', 'Ás', 'joão', 'João'];
words.sort((a, b) => b.localeCompare(a, locale, { sensitivity: 'base' }));
// minúsculas e maiúsculas são iguais, mantém a ordem em que estão no array
console.log(words); // [ 'joão', 'João', 'Ás', 'ás', 'Ás' ]

A regra padrão do locale pt-BR é colocar as maiúsculas depois (mas como está ordenando em ordem decrescente, "João" ficou antes de "joão"). Já se usarmos sensitivity: 'base', o "J" e "j" passam a ser considerados a mesma letra, e como a ordenação é estável a partir do ES2019, eles ficam na mesma ordem em que estavam no array original. Ou seja, não precisa usar toUpperCase.

Aliás, como curiosidade, este é um caso em que usar reverse daria um resultado diferente:

let locale = 'pt-BR';

let words = ['Ás', 'ás', 'Ás', 'joão', 'João'];
words.sort((a, b) => b.localeCompare(a, locale, { sensitivity: 'base' }));
// minúsculas e maiúsculas são iguais, mantém a ordem em que estão no array
console.log(words); // [ 'joão', 'João', 'Ás', 'ás', 'Ás' ]

words = ['Ás', 'ás', 'Ás', 'joão', 'João'];
// ordenando em ordem crescente
words.sort((a, b) => a.localeCompare(b, locale, { sensitivity: 'base' }));
console.log(words); // [ 'Ás', 'ás', 'Ás', 'joão', 'João' ]
words.reverse(); // invertendo
console.log(words); // [ 'João', 'joão', 'Ás', 'ás', 'Ás' ]

Veja que b.localeCompare(a, locale, { sensitivity: 'base' }) faz com que "joão" fique antes de "João" (pois o "j" e "J" são considerados iguais, e como a ordenação é estável, eles mantém a ordem em que estavam no array).

Agora, se trocarmos a e b no localeCompare (ou seja, ordem crescente), ocorre a mesma coisa ("joão" fica antes de "João", já que sensitivity: 'base' faz a comparação case insentivive). E depois, ao inverter o array, "João" passa a ficar antes de "joão".

Se não fizer diferença (e eu entendo que não faz, afinal, se a ordenação é case insensitive, tanto faz "João" estar antes ou depois de "joão"), ainda sim eu usaria a primeira opção, já que reverse acaba percorrendo o array mais uma vez, de forma desnecessária - para que fazer isso, se o localeCompare já retorna na ordem que precisa?


Comportamento similar pode ser visto com caracteres acentuados:

let locale = 'pt-BR';
let words = ['as', 'ás', 'as', 'ás'];
words.sort((a, b) => b.localeCompare(a, locale));
// maiúsculas antes 
console.log(words); // [ 'ás', 'ás', 'as', 'as' ]

words =  ['as', 'ás', 'as', 'ás'];
words.sort((a, b) => b.localeCompare(a, locale, { sensitivity: 'base' }));
console.log(words); // [ 'as', 'ás', 'as', 'ás' ]

O locale pt-BR coloca as letras acentuadas depois das não-acentuadas (mas como é ordem decrescente, então os acentos vieram primeiro). Por isso no primeiro caso todas as ocorrências de "ás" vieram antes de "as".

Mas a opção sensitivity: 'base' faz com que não haja esta diferenciação (ou seja, a e á são consideradas a mesma letra), portanto elas mantém a ordem em que estavam no array original (desde que o seu browser já esteja de acordo com o ES2019, que garante que a ordenação é estável).

Você também poderia usar caseFirst: 'lower' para colocar as minúsculas primeiro, mudar o sensitivity de acordo com a tabela já informada acima, etc, enfim, localeCompare já te dá inúmeras opções para ordenar da forma desejada.


Resumindo...

Para a ordem em si, basta trocar o a e b de lugar (a.localeCompare(b) para ordem crescente, b.localeCompare(a) para decrescente), sem a necessidade de ficar invertendo o array. Quanto às demais regras (acentos, maiúsculas/minúsculas, etc), basta usar as opções de localeCompare (veja a documentação para mais detalhes).


Por fim, você também pode usar um Intl.Collator, que funciona de maneira similar à localeCompare (inclusive, aceita as mesmas opções):

let ordem = new Intl.Collator('pt-BR', { sensitivity: 'base' });

let words = ['pé', 'pato', 'ás', 'abelha', 'as'];
words.sort((a, b) => ordem.compare(b, a));
console.log(words);

A ideia é basicamente a mesma: ordem.compare(a, b) para ordem crescente, e ordem.compare(b, a) para decrescente. E para as regras de ordenação de maiúsculas/minúsculas, acentos, etc, use as opções já mencionadas.

A diferença é que, segundo a documentação, Intl.Collator tem desempenho melhor que localeCompare quando a quantidade de comparações a serem feitas for muito grande (por exemplo, se for ordenar um array com muitas strings). Mas o funcionamento das regras de ordenação são os mesmos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .