说到国际化中的排序问题,大部分人都会选择利用后台数据库collation 进行orderby,随后再将排列好的data set一并返回给前端展示。在这个过程中,前端除了渲染外没有任何的工作量,这种模式其实未尝不可。但在前端已经愈发强大的今日,浏览器其实已经可以处理越来越复杂的事物,甚至可以替代操作系统与硬件进行交互,所以业内的新风向也从之前的thinclient快马扬鞭的朝着所谓native app的设计疾驰而去,其背后的目的都是期望前端承担更多计算任务,减轻server端的request压力。
利用数据库解决该问题不是我期望的,本文即将用纯前端技术来尝试对其进行解决,示意代码如下。
<scripttype="text/javascript">
var mc = ['Silva', 'Özil', 'Agüero','Touré', 'İlkay Gündoğan', 'Sané', 'Owen', 'Alexis Sánchez', 'Iheanacho'];
var collator = newIntl.Collator('de-u-co-phonebk');
mc.sort(collator.compare);
document.write(mc.join(', '));
</script>
运行结果如下:
Agüero, AlexisSánchez, Iheanacho, İlkay Gündoğan, Özil, Owen, Sané, Silva, Touré
稍稍修改collator的赋值,再次尝试。
var collator =new Intl.Collator('fr', { usage: 'search', sensitivity: 'base' });
对比后不难发现Owen跟Özil的位置已经发生了变化。
Agüero,Alexis Sánchez, Iheanacho, İlkay Gündoğan, Owen, Özil, Sané, Silva, Touré
原来如此,既然JS提供了现成的collator,我们正好拿来用嘛!眼下笔者就遭遇一个蛮有意思的“国际化”排序问题,如下图。
方法都知道了,那就开整呗,对代码如法炮制,go~~~呃……让大家失望了,结果显示没任何变化啊,问题何在呢?放空一下,不禁自问,数字的排序应该如何进行?不就是按照大小么?那么创建一个两两作差的比较器问题不就应该迎刃而解了么?赶紧试试。
<scripttype="text/javascript">
function sortNumber(a, b) {
return a - b;
}
var arr = [1.14, 102.40, 124.00, 144.00,5.11];
document.write(arr.sort(sortNumber));
</script>
果不其然!期望结果应声而出——1.14, 5.11, 102.4, 124, 144。看着这段fix代码,新问题又来了?这真的是一个国际化问题么?在该问题上,我是否被固有的思维定式和“砖家”观点带入了深沟呢?ヾ(≧▽≦*)o