前言
Headless CMS（无头 CMS）是已经成为了一个流行的方案，很多公司都在使用。它们提供了一种更灵活的方式来管理内容并将其传递到前端开发人员中。然而，在 Headless CMS API 中，日期时间数据的处理常常会带来一些问题。为了解决这些问题，我们需要掌握一些技巧，本文将为您介绍。
Headless CMS 时间日期格式问题
时间与日期是和我们生活息息相关的概念，在应用程序开发中也是经常用到的数据类型。许多 Headless CMS 自动生成的数据 API 都使用 ISO 8601 时间日期格式，例如：
{
"createdAt": "2022-09-01T12:30:00Z",
"updatedAt": "2022-09-01T13:30:00Z",
"publishedAt": "2022-09-01T14:00:00Z"
}这是一个标准的日期时间格式，在计算机及其网络中的广泛使用，它提供了一种明确的方式来表示日期和时间。但是在前端开发中，根据不同的项目需求，我们可能需要在时间格式上进行更多的操作，例如转换为不同的时区、转换为 diferente 格式，等等。
下面演示一些常用的时间内容上需要处理的需求。
JSON 日期时间格式问题
在许多 Headless CMS 自动生成的 JSON API 中，时间日期格式是 ISO 8601 格式，后面加上Z表示UTC时区。如果前端数据处理时没有考虑到时区或者格式转换问题，可能会出现很多问题。例如，在JavaScript 中，我们可以使用内置的 Date 对象来创建一个日期对象。如果传入一个 ISO 8601 时间日期字符串，它会自动根据本地时间调整日期。
const date = new Date("2022-09-01T12:30:00Z");
console.log(date.toISOString()); //2022-09-01T12:30:00.000Z
console.log(date.toLocaleString()); //9/1/2022, 8:30:00 AM在这个例子中，我们创建了一个包含UTC时间的日期，但是使用 toLocaleString() 方法转换文章本地时间时转换后结果为本地时间，在本地时间为东8区，所以结果会与预期不一致。
时间格式转换问题
当从 Headless CMS 中拉取日期和时间的数据时，也可能需要进行格式转换，例如将 "2022-09-01T12:30:00Z" 转换成 "09-01-2022, 7:30 AM CST" 格式。那么如何进行时间格式转换呢？
我们可以使用 Moment.js，它是一个用于日期处理的强大工具，它提供了大量的 API 来读取、解析、校正、显示和操作日期。轻轻松松地导入它就可以使用。
import moment from 'moment-timezone'; const datetime = '2022-09-01T12:30:00Z'; const timezone = 'Asia/Shanghai'; const format = 'MM-DD-YYYY, h:mm A z'; const localDatetime = moment.tz(datetime, timezone).format(format); console.log(localDatetime);
在这个例子中，我们首先导入了 moment-timezone 库，然后定义了三个变量：datetime 包含要转换的 ISO 格式时间字符串，timezone 包含目标时区（亚洲/上海），format 包含目标日期时间格式（"MM-DD-YYYY, h:mm A z"）。我们使用 moment-timezone 的tz方法将UTC时间转换为目标时区的本地时间，并使用 format 方法得到我们想要的格式。
解决方案
针对以上问题，我们解决方案是使用 day.js 和 timeago.js 库，下面我们来一一介绍。
day.js
day.js 是一个使用方便且轻量级别的 JavaScript 库，它有着和 Moment.js 相同的功能，并且使用更方便，更小巧。
首先安装 day.js:
npm install dayjs --save
日常使用方式非常简单。日历和日期过滤器是使用 Vue.js时常用的功能，我们可以在某些场景中，将 dayjs 视为 Moment.js 的替代品。我们可以轻轻松松地导入它:
import dayjs from 'dayjs';
const currentDate = dayjs();
console.log(currentDate.format('YYYY-MM-DD HH:mm:ss')); //2022-10-12 11:10:00此外，dayjs 提供了许多方法来读取、格式化和操作日期，例如将日期加减，获取两个日期之间的日期差，还有各种格式化日期和时间的方法。
timeago.js
timeago.js 是一个方便简便地实现友好时间计算的 JavaScript 库。使用它可以在 UI 界面上以人类易懂的方式，展示与当前时间有多长时间间隔，例如：
import Timeago from 'timeago.js';
const timeagoInstance = new Timeago();
const ago = timeagoInstance.format('2022-10-11 12:00:00');
console.log(ago); //'1 day ago'在这个例子中，我们导入了 timeago.js 库，并创建了一个 timeagoInstance 实例对象。我们然后使用 timeagoInstance.format() 方法将任何日期转换为相对于当前时间的友好时间字符串。
正如本文所述，Headless CMS 的时间日期数据处理的问题，我们可以通过使用这两种库：day.js 和 timeago.js。许多大型企业已经使用该方案解决了时间问题，同时也帮助简化了代码。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- -------------
----- --------- - -
------- ----- -------- -
------------------------ ------- ------------- -- -
------------ - ------------ -- ----------- ----------
------ ----------------------------------
---
--------------------- ------- -- -
----- --------------- - --- ----------
------ ------------------------------
---
--
--
------ ------- ------------ -------------------- ---- -------
----------
-----
------ ----- -------
----- -------------- - ---------- ------
----- -------------- - ------- ------
------
-----------
--------
------ --------- ---- --------------
------ ------- -
----- -------
---- -- -
------ -
------ --- ------
----- --
--
--
------- -- -
---------
--
-------- -
----------------- -
------ ------------------------------------------------- ----------
--
--
-
-
---------在这个例子中，我们引入了 day.js 和 timeago.js 库，创建了一个 vueMoment 插件，导出属于自己的filters，使用插件 API，在模板中轻松使用来自 day.js 和 timeago.js 的本地日期和友好时间值。
总结
本文介绍了在 Headless CMS API 中处理日期、时间格式的常见问题，解释了如何使用 day.js 和 timeago.js 库来解决这些问题。我们学会了如何处理ISO 8601 标准时间日期格式，以及如何转换、格式化和操作日期。这对于前端开发者和任何使用 Headless CMS 的人来说都是极为重要的技巧，可以帮助我们有效优化和简化代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64dee813f6b2d6eab3a0e53d