将日期字符串从 json 转换为 UI 的最佳实践答案

【问题标题】：Best practice to convert date string from json to UI将日期字符串从 json 转换为 UI 的最佳实践
【发布时间】：2019-03-31 11:28:43
【问题描述】：

所以我们有一个如下所示的 json 响应：

  {
    data: {
      nestedData: {
        someMoreNestedData: {
          someArray: [
            {
              someWhereThereIsADate: '2018-10-26'
            }
          ]
        },
        wholeBunchOfOtherData: {...}
      }
    }
  }

目前日期格式为“yyyy-MM-dd”，但可能会更改为“yyyyMMdd”或“MM/dd/yyyy”等其他格式。

UI 现在希望显示为“MM/dd/yyyy”，但将来可能会更改为其他格式。

所以让我们创建一个这样的函数（在 typescript 中）：

  function dateStringFormat(dateString: string, inFormat: string, outFormat: string): string {
    if (!dateString || inFormat === outFormat) {
      return dateString;
    }
    // use luxon DateTime to convert
    return DateTime.fromString(dateString, inFormat).toFormat(outFormat);
  }

问题在于 dateString 和 inFormat 是紧耦合的。

我们把它分成两个函数怎么样，一个用于将 dateString 解析为 JavaScript Date。第二个函数用于格式化 JavaScript 日期。但是当 inFormat 和 outFormat 相同时，我们将无法短路转换。

另一个想法是将 JSON 响应转换为数据对象，其中将日期字符串转换为日期。但这听起来很沉重。

我想知道是否有人经历过这个并提出了一些最佳实践。

【问题讨论】：

时刻适合日期数据类型操作momentjs.com
保持这种灵活性的唯一方法是使用能够识别每种可能格式的解析器。 MomentJS 是一个很好的解决方案。此外，数据格式可以附加到每个结构中，因此客户不必猜测。
伙计们，我已经在使用 luxon 来处理日期格式了，就像 moment 一样。问题不在于格式化工作，而是将 json 中的后端日期简化为任何格式的 UI 日期的最佳实践

标签： javascript json angular typescript

【解决方案1】：

该问题已标记为 Angular，但看起来您使用的是原始 JS。如果是 Angular，为什么不使用 Date 管道？

https://angular.io/api/common/DatePipe

{{ dateObj | date }}               // output is 'Jun 15, 2015'
{{ dateObj | date:'medium' }}      // output is 'Jun 15, 2015, 9:43:11 PM'
{{ dateObj | date:'shortTime' }}   // output is '9:43 PM'
{{ dateObj | date:'mmss' }}        // output is '43:11'

【讨论】：

根据文档，dateObj 只能以毫秒为单位，因为 UTC 纪元或 ISO 字符串，对吧？
您可以创建自己的在内部使用 DatePipe 的管道。管道像服务一样提供，因此您可以在构造函数或自定义日期管道中注入 Angular DatePipe。您只需要在管道的转换方法中处理转换，并使用 Angular DatePipe 转换方法返回结果。