sort()和localeCompare()实现按照中文排序

1,223 阅读1分钟

背景:最近写需求的时候,产品提出这样一个需求,

image.png

就是在表格中加上一个对名称按照中文排序。 方案:由于是在表格中,所以很容易在antd官网的Table组件中发现sorter这样一个属性,看起来跟sort方法有点像,查看说明文档后发现用法差不多。

image.png 我们只需要在columns中找到对应的列中加入即可:

image.png 类似于这种:

image.png 如此。我们就可以为表格的这一列加上排序功能了,但是问题来了,默认的排序的话是通过Unicode字符编码进行比较的,那么如何按照中文排序呢,如何定义这个排序规则呢? 通过查阅文档发现字符串有这样一个方法:localeCompare,用法大致如下: strig1.localeCompare(string2) 通过比较string1和string2的到一个大于0 小于0 或者是等于0 的数字,并且还支持地区限制等。 正如我们所需要的中文排序就可以这样写: strig1.localeCompare(string2,'zh-Hans-CN', { sensitivity: 'accent' })

通过结合sorter:(a,b)=>{ a.name.localeCompare(b.name, 'zh-Hans-CN', { sensitivity: 'accent' }), } 就可以实现了。