Angular自定义orderBy排序Pipe实现大小写不敏感排序问题咨询

我在Angular项目中创建了如下排序管道，运行结果见：

我需要对"Accos, David pt., DIILL"这类内容排序，当前存在大写字符导致排序结果异常的问题，相关代码如下：

排序管道代码 #

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'orderBy',
})
export class OrderByPipe implements PipeTransform {
  transform(array: any[], field: string): any[] {
    if (!array) return array;

    array = [...array];
    array.sort((a: any, b: any) => {
      if (a[field] < b[field]) {
        return -1;
      } else if (a[field] > b[field]) {
        return 1;
      } else {
        return 0;
      }
    });

    return array;
  }
}

模板调用代码 #

<ng-select
              [items]="accounts$ | async | orderBy: 'businessName'"
              [(ngModel)]="AccownerId"
              bindLabel="businessName"
              bindValue="id"
              [searchable]="false"
              id="Accowner"
            >
            </ng-select>

请问如何修改该管道以实现大小写不敏感的排序效果？

异常原因 #

JavaScript默认的字符串大小比较基于Unicode编码值计算，大写英文字母的编码范围小于小写字母，因此直接比较会出现所有大写开头的内容优先排在小写开头内容之前的问题，不符合自然排序逻辑。

修改方案 #

你只需要调整排序的比较逻辑即可，两种常用实现方式可按需选择：

方案1：统一转换大小写后比较（轻量场景适用） #

将待比较的两个字段值统一转为全小写（或全大写）后再做大小判断，同时增加空值兼容防止报错：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'orderBy',
})
export class OrderByPipe implements PipeTransform {
  transform(array: any[], field: string): any[] {
    if (!array) return array;

    array = [...array];
    array.sort((a: any, b: any) => {
      const valA = (a[field] ?? '').toLowerCase();
      const valB = (b[field] ?? '').toLowerCase();
      if (valA < valB) return -1;
      if (valA > valB) return 1;
      return 0;
    });

    return array;
  }
}

方案2：使用localeCompare方法（推荐，兼容多语言场景） #

使用JS内置的localeCompare方法，通过参数配置实现大小写不敏感排序，同时支持带重音字符、多语言等更复杂的排序需求，通用性更强：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'orderBy',
})
export class OrderByPipe implements PipeTransform {
  transform(array: any[], field: string): any[] {
    if (!array) return array;

    array = [...array];
    array.sort((a: any, b: any) => {
      const valA = a[field] ?? '';
      const valB = b[field] ?? '';
      // sensitivity设为base表示忽略大小写、重音差异，仅对比基础字符
      return valA.localeCompare(valB, undefined, { sensitivity: 'base' });
    });

    return array;
  }
}

两种方案都不需要修改模板中的管道调用逻辑，原有orderBy: 'businessName'的用法可以直接沿用。

内容的提问来源于stack exchange，提问作者Allison.A