Javascript 中的 Date 对象引发的血案
发布于 5 年前 作者 falost 3715 次浏览 来自 分享

本文无任何牛逼技术含量,只能算是科普文吧!

缘由

在工作中,因和后端配合的时候,后端返回的时间对象不是前端所需要的标准时间,而产生的一系列问题反思!

Date 对象

Date对象大家众所周知他是干什么用的?怎么用?这些都不是问题,但是在每个语言种类和宿主环境不同的情况下,就会产生些奇奇怪怪的问题,比如:前端通过接口拿到了一个Java后端返回的时间对象(2019-08-25 18:00:00),然后经过 js 处理展示不同的格式(如:2019/08/25、现在、08/25 18:00)前端开发的小伙子拿到这个值之后就是一顿操作:

const formatTime = function (date, format = '', conn = '-') {
  date = new Date(date)
  
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()

  let hour = date.getHours()
  let minute = date.getMinutes()
  let second = date.getSeconds()
  
  switch (format) {
    case 'YY-MM-DD':
      return [year, month, day].map(formatNumber).join(conn)
    case 'YY-MM-DD HH:mm':
      return [year, month, day].map(formatNumber).join(conn) + ' ' + [hour, minute].map(formatNumber).join(':')
    case 'YY-MM-DD HH:mm:ss':
      return [year, month, day].map(formatNumber).join(conn) + ' ' + [hour, minute, second].map(formatNumber).join(':')
    case 'MM-DD HH:mm':
      return [month, day].map(formatNumber).join(conn) + ' ' + [hour, minute].map(formatNumber).join(':')
    case 'MM-DD':
      return [month, day].map(formatNumber).join(conn)
    case 'YYMMDD':
      return year + '年' + formatNumber(month) + '月' + formatNumber(day) + '日'
    case 'MMDD':
      return formatNumber(month) + '月' + formatNumber(day) + '日'
    default:
      return [year, month, day].map(formatNumber).join(conn) + ' ' + [hour, minute, second].map(formatNumber).join(':')
  }
}
const formatNumber = function (n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}
console.log(formatTime('2019-08-25 18:00:00', 'MM-DD HH:mm', '/')) // 08/25 18:00

image

执行之后没有毛病,我们如愿的拿到了想要的效果 08/25 18:00,有同学肯定会说,这么简单,有啥问题呢?

image

在谷歌这些通用浏览器中,好像的确没啥问题,都是正常情况,但是拿到了 Safari 浏览器之后,傻眼了,什么情况?怎么得到的是一个("NaN/NaN NaN:NaN")字符串出来了?我的时间呢?

时区

我们先来了解下时区

由于世界各国家与地区经度不同,地方时也有所不同,因此会划分为不同的时区。正式的时区划分,其中包括24个时区,每一时区由一个英文字母表示。每隔经度15°划分一个时区,有一个例外,每个时区有一条中央子午线;例如,GMT属于“z”区,因此其时间后通常添加后缀“Z”(口语中用后缀“Zulu”)。

这是来自百度百科关于时区的一段说明,那么最基本的解释就是:是地球上的区域使用同一个时间。

然后我们再来看看 JavaScript 中对于时间的描述

创建一个 JavaScript Date 实例,该实例呈现时间中的某个时刻。Date 对象则基于 Unix Time Stamp,即自1970年1月1日(UTC)起经过的毫秒数。

也就是说,在 JavaScript 中Date对象是基于 UTC 时间标准来衡量时间的。

那么我们再来看看什么是 UTC?

协调世界时,又称世界统一时间、世界标准时间、国际协调时间。由于英文(CUT)和法文(TUC)的缩写不同,作为妥协,简称UTC。

还是来百度百科的说明,看到 UTC 那么肯定会想到 GMT,其实UTC与格林威治平均时(GMT, Greenwich Mean Time)一样,都是英国伦敦的本地时相同,所以在 JavaScript 中 UTC == GMT。

发现问题

其实说了这么多文献,就是说明一件事—时区,那为什么要说明时区呢?因为我们这里就是出现时区的问题上,导致 Safari 的 JS 引擎没有识别到当前时间值时区的划分,导致在 new Date() 时候出现了错误,如:

new Date('2019-08-25 18:00:00') // Invalid Date 

image

OK,到这里这里之后,我们在回归刚才的问题上:

1、发现了在 Safari 浏览器中不能识别类似时间('2019-08-25 18:00:00')的,导致出现了 NaN 的情况?

2、发现了问题根本原因是因为时间不是 UTC 标准格式(没有时区信息)导致的?

3、现在给出问题的解决方案。

解决方案

既然我们已经知道了出现问题的根本原因,那么就可以对症下药了:

1、后端对时间进行重新转义,将时间转换为 UTC 标准时间格式,如:'2019-08-25T18:00:00+08:00'

image

2、后端将时间转换成时间戳形式,如:1566727200000

image

这两点是后端处理的方法,前端处理方法,比较复杂,需要将时间字符串通过正则替换为标准时间,这里就不多说了,因为这种方法治标不治本。

当然,如果你有什么好的处理方法,欢迎留言给我!

总结

另外,这里也提到了一个能高效解决问题的方案:

1、发现出现了什么问题?

2、发生这个问题的根本原因是什么?

3、在提出解决方案。

我们解决问题,不能只解决表象问题,要找问题的根本原因在哪里,然后再着手解决处理,这样我们才能真正的解决问题。不要一发现问题,就想着怎么去处理,那么有可能就会出现很多未知问题。找代码的 bug 如果不按照这种思维去处理的话,我相信你的代码就像下面一样:

image

好了,本文就啰嗦到这里了,文中如有不对之处,望多多指教!

祝大家新的一周愉快!

参考文献

1、时区:https://baike.baidu.com/item/时区/491122

2、协调世界时:https://baike.baidu.com/item/协调世界时/787659

3、北京时间:http://www.beijing-time.org/time15.asp

4、JavaScript 内置 Date 对象:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date

原文地址:https://falost.cc/article/5d62760b8d183230607f417a

回到顶部