js react 中文+英文混合排序

最新推荐文章于 2023-08-01 09:51:23 发布

Asurejiang

最新推荐文章于 2023-08-01 09:51:23 发布

阅读量543

点赞数 1

分类专栏：笔记总结文章标签： js

本文链接：https://blog.csdn.net/Asurejiang/article/details/119454588

版权

笔记同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

总结

3 篇文章 0 订阅

订阅专栏

该博客介绍了如何处理英文字母和汉字混合的属性排序问题。首先使用npmipinyin-S插件将中文转换为拼音，然后根据首字母创建新的fontKey字段。对于汉字，取拼音首字母；对于非汉字，直接取首字母。最后利用localeCompare方法对数据进行排序，实现首字母升序或降序排列。

摘要由CSDN通过智能技术生成

背景是需要对一个英文字母和汉字混合的某属性进行首字母排序

npm i pinyin -S
// 下载将中文转成拼音的插件

首先将数组进行渲染

const sortData =  map(arr, item => {
      if (item?.name[0].charCodeAt(0) > 255) { //判断如果是汉字
        const firstText = item?.name.slice(0, 1); // 将name的子一个字裁下来
        const firstWord = pinyin(firstText)[0][0].slice(0, 1);//转成拼音后的首字母裁下来
        return {
          ...item,
          fontKey: firstWord, //存储为新增字段fontKey
        };
      }
      return {
        ...item,
        fontKey: item?.name[0], //如果不是汉字 直接裁第一个字母下来
      };
    });

然后根据fontKey进行排序

const result = sortData ?.sort((after: any, before: any) => {
     return after?.fontKey.localeCompare(before?.fontKey);
});

// 此时的result 就是排序后的节后

// 倒叙 就更改为 before?.fontKey.localeCompare(after?.fontKey) 即可