14

Estava lendo uma resposta aqui no site e me deparei com o método String.prototype.normalize no segundo exemplo de código passado.

Já havia me deparado com esse método em outra situação, mas sinceramente nunca consegui entender o seu funcionamento, uma vez que a documentação me pareceu bem difícil de ser entendida.

Então, a pergunta é: qual é a sua necessidade e como deve ser usado? E também como os diferentes argumentos que podem ser passados (NFC, NFD, NFKC, NKFD) variam a saída?

0

1 Resposta 1

26

As formas de normalização NFC, NFD, NFKC e NFKD são definidas pelo Unicode.

De maneira bem resumida, alguns caracteres possuem mais de uma forma de serem representados. Por exemplo, o á (letra a com acento agudo), segundo o Unicode, pode ser representada de duas maneiras:

  1. composta - como o code point U+00E1 (LATIN SMALL LETTER A WITH ACUTE) (á)
  2. decomposta - como uma combinação de dois code points (nesta ordem):

A primeira forma é chamada NFC (Canonical Composition), e a segunda, NFD (Canonical Decomposition). As duas formas acima são consideradas "canonicamente equivalentes", quando se trata de representar a letra a com acento agudo. Ou seja, são duas formas de se representar a mesma coisa.

O acento agudo (U+0301), neste caso, é um dos chamados combining diacritical marks (ou combining characters): caracteres que podem ser combinados com outros (como os acentos do português, por exemplo). Eles sempre aparecem depois do caractere ao qual se aplicam (no exemplo acima, ele aparece depois do a), e caso haja mais de um, a normalização sempre os retorna em uma ordem predefinida (existem regras que definem a ordem relativa entre eles).

O detalhe é que, somente ao olhar um texto (dependendo da fonte usada e dos caracteres envolvidos), não há como saber se eles estão em NFD ou NFC, já que ambos resultam no mesmo símbolo (no caso, o "á"). Vale lembrar também que nem todos os caracteres acentuados existentes no mundo possuem uma forma composta, e a única forma de serem representados é em NFD (com uma letra "base" seguida de um ou mais combining characters).


Existem ainda as formas NFKD (Compatibility Decomposition) e NFKC (Compatibility Composition), que se baseiam no conceito de que há caracteres que são "compatíveis", porém não canonicamente equivalentes.

Um exemplo são os Letter Like Symbols, que são caracteres que se parecem com letras, mas não são exatamente as letras em si. Por exemplo, o DOUBLE-STRUCK CAPITAL H: ℍ.

Segue uma imagem caso o seu browser não renderize o caractere corretamente:

inserir a descrição da imagem aqui

O codepoint deste caractere é U+210D, e ao normalizá-lo para NFKD ou NFKC, ele se torna a letra "H" maiúscula (codepoint U+0048):

let str = String.fromCodePoint(0x210d);

// imprime a string e os respectivos code points

console.log(str); // ℍ
console.log(str.codePointAt(0).toString(16)); // 210d

console.log(str.normalize('NFKC')); // H
console.log(str.normalize('NFKC').codePointAt(0).toString(16)); // 48

console.log(str.normalize('NFKD')); // H
console.log(str.normalize('NFKD').codePointAt(0).toString(16)); // 48

Neste caso, não é possível reverter o "H" de volta para "ℍ", já que existem vários outros caracteres que se tornam "H" nas formas NFKD e NFKC.

Neste caso ambas as formas resultaram no mesmo caractere "H". Mas caso o caractere resultante tenha diacritical marks, a forma NFKC retornaria o caractere na sua forma composta (com o acento, caso exista um code point correspondente, da mesma forma que é feito com NFC), enquanto a forma NFKD retornaria o caractere decomposto (separado do combining character, da mesma forma que é feito com o NFD). Exemplo:

// transformar string em array de codepoints
function codepoints(s) { return Array.from(s).map(c => c.codePointAt(0).toString(16)); }

// ANGSTROM SIGN - https://www.fileformat.info/info/unicode/char/212b/index.htm
let str = String.fromCodePoint(0x212b);
console.log(str); // Å
console.log(codepoints(str)); // [ 212b ]

console.log(str.normalize('NFKC')); // Å
console.log(codepoints(str.normalize('NFKC'))); // [ c5 ]

console.log(str.normalize('NFKD')); // Å
console.log(codepoints(str.normalize('NFKD'))); // [ 41, 30a ] 

No exemplo acima, eu usei o caractere ANGSTOM SIGN (codepoint U+212B), que é basicamente a letra "A" com uma "bolinha" em cima: Å.

inserir a descrição da imagem aqui

Mas este caractere possui compatibilidade com a "letra A com a bolinha", que por sua vez possui as duas formas:

Dependendo da fonte, todas as 3 opções (o caractere ANGSTROM SIGN, a letra A com "bolinha" em NFC e em NFD) podem ser mostradas da mesma maneira (algumas fontes podem ter um símbolo ligeiramente diferente para o Angstrom, por exemplo, mas esse comportamento varia bastante).

Resumindo grosseiramente, as formas NFC e NFD não mudam a, digamos, "essência" dos caracteres envolvidos (já que eles são "canonicamente equivalentes"). Já as formas NFKC e NFKD mudam essa "essência", já que elas resultam em outros caracteres diferentes, e de maneira unidirecional (já que a equivalência é um para muitos - vários outros caracteres letter like podem se tornar um "A" ao serem normalizados para NFKC ou NFKD).

Além disso, as formas NFKC e NFKD podem mudar o significado de um texto. Ex:

let str = '3' + String.fromCodePoint(0xb2);
console.log(str);
console.log(str.normalize('NFKC'));

Eu usei o dígito 3 seguido do SUPERSCRIPT TWO (U+00B2), então a string corresponde a "3²" (três ao quadrado). Mas o caractere ² na forma NFKC se torna o dígito 2, então a string normalizada se torna "32", que representa algo bem diferente da string original.


Um dos usos da normalização NFD é para remover os acentos (na verdade, quaisquer combining characters) de uma string, como foi feito na resposta que você linkou e nesta outra também.

A forma NFC poderia ajudar na hora de inverter strings, como eu explico nesta resposta. Se a string estiver em NFD e eu simplesmente inverter a ordem dos codepoints, o combining character ficará antes do caractere no qual ele estava aplicado, e passará a ser aplicado em outro caractere.

Outro uso seria para colocar strings em ordem alfabética, ou fazer buscas (normalizando todos os termos para a mesma forma, você evita variações dos mesmos caracteres, facilitando os respectivos algoritmos).

As formas NFKC e NFKD são usadas - entre outras coisas - para normalizar ligaturas, como por exemplo o caractere LATIN SMALL LIGATURE FF (U+FB00): ff.

inserir a descrição da imagem aqui

Parece duas letras "f" juntas, mas é um único caractere. Quando normalizado para NFKC ou NFKD, ele se torna dois caracteres "f" (U+0066 - LATIN SMALL LETTER F):

let str = String.fromCodePoint(0xfb00);
console.log(str); // ff
console.log(str.normalize('NFKC')); // ff

O e as duas letras "f" não são considerados canonicamente equivalentes, e sim "compatíveis". Neste caso, assume-se que eles podem ter aparências diferentes (o que não acontece com o a acentuado, que tem a mesma aparência tanto em NFC quanto em NFD), embora possam ter o mesmo significado, dependendo do contexto (nesse caso, a normalização também serviria para facilitar algoritmos de ordenação ou buscas - imagine que o texto possui mas algum usuário busca por ff porque não sabe como digitar no seu teclado).

Muitos caracteres similares ao foram adicionados ao Unicode por motivos de compatibilidade com antigos character sets, que já possuíam tais caracteres. Com isso, também foram criados os mapeamentos entre eles e suas respectivas formas NFKC e NFKD.


Além disso, as diferentes formas podem afetar o comportamento do seu programa, dependendo de como você trabalha com as strings:

let s1 = 'sabiá';
let s2 = 'sabiá';

// uma está em NFC, outra em NFD, portanto são diferentes
console.log(s1 == s2); // false

// normalizando, ambas passam a ser iguais
console.log(s1.normalize('NFC') === s2.normalize('NFC')); // true

// transformar string em array de codepoints
function codepoints(s) { return Array.from(s).map(c => c.codePointAt(0).toString(16)); }

// imprimindo os codepoints é possível ver a diferença
console.log(codepoints(s1)); // [ "73", "61", "62", "69", "e1" ]
console.log(codepoints(s2)); // [ "73", "61", "62", "69", "61", "301" ]

No exemplo acima, temos a mesma string em NFC e em NFD. Não dá para notar a diferença somente olhando as strings, já que ambas são renderizadas da mesma forma. Repare que a comparação com == deu false, e somente normalizando-as para a mesma forma elas passam a ser iguais.

Esse problema poderia ocorrer se o usuário digitasse uma string (que ele pode ter copiado e colado de outro lugar, e nesse lugar ela estava em NFD, e obviamente o usuário nem percebeu, já que visualmente não há diferença) e você a comparasse com outra string no seu código (que está em uma forma diferente do que foi digitado) - ou seja, se s1 for o que o usuário digitou e s2 é uma string hardcoded no seu código, caso elas estejam em formas diferentes (uma em NFC e outra em NFD), a comparação poderia não funcionar.

Mesmo se você fizesse console.log(s1), não conseguiria perceber o problema, já que ela seria mostrada como "sabiá", independente de estar em NFC ou NFD.


Outro caso em que pode dar diferença é com expressões regulares. Por exemplo, se eu quero verificar strings com exatamente 5 caracteres:

let s = 'sabiá';
let r = /^.{5}$/; // contém exatamente 5 caracteres

console.log(r.test(s.normalize('NFC'))); // true
console.log(r.test(s.normalize('NFD'))); // false

Em regex, sempre é dito que o ponto corresponde a qualquer caractere (exceto quebras de linha), mas na verdade, ele corresponde a um code point. E como a string em NFD possui 6 code points (já que o "á" é decomposto em dois code points), a regex não dá match nesse caso (veja).

Para estes casos, algumas linguagens/engines suportam o atalho \X, que corresponde a um grapheme cluster (ou seja, o a com acento é considerado uma "única coisa", independente de estar em NFC ou NFD, e sempre dá match com \X - veja a diferença - mas infelizmente o JavaScript não suporta este atalho, então nesse caso a solução seria normalizar mesmo, ou então usar Unicode Property Escapes: /\P{M}\p{M}*/u). Nesta pergunta tem mais informações sobre o que é um grapheme cluster.

Vale lembrar que os problemas com regex não se restringem ao ponto. Por exemplo, se eu tiver a regex [áéíóú] para buscar letras acentuadas, e na regex eles estão em NFC, mas a string sendo verificada está em NFD, não será encontrado um match - como aliás, aconteceu nesta pergunta.

Você pode ler mais sobre esses problemas entre JavaScript x Unicode neste artigo.


Para saber mais sobre Unicode e outros termos relacionados, veja:

Por fim, vale lembrar que as regras de normalização são definidas pelo Unicode, e não são exclusivas do JavaScript. Muitas outras linguagens implementam a normalização, como por exemplo Python, Java, C#, Ruby, etc.

2
  • 1
    @LuizFelipe Atualizei a resposta com mais algumas coisas..
    – hkotsubo
    30/08/2019 às 11:54
  • 1
    Aprendi muita coisa. 17/12/2020 às 12:58

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 .