首页 > 解决方案 > 将日期字符串从 json 转换为 UI 的最佳实践

问题描述

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

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

现在日期格式是“yyyy-MM-dd”,但它可能会更改为“yyyyMMdd”或“MM/dd/yyyy”等其他格式。

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

所以让我们创建一个这样的函数(在打字稿中):

  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 日期。第二个函数用于格式化 JavaScript 日期。但是当 inFormat 和 outFormat 相同时,我们将无法短路转换。

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

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

标签: javascriptjsonangulartypescript

解决方案


该问题已标记为 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'

推荐阅读