Basicamente, o que localeCompare
e Intl.Collator
oferecem é uma maneira de comparar strings levando-se em conta regras específicas diferentes da "comparação padrão". Costuma-se dizer que ambos servem para considerar a ordem alfabética de acordo com um idioma específico, mas na verdade eles vão um pouco além.
A "comparação padrão" de strings é feita com os operadores >
e <
, e é descrita em detalhes aqui. Mas basicamente, ela segue a ordem dos Unicode code points de cada caractere (para saber o que é um code point, leia aqui).
Só que esta ordem "padrão" não é suficiente para todos os casos de uso. Muitos idiomas, mesmo usando os mesmos caracteres, possuem regras diferentes para ordená-los. Por exemplo, na Alemanha a ordem alfabética coloca o caractere ä
antes do z
, mas na Suécia é o contrário.
console.log('ä'.localeCompare('z', 'de')); // -1 (ou algum outro valor negativo)
console.log('ä'.localeCompare('z', 'sv')); // 1 (ou algum outro valor positivo)
Repare no segundo parâmetro, ele indica o locale a ser usado. Muitos resumem o locale como sendo apenas um "idioma", mas ele na verdade é um conjunto de parâmetros que pode definir o idioma, região, variante/dialetos, regras para ordenação alfabética, além do formato de datas, números, valores monetários, etc. Tudo isso é condensado em um identificador. No exemplo acima, usei os identificadores de
e sv
, que indicam respectivamente os idiomas Alemão e Sueco (esses códigos são definidos pela ISO 639). Mais abaixo veremos outras opções mais complexas de identificadores.
O retorno no primeiro caso foi -1
, e no segundo foi 1
(testei no Chrome, mas em outros browsers pode retornar outros valores). Quando o retorno é um número negativo, indica que o caractere ä
é "menor" que o z
(ou seja, em uma ordenação, o ä
ficaria antes do z
). Quando o retorno é positivo, indica que é "maior" (em uma ordenação, o ä
ficaria depois do z
), e quando é zero, significa que são "iguais" (ou seja, em uma ordenação, seriam considerados equivalentes).
É importante notar que a especificação da linguagem só diz que o valor retornado deve ser positivo, negativo ou zero (ou seja, não é garantido que sempre seja -1
ou 1
).
Exemplo de uso para ordenar um array de strings:
let words = ['teste', 'äbc', 'zebra'];
// ordenar as palavras de acordo com as regras do idioma Alemão
console.log(words.sort((a, b) => a.localeCompare(b, 'de'))); // [ "äbc", "teste", "zebra" ]
// ordenar as palavras de acordo com as regras do idioma Sueco
console.log(words.sort((a, b) => a.localeCompare(b, 'sv'))); // [ "teste", "zebra", "äbc" ]
// usando Collator
let alemao = new Intl.Collator('de');
console.log(words.sort(alemao.compare)); // [ "äbc", "teste", "zebra" ]
let sueco = new Intl.Collator('sv');
console.log(words.sort(sueco.compare)); // [ "teste", "zebra", "äbc" ]
Repare no exemplo acima que usar o método compare
de um Intl.Collator
tem o mesmo efeito de usar localeCompare
. Mas segundo a documentação, usar um Collator
tem desempenho melhor quando você precisa fazer várias comparações de uma vez (como por exemplo, quando quero ordenar um array de strings). Tirando esse detalhe, basicamente "tudo" o que eu disser sobre localeCompare
também vale para Intl.Collator
.
Lembrando que as regras de ordenação não se limitam a uma comparação "letra a letra". Em Eslovaco, por exemplo, o dígrafo "ch" é colocado depois do "h" na ordem alfabética:
let words = ['chave', 'casa', 'hoje'];
// em eslovaco, o "ch" fica depois do "h"
console.log(words.sort((a, b) => a.localeCompare(b, 'sk-SK'))); // ["casa", "hoje", "chave"]
// em português, ordem "normal"
console.log(words.sort((a, b) => a.localeCompare(b, 'pt-BR'))); // ["casa", "chave", "hoje"]
Obs: não usei palavras em eslovaco :-)
Repare também que agora os identificadores possuem o country code (código que identifica um país, definido pela ISO 3166). No caso, temos sk-SK
(sk
é o código do idioma eslovaco e SK
é o código da Eslováquia) e pt-BR
(pt
é o código do idioma português, e BR
é o código do Brasil). Isso serve para deixar o locale mais específico, já que podem existir variações, como por exemplo o pt-PT
(português de Portugal).
Nem sempre isso influencia no comportamento de localeCompare
(pt-BR
e pt-PT
possuem as mesmas regras de ordenação alfabética), mas há outros aspectos para os quais uma variante pode fazer diferença. Por exemplo, en-US
(inglês americano) e en-GB
(inglês britânico), embora possuam regras de ordenação alfabética iguais, possuem formatos de data diferentes (respectivamente, mês/dia/ano e dia/mês/ano). Ou seja, para localeCompare
não faria diferença.
Além do locale, é possível passar uma série de opções que sobrescrevem o comportamento deste. Por exemplo:
let words = ['a', 'Casa', 'casa', 'sábia', 'sabia', 'sabiá'];
// padrão do locale: maiúsculas depois de minúsculas, acentos depois de letras não acentuadas
console.log(words.sort((a, b) => a.localeCompare(b, 'pt-BR'))); // ["a", "casa", "Casa", "sabia", "sabiá", "sábia"]
words = ['a', 'Casa', 'casa', 'sábia', 'sabia', 'sabiá'];
// colocando maiúsculas antes de minúsculas (demais regras se mantém)
console.log(words.sort((a, b) => a.localeCompare(b, 'pt-BR', {caseFirst: 'upper'}))); // ["a", "Casa", "casa", "sabia", "sabiá", "sábia"]
words = ['a', 'Casa', 'casa', 'sábia', 'sabia', 'sabiá'];
// acentos não fazem diferença (regra da "maiúscula depois" se mantém)
console.log(words.sort((a, b) => a.localeCompare(b, 'pt-BR', {sensitivity: 'case'}))); // ["a", "casa", "Casa", "sábia", "sabia", "sabiá"]
Eu reinicializei o array antes de cada chamada porque sort
modifica o próprio array, e eu queria mostrar no terceiro caso que "sábia", "sabia" e "sabiá" se mantém na mesma ordem (desde que você teste em um browser no qual a ordenação é estável - eu testei no Chrome 81, mas a partir do 70 ele já implementa a ordenação estável, exigida pela especificação ES2019).
Enfim, veja que se eu usar somente as regras do locale pt-BR
, ele considera que as letras maiúsculas devem ficar depois das minúsculas (por isso "casa" fica antes de "Casa"), e as letras acentuadas ficam depois das não acentuadas.
Mas usando as opções eu posso sobrescrever esse comportamento. Por exemplo, usando caseFirst: 'upper'
, eu digo que as letras maiúsculas devem vir antes. Mas a outra regra do locale (das letras acentuadas) se mantém.
No terceiro exemplo, sensitivity: 'case'
considera que letras com ou sem acento são iguais (na verdade ele considera a regra de "base letters", que a outra resposta já exemplificou). Assim, a regra de "maiúsculas depois" se manteve, e as demais palavras ("sábia", "sabia" e "sabiá") não mudaram de posição porque elas foram consideradas "iguais" (lembrando que fiz o teste no Chrome, que já implementa a ordenação estável - em outros browsers pode ser que a ordem mude).
Ainda é possível usar algumas extensões Unicode no identificador do locale. Isso é indicado pelo sufixo "-u", seguido das opções (a lista completa pode ser encontrada aqui, e um XML mais detalhado, aqui).
Uma delas é o kf
, que é o "Collation parameter key for ordering by case". Ou seja, ele tem a mesma funcionalidade da opção caseFirst
:
let words = ['a', 'Casa', 'casa', 'sábia', 'sabia', 'sabiá'];
// colocando maiúsculas antes de minúsculas (demais regras se mantém)
console.log(words.sort((a, b) => a.localeCompare(b, 'pt-BR-u-kf-upper'))); // ["a", "Casa", "casa", "sabia", "sabiá", "sábia"]
words = ['a', 'Casa', 'casa', 'sábia', 'sabia', 'sabiá'];
// options sobrescreve Unicode extension (ou seja, aqui vai ser "minúsculas primeiro")
console.log(words.sort((a, b) => a.localeCompare(b, 'pt-BR-u-kf-upper', {caseFirst: 'lower'}))); // ["a", "casa", "Casa", "sabia", "sabiá", "sábia"]
A sintaxe pode parecer confusa, mas é assim:
pt-BR
: código do locale (com idioma e país)
- sufixo "-u" para indicar que depois tem as extensões Unicode
- "kf" é a extensão em si, e depois dela tem o valor (no XML já citado tem os valores de cada uma das extensões, apesar de nem todas serem suportadas pelo JavaScript).
No caso, o valor de "kf" é "upper", daí o código completo do locale fica pt-BR-u-kf-upper
. Repare que tem o mesmo efeito de usar a opção caseFirst: 'upper'
. Porém, se eu colocar também a opção, esta tem precedência (comportamento descrito na documentação). Por isso no segundo caso, caseFirst: 'lower'
sobrescreveu o kf-upper
e foi aplicada a regra de "minúsculas primeiro".
Quanto ao kn
("Collation parameter key for numeric handling"), ele é equivalente à opção numeric
, que indica se devemos comparar strings contendo dígitos considerando seu valor numérico ou não. Pois o default é considerar que a string '10'
é menor que '2'
, pois os dígitos 1 e 2 na verdade são caracteres e na comparação lexicográfica, o '10'
vem antes do '2'
. Mas se considerarmos o valor numérico, então o 2 deve vir antes do 10. Ex:
let words = ['abc', 'abc 10', 'abc 2', 'Casa', 'casa'];
// default é considerar a comparação lexicográfica
console.log(words.sort((a, b) => a.localeCompare(b, 'pt-BR'))); // [ "abc", "abc 10", "abc 2", "casa", "Casa" ]
// extensão "kn" com o valor "true", leva em conta o valor numérico (demais regras - como a "maiúsculas depois" - se mantém)
console.log(words.sort((a, b) => a.localeCompare(b, 'pt-BR-u-kn-true'))); // [ "abc", "abc 2", "abc 10", "casa", "Casa" ]
// opção "numeric" com valor "true", equivalente a "kn-true" (demais regras - como a "maiúsculas depois" - se mantém)
console.log(words.sort((a, b) => a.localeCompare(b, 'pt-BR', {numeric: true}))); // [ "abc", "abc 2", "abc 10", "casa", "Casa" ]
E claro, é possível combinar mais de uma extensão no mesmo identificador (que é equivalente a usar as respectivas opções):
let words = ['abc', 'abc 10', 'abc 2', 'Casa', 'casa'];
// considerar valor numérico e maiúsculas primeiro
console.log(words.sort((a, b) => a.localeCompare(b, 'pt-BR-u-kn-true-kf-upper'))); // [ "abc", "abc 2", "abc 10", "Casa", "casa" ]
words = ['abc', 'abc 10', 'abc 2', 'Casa', 'casa'];
// a mesma coisa, usando options
console.log(words.sort((a, b) => a.localeCompare(b, 'pt-BR', {caseFirst: 'upper', numeric: true}))); // [ "abc", "abc 2", "abc 10", "Casa", "casa" ]
Há alguns exemplos que não consegui reproduzir nem encontrar um caso que faça diferença, mas deixo citado aqui.
A extensão "co" (Collation type key, citada aqui) possui vários valores (como "big5han", "dict", "direct", "ducet", etc), que afetam o comportamento de um ou mais locales. Por exemplo, aqui são descritos alguns casos:
- o valor "search" (que no JavaScript, não sei porque, foi colocado na opção
usage
) faz com que o Collator
entre em um modo dedicado à busca de strings. O exemplo citado é o idioma Tcheco, no qual uma busca por "a" nunca deveria encontrar um "á", mas em termos de ordenação não faz diferença (não consegui criar um código JavaScript em que isso fizesse diferença)
- o valor "pinyin" ordena os caracteres chineses baseados na sua transliteração para caracteres latinos. Como não sei chinês, também não consegui um exemplo bom (e nem precisa falar que só afeta locales chineses)
- há muitos outros valores, para os quais meus patéticos conhecimentos de outros idiomas não foram suficientes para encontrar exemplos. Não parece haver muita documentação detalhada sobre essas opções ou eu que fui incompetente de não encontrar
A opção localeMatcher
pode ser lookup ou best fit. O lookup segue o algoritmo descrito na BCP 47, que basicamente tenta encontrar o locale que foi informado, e caso não esteja disponível no sistema, vai tentando encontrar um mais "genérico", até achar algum disponível.
Por exemplo, se eu buscar pelo locale zh-Hans-CN
(idioma chinês (zh), com caracteres simplificados (Hans), código do país CN - China), mas usando o identificador zh-Hans-CN-u-alguma-coisa
(assumindo que "alguma coisa" é uma extensão válida). Caso a extensão não esteja disponível ou não seja suportada, ele tenta buscar por zh-Hans-CN
. Caso esta variante não esteja disponvível, tenta buscar zh-Hans
, e se não estiver disponível, busca-se por zh
(e se ainda sim não estiver disponível, usa-se o locale default do sistema/browser).
Já o best fit pode buscar uma variante mais adequada. O único exemplo concreto que encontrei foi neste artigo, que descreve o caso de es-GT
(espanhol falado na Guatemala). Se ele não estivesse disponível e eu usasse o lookup, seria retornado apenas es
(espanhol). Mas o best fit poderia retornar es-MX
(espanhol falado no México). Eu fiz esse teste, mas comigo não funcionou e foi retornado o locale es
:
let s = 'es-GT';
console.log(Intl.Collator(s, {localeMatcher: 'best fit'}).resolvedOptions().locale); // es
console.log(Intl.Collator(s, {localeMatcher: 'lookup'}).resolvedOptions().locale); // es
As demais opções e parâmetros já foram detalhados na outra resposta e não convém repetir tudo de novo.
Por fim, vale lembrar que se não for informado nenhum locale (por exemplo, string.localeCompare(outraString)
), é usado o locale default que estiver configurado no sistema/browser/ambiente (o que, por sua vez, varia conforme a implementação).