13

A única coisa que eu sei sobre esse método é que ele compara as strings para ver quem vem primeiro, depois ou se são iguais e subsequente tem um valor numérico representativo retornado como -1, 1, 0 (ou dependendo do navegador pode retornar outros valores como -2, 2).

Mas fica fácil de entender se eu estiver comparando, por exemplo, "a" e "c" para ver quem vem primeiro ou depois, mas e se eu comparar uma palavra com algumas letras o que ele vai comparar?

var test = 'JavaScript';

console.log(test.localeCompare('abc'));

Eu não entendo também quais argumentos, quantos argumentos que eu posso passar para o método localeCompare() e o que eles significam como, por exemplo:

console.log(test.localeCompare('a', 'de', { sensitivity: 'base' }));
console.log("2".localeCompare("10", undefined, {numeric: true}));
console.log("2".localeCompare("10", "en-u-kn-true"));

Eu já li as referências do MDN como localeCompare() e Collator(), mas para ser sincero eu não entendi nada do que eles mencionaram e nem os exemplos, alguém poderia explicar de uma forma fácil de entender como funciona esse método?

0

2 Respostas 2

8
+150

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).

0
8

Vamos à definição do método:

interface String {
    /**
     * Determines whether two strings are equivalent in the current or specified locale.
     * @param that String to compare to target string
     * @param locales A locale string or array of locale strings that contain one or more language or locale tags. If you include more than one locale string, list them in descending order of priority so that the first entry is the preferred locale. If you omit this parameter, the default locale of the JavaScript runtime is used. This parameter must conform to BCP 47 standards; see the Intl.Collator object for details.
     * @param options An object that contains one or more properties that specify comparison options. see the Intl.Collator object for details.
     */
    localeCompare(that: string, locales?: string | string[], options?: Intl.CollatorOptions): number;
}

Determina se duas strings são equivalentes no local atual ou especificado.

Como vemos, esse método leva em consideração o local (linguagem) - informado no segundo argumento como por meio das Language Tags - para especificar se uma determinada string vem antes, depois ou na mesma posição de outra em um critério de ordenação alfabético. Isso se deve ao fato de que cada língua possuir seu próprio alfabeto e estes, consequentemente, se apresentarem em suas próprias ordenações.

Nos é retornado um número, podendo ser:

  • Negativo: se a string a qual chama o método aparece antes da qual é comparada no critério de ordenação definido.
  • Positivo: se a string a qual chama o método aparece depois da qual é comparada no critério de ordenação definido.
  • Zero: se a string a qual chama o método é igual à comparada no critério de ordenação definido.

Agora, as opções do terceiro argumento:

interface CollatorOptions {
    usage?: string;
    localeMatcher?: string;
    numeric?: boolean;
    caseFirst?: string;
    sensitivity?: string;
    ignorePunctuation?: boolean;
}

Case First

Opções: "upper" ou "lower". Determina qual dessas "case" será ordenada primeiro. Quando não informado leva em consideração o critério adotado pela linguagem.

Exemplo

const items = ['Português', 'português'];

console.log(items.sort((a, b) => a.localeCompare(b, 'pt-BR', { caseFirst: 'lower' })))
console.log(items.sort((a, b) => a.localeCompare(b, 'pt-BR', { caseFirst: 'upper' })))

Ignore Punctuation

Determina se a pontuação deverá ser ou não considerada na ordenação. Geralmente (não tenho conhecimento para generalizar), os caracteres de pontuação são ordenados primeiro quando considerados.

Various conventions also exist for the handling of strings containing spaces, modified letters (such as those with diacritics), and non-letter characters such as marks of punctuation.

https://en.wikipedia.org/wiki/Alphabetical_order

Exemplo

const items = ['Ele disse', '"olá mundo!"'];

console.log(items.sort((a, b) => a.localeCompare(b, 'pt-BR', { ignorePunctuation: false })))
console.log(items.sort((a, b) => a.localeCompare(b, 'pt-BR', { ignorePunctuation: true })))

Numeric

Determina se a ordenação levará em conta critérios numéricos ou não. No exemplo abaixo, a string "30" vem antes da string "8" quando não é usando o critério numérico, já que a comparação é feita caractere a caractere como em uma palavra.

Exemplo

const numbers = ['8', '30'];

console.log(numbers.sort((a, b) => a.localeCompare(b, 'pt-BR', { numeric: false })))
console.log(numbers.sort((a, b) => a.localeCompare(b, 'pt-BR', { numeric: true })))

Locale Matcher

Determina qual algoritmo será usado no match das strings em diferentes linguagens. Os valores podem ser:

  • Lookup: Caso não encontre o match perfeito entre o texto uma devida Language Tag , recua procurando uma dessas tags que mais "caia bem" a algum trecho do texto.

  • Best Fit: Procura trazer, ao mínimo, os resultado do Lookup, podendo ser melhor. (Não achei uma boa referência para esse algoritmo)

Não encontrei um bom exemplo para essa opção. Aceito sugestões.

Sensitivity

Opções:

  • base - strings que não possuem as mesmas letras base não são consideradas iguais.
  • accent - strings que não têm as mesmas letras base ou acentos não são consideradas iguais.
  • case - strings que não possuem as mesmas letras base ou "case" não são consideradas iguais.
  • variant - strings que não possuem as mesmas letras base, acentos ou maiúsculas e minúsculas não são consideradas iguais (default).

Exemplo

/**
 * Em português "a" e "á" são as mesmas letras.
 * A única diferenã é a acentuação.
 * "a" é a letra base de "á"
 */
 
// Possuem a mesma letra base
console.log("base: ", 'á'.localeCompare('a', 'pt-BR', { sensitivity: 'base' }))

// Mas não os mesmos acentos
console.log("accent: ", 'á'.localeCompare('a', 'pt-BR', { sensitivity: 'accent' }))

console.log("base: ", 'A'.localeCompare('a', 'pt-BR', { sensitivity: 'base' }))

// Nesse, também não o mesmo "case"
console.log("case: ", 'A'.localeCompare('a', 'pt-BR', { sensitivity: 'case' }))

Usage

Opções: "sort" e "search". Define se a comparação será para fins de ordenação ou busca. Também não consegui encontrar bons exemplos para ilustrar a diferença.

Fontes:

3
  • Em relação ao localeMatcher os valores "best fit" e "lookup" não fazem exatamente a mesma coisa? o "lookup" procura uma tag de idioma mais adequada seguindo os padrão BCP 47 já o "best fit" é definido o idioma padrão também mais adequado, isso não seria a mesma coisa? Fontes: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Commented 13/04/2020 às 14:10
  • E que nem no exemplo da minha pergunta o que significa esse código: console.log("2".localeCompare("10", "en-u-kn-true")); ou quando é comparado palavras 'check'.localeCompare('against');. Commented 13/04/2020 às 14:21
  • No argumento Locales também possui outros valores que eu não entendi como co, kn, kf. Fontes: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Commented 13/04/2020 às 14:25

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 .