前端将UTC时间格式转化为本地时间格式

7,990 阅读4分钟

这是我参与8月更文挑战的第14天,活动详情查看:8月更文挑战

背景

在前后端数据接口通信中,后台返回的时间往往是 UTC 格式的,即2020-10-12T10:31:35.891724+00:00这种,这可能是因为在数据库中存储时间格式选择的是 TIMESTAMP。

作为前端,我们需要将其转换为标准的本地格式,并用“YYYY-MM-DD HH:mm:ss”这种格式呈现给用户,用户才能看得懂。

那么通常情况下,怎么将他们进行转换呢?

探究

先来理解下 UTC 时间和本地时间

以北京为例,我在写这篇博客的时候,时间是:

var d = new Date()
d.toLocaleTimeString() // "上午10:46:42"

而此时的 UTC 时间为:

d.toUTCString() // "Tue, 13 Oct 2020 02:46:42 GMT"

也就是说,我所在的北京(东八区)时间为上午的 10 点,而此时的 UTC 时间 (世界时间)为凌晨 2 点,所以东八区相比于 utc 时间,提前了 8 个小时。

可能有的小伙伴迷糊了,为什么是提前了 8 个小时?

这就牵扯到了全球时区的划分,众所周知:

⚠️全球共24个时区,每个相邻时区的跨度为一小时。

⚠️时区的划分,以零时区为基准,向东则加,向西则减,简称东加西减。

时区

由于地球的自转,造成了我们看到的太阳是东升西落的,对于一个很大的地域而言,东边总是比西边先看到太阳。

比如对于中国而言,下午 6 点,北京就已经是傍晚了,而新疆地区的傍晚,可能在下午 7 点以后。如果以北京为例,太阳到达近地点的时间是中午 12 点,而新疆呢,太阳到达近地点可能在 13 点(数据不很精确)。

而在世界范围呢,每个地区,都把太阳到达近地点的时间看作是一天中的中午 12 点,这就导致全球从东向西,全球 24 个时区会依次度过自己时区的 12 点

为了让各地时间统一起来,方便交流,就把全球划分为 24 个时区(因为地球自转一周是 24 个小时),从零时区开始,东加西减,用一个时间格式来表示,这就是 UTC (世界时间)

那么,对于一个后台返回的标准时间(以2020-10-12T10:31:35.891724+00:00为例)来说,最后面的+00:00则告诉了你当前时间是以哪个时区来计算的(+00:00代表了零时区)。

比如,将2020-10-12T10:31:35.891724+00:00转换成东八区时间也即北京时间:

new Date('2020-10-12T10:31:35.891724+00:00')
// Mon Oct 12 2020 18:31:35 GMT+0800 (中国标准时间)

可以看到后面有+0800,意味着这是东八区的本地时间,即世界时间向东跨越了八个时区(加了8个小时)就是你看到的北京本地时间。

转换

上面讲的其实没什么用,只是帮助大家理解一些基础的概念。

想要将复杂的 UTC 转成需要的格式,最好当然是寻找插件来帮忙了。

1、moment

不会吧?不会吧?大名鼎鼎的 moment 不会真的有人不知道吧?

import moment form 'moment'
var time = '2020-10-12T10:31:35.891724+00:00'
moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
// "2020-10-12 18:31:35"

moment 还有个专门的时区处理类库,点我直达

用了这个类库,也能正确处理时区之间的转换哦

首先安装这个库npm install moment-timezone,然后就可以愉快的写代码了

var moment = require('moment-timezone');
var tz = 'Asia/Choibalsan'  //时区
var time = '2020-10-12T10:31:35.891724+00:00'
moment.utc(time).tz(tz).format()
// "2020-10-12T18:31:35+08:00"
moment.utc(time).tz(tz).format('YYYY-MM-DD HH:mm:ss')
//"2020-10-12 18:31:35"

当然这里还需要注意一下,如果你传递的参数是hh:mm:ss而不是HH:mm:ss,那么moment在处理上是有区别的,hh 将会采用 12小时制,HH 则会采用 24小时制。

moment.utc(time).tz(tz).format('YYYY-MM-DD hh:mm:ss')
// "2020-10-12 06:31:35"

2、date-fns

看这名称就能猜到,这又是一个处理时间的插件。而且,相比moment一点不虚呢,他是一个类似 lodash 的工具集,而且是专门针对各种日期的工具集。

而且相比于 moment,这个插件相当的轻量。

import { format } from 'date-fns'
var time = '2020-10-12T10:31:35.891724+00:00'
format(new Date(time), 'YYYY-MM-DD HH:mm:ss')
//"2020-10-12 18:31:35"

其他更详细的 API 大家自己看文档吧,我就不过多的赘述了。

欢迎小伙伴们留言讨论。