什么是UTC时间

本文介绍了UTC时间与本地时间的关系,以及在前端开发中如何使用moment.js进行时间格式化和转换。UTC是国际无线电通信中的标准时间,而本地时间因地区而异。在前端获取时间时,可能会受到用户时区和本地时间设置的影响。文章通过示例展示了如何利用moment.js将时间戳转换为UTC或本地时间,并提供了获取当前时间的两种方法,以及在进行时间判断时的注意事项。

UTC时间和本地时间是什么关系?

世界的每个地区都有自己的本地时间,在Internet及无线电通信时,时间的统一非常重要!

整个地球分为二十四时区,每个时区都有自己的本地时间。在国际无线电通信中,为统一而普遍使用一个标准时间,称为通用协调时(UTC,Universal Time Coordinated)。UTC与格林尼治平均时(GMT,Greenwich Mean Time)一样,都与英国伦敦的本地时相同。UTC与GMT含义完全一样。

北京时区是东八区,领先 UTC 8个小时,在电子邮件信头的 Date 域记为+0800。如果在电子邮件信头中有这么一行:

Date: Sun, 13 June 2010 09:45:28 +0800

说明信件的发送地时间是2010年6月13号,星期日,上午9点45分28秒,该地区本地时领先 UTC 差 8 个小时(+0800,就是东八区时间)。如果把这个时间转化为UTC,可以使用以下公式:

UTC + 时区差 = 本地时间

即 UTC 是当天凌晨 1 点 45 分 28秒。


moment格式化默认是按什么时间?

我们使用moment时,默认是按本地时间操作。

moment(1633742045202).format('YYYY/MM/DD HH:mm:ss');
// 2021/10/09 09:14:05 (北京时区)

调用moment格式化1633742045202这个时间戳时,是按用户所在的时区格式化的。本人所在的时区是北京时区,因此得到上面的结果。如果这段程序运行在另外一个时区,将得到不同的结果。

moment中UTC时间与本地时间的转换

在moment中,对时间戳转换成本地时间:

moment(1633742045202).format('YYYY/MM/DD HH:mm:ss');
// 2021/10/09 09:14:05 (北京时区)

将时间戳转换为UTC时间:

moment.utc(1633742045202).format('YYYY/MM/DD HH:mm:ss');
//   2021/10/09 01:14:05 (UTC)

上面案例中,同一个时间戳在不同时区(北京和UTC)表现的结果不同。因此,当得到时间戳时,可以根据需求转换成对应的时间。

需要指出的是,当调用moment.utc时,与用户本地时区没有关系,即无论用户在什么地方,都会得到相同的UTC时间。

前端获取当前时间的两种方案

前端可以通过两种方法来获取当前时间:

其一,通过js获取本地时间:

moment().format('YYYY/MM/DD HH:mm:ss')

这个方法的缺陷是:这取决于这段代码运行在哪个时区,也就是与用户所在时区密切相关。并且,与用户本地时间密切相关,意味着如果用户改变了设备(如PC)上的本地时间设置,将得到完全不同的结果。

因此,这个方法仅适用于大概的判断,对于需要精确的判断时不适用。

其二,调用接口获取UTC时间,即由后端提供:

moment(serverTime).format('YYYY/MM/DD HH:mm:ss'); 
// serverTime为接口返回的服务器时间

这种方法可以防止用户所在时区不同以及修改本地时间导致的结果不同问题,也就是不依赖于用户本地时区和时间设置。

因此,该方法适合于精确判断的场景,对于测试则会稍显麻烦。

前端的时间判断

假设前端已经通过接口拿到当前的UTC时间戳A,如果我们需要判断当前时间A是否在时间B之前,该如何判断呢?

serverTime >= moment.utc('2021/10/09 00:00:00').valueOf();

// serverTime为服务器返回的当前UTC时间戳

这里moment.utc方法传入了具体的时间点,是准确的,也就是与用户的时区和本地时间设置无关。

以上代码将能够适应所有地区,并且能够防止时间作弊。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值