Angular 2/4/5中如何在日期表达式添加st、rd、th后缀？

确实，Angular原生的Date Pipe确实没提供直接添加序数后缀（st/rd/th）的选项，要实现像February 25th、March 1st这种格式，最符合Angular风格的方案就是自定义一个管道——毕竟管道就是Angular里用来处理数据格式化的标准方式，复用性强还能保持模板的简洁。

步骤1：创建自定义序数日期管道 #

你可以用Angular CLI快速生成管道，或者手动创建文件：

ng generate pipe ordinalDate

然后在生成的ordinal-date.pipe.ts文件里实现核心逻辑，重点是处理天数的后缀判断，还要兼容字符串和Date类型的输入：

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

@Pipe({
  name: 'ordinalDate'
})
export class OrdinalDatePipe implements PipeTransform {
  // 支持传入自定义基础格式，默认是"MMMM d"（长月份+数字天）
  transform(date: Date | string, formatConfig?: { month: 'long' | 'short', day?: 'numeric' }): string {
    // 把输入转成Date对象
    const dateObj = typeof date === 'string' ? new Date(date) : date;
    if (isNaN(dateObj.getTime())) return ''; // 处理无效日期

    const day = dateObj.getDate();
    const suffix = this.getOrdinalSuffix(day);

    // 用Intl.DateTimeFormat处理基础日期格式，保证本地化准确性
    const formatter = new Intl.DateTimeFormat('en-US', {
      month: formatConfig?.month || 'long',
      day: 'numeric'
    });
    let formattedDate = formatter.format(dateObj);

    // 替换数字天为带后缀的版本
    return formattedDate.replace(/\d+/, `${day}${suffix}`);
  }

  // 核心：判断天数对应的序数后缀
  private getOrdinalSuffix(day: number): string {
    // 11-13是特殊情况，都用th
    if (day > 3 && day < 21) return 'th';
    switch (day % 10) {
      case 1: return 'st';
      case 2: return 'nd';
      case 3: return 'rd';
      default: return 'th';
    }
  }
}

步骤2：在模块中声明管道 #

别忘了把这个管道添加到你的模块（比如AppModule）的declarations数组里，这样模板才能识别它：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { OrdinalDatePipe } from './ordinal-date.pipe'; // 导入管道
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    OrdinalDatePipe // 声明管道
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤3：在模板中使用管道 #

现在你就可以像用原生Date Pipe一样在模板里使用这个自定义管道了：

<!-- 默认格式：长月份+带后缀的天 -->
{{ item.date | ordinalDate }} 
<!-- 示例输出：February 25th -->

<!-- 可选：传入短月份配置 -->
{{ item.date | ordinalDate: { month: 'short' } }}
<!-- 示例输出：Feb 1st -->

为什么这是最佳方案？ #

• 符合Angular范式：管道是Angular专门用于数据格式化的工具，逻辑和视图分离，代码更整洁。
• 复用性强：一次定义，整个项目的模板都能调用，不用在每个组件里重复写后缀判断逻辑。
• 兼容性好：处理了Date对象和字符串日期的输入，还兼容无效日期的情况。
• 本地化友好：用Intl.DateTimeFormat处理基础日期格式，比手动拼接月份更可靠。

内容的提问来源于stack exchange，提问作者Pat M