前端JS如何将UTC世界时间格式转换为本地时间格式

发布网友发布时间：2024-09-27 03:43

我来回答

共1个回答

热心网友时间：2024-12-12 08:08

背景

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

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

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

探究

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

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

vard=newDate()d.toLocaleTimeString()//"上午10:46:42"

而此时的UTC时间为：

d.toUTCString()//"Tue,13Oct202002:46:42GMT"

也就是说，我所在的北京（东八区）时间为上午的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转换成东八区时间也即北京时间：

newDate('2020-10-12T10:31:35.891724+00:00')//MonOct12202018:31:35GMT+0800(中国标准时间)

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

转换

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

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

1、moment

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

importmomentform'moment'vartime='2020-10-12T10:31:35.891724+00:00'moment(newDate(time)).format('YYYY-MM-DDHH:mm:ss')//"2020-10-1218:31:35"

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

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

首先安装这个库npminstallmoment-timezone，然后就可以愉快的写代码了

varmoment=require('moment-timezone');vartz='Asia/Choibalsan'//时区vartime='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-DDHH:mm:ss')//"2020-10-1218:31:35"

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

moment.utc(time).tz(tz).format('YYYY-MM-DDhh:mm:ss')//"2020-10-1206:31:35"2、date-fns

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

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

import{format}from'date-fns'vartime='2020-10-12T10:31:35.891724+00:00'format(newDate(time),'YYYY-MM-DDHH:mm:ss')//"2020-10-1218:31:35"

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

欢迎小伙伴们留言讨论。

作者：晴天同学