将后台返回的UTC时间格式化为本地时间的方法

背景

在前后端数据接口通信中，后台返回的时间往往是 UTC 格式的，即2020-10-12T10:31:35.891724+00:00这种。

作为前端，我们需要将其转换为标准的本地格式，并用“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"

也就是说，我所在的北京（东八区）时间，比 UTC （世界时间）提前了8个小时。

那么，对于一个后台返回的标准时间（以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个小时）就是你看到的北京本地时间。

⚠️时区的划分，以零时区为基准，向东则加，向西则减，相邻时区相差为一小时，全球共24个时区。

转换

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

想要将复杂的 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'  //时区
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 的工具集，而且是专门针对各种日期的工具集。

详细的大家自己看文档吧，内容太多了。

地址在这里

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

欢迎留言讨论