Třídění řetězců se znaky s diakritikou

Řetězce mohou způsobit celou řadu problémů v jakémkoli programovacím jazyce. Ať už se jedná o jednoduchý řetězec, řetězec obsahující emotikony, html entity a dokonce i znaky s diakritikou, pokud nečistíme data nebo neděláme správná rozhodnutí týkající se manipulace s řetězci, můžeme být ve světě bolesti.

Při procházení repo JSTips Joela Lovery jsem zahlédl případ řetězce, na který jsem ještě nenarazil (...pravděpodobně ano, ale nevšiml jsem si toho): třídění znaků s diakritikou, abych dosáhl požadovaného výsledku. Pravdou je, že se znaky s diakritikou se zachází trochu jinak, než byste si při řazení mysleli:

// Spanish
['único','árbol', 'cosas', 'fútbol'].sort();
// ["cosas", "fútbol", "árbol", "único"] // bad order

// German
['Woche', 'wöchentlich', 'wäre', 'Wann'].sort();
// ["Wann", "Woche", "wäre", "wöchentlich"] // bad order

Fuj – postavy s diakritikou prostě nenásledují své protějšky postav bez přízvuku. Provedením dalšího kroku, např. localeCompare , můžeme zajistit, že naše řetězce jsou seřazeny tak, jak jsme pravděpodobně chtěli:

['único','árbol', 'cosas', 'fútbol'].sort(function (a, b) {
  return a.localeCompare(b);
});
// ["árbol", "cosas", "fútbol", "único"]

['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(function (a, b) {
  return a.localeCompare(b);
});
// ["Wann", "wäre", "Woche", "wöchentlich"]

// Or even use Intl.Collator!
['único','árbol', 'cosas', 'fútbol'].sort(Intl.Collator().compare);
// ["árbol", "cosas", "fútbol", "único"]

['Woche', 'wöchentlich', 'wäre', 'Wann'].sort(Intl.Collator().compare);
// ["Wann", "wäre", "Woche", "wöchentlich"]

Lokalizace je již nyní velkou výzvou bez dalšího zmatku, který s sebou přináší znaky s diakritikou. Ponechte localeCompare a Intl.Collator mějte na paměti pokaždé, když chcete seřadit řetězce!