Angular13中如何将字符串转换为指定格式的日期时间？

针对你要把'2022-06-09T22:00:00Z'这类ISO标准时间字符串转成mm/dd/yyyy 时:分 上下午格式的需求，直接用Angular内置能力就能实现，不需要引入第三方库，分两种常用场景处理：

1. 模板内直接转换（最常用） #

Angular自带的DatePipe原生支持ISO时间字符串解析，不需要手动先转Date对象，直接在模板插值里用管道即可，格式串可直接匹配需求：

<!-- 正常有值时输出示例：06/09/2022 10:00 PM，无值时兜底显示占位格式 -->
<p>{{ str ? (str | date:'MM/dd/yyyy hh:mm a') : 'mm/dd/yyyy --:-- --' }}</p>

格式符注意别写错：

• 月份必须用大写MM，小写mm代表分钟，写混会出现月份显示成00的bug
• 12小时制用小写hh，如果要24小时制换成大写HH
• 末尾的a对应AM/PM上下午标识，就是你格式里最后--的位置
  你传入的字符串末尾带Z代表是UTC时间，DatePipe默认会按用户当前所在时区转成本地时间，如果要固定输出UTC时间的结果，给管道加第三个参数传时区即可：

<p>{{ str | date:'MM/dd/yyyy hh:mm a':'UTC' }}</p>

2. TS逻辑层转换 #

如果你需要在组件类代码里拿到格式化后的字符串做后续逻辑处理，直接注入DatePipe调用即可：
首先在组件装饰器里声明provider，再在构造函数注入，调用transform方法完成转换：

import { DatePipe } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'app-date-convert',
  template: '',
  providers: [DatePipe] // 必须加，不然注入会报空依赖错误
})
export class DateConvertComponent {
  str = '2022-06-09T22:00:00Z';
  formattedStr: string;

  constructor(private datePipe: DatePipe) {
    // 转换失败/无值时兜底返回你要的占位格式
    this.formattedStr = this.datePipe.transform(
      this.str, 
      'MM/dd/yyyy hh:mm a',
      'UTC' // 不需要固定UTC时区就删掉这个参数
    ) || 'mm/dd/yyyy --:-- --';
  }
}

常见踩坑提醒 #

• 非标准格式的时间字符串不要直接丢给DatePipe，先在控制台跑下new Date(你的字符串)确认能解析出正确时间，不然会返回Invalid Date
• 不要自己手写原生JS格式化逻辑，月份补零、闰年、时区这些边界问题DatePipe已经全部处理好了，没必要重复造轮子
• 注意区分大小写格式符：大写MM是月份、小写mm是分钟；大写HH是24小时制、小写hh是12小时制，写错格式符会出现显示异常

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