本文无任何牛逼技术含量,只能算是科普文吧!
缘由
在工作中,因和后端配合的时候,后端返回的时间对象不是前端所需要的标准时间,而产生的一系列问题反思!
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
执行之后没有毛病,我们如愿的拿到了想要的效果 08/25 18:00
,有同学肯定会说,这么简单,有啥问题呢?
在谷歌这些通用浏览器中,好像的确没啥问题,都是正常情况,但是拿到了 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
OK,到这里这里之后,我们在回归刚才的问题上:
1、发现了在 Safari 浏览器中不能识别类似时间('2019-08-25 18:00:00'
)的,导致出现了 NaN 的情况?
2、发现了问题根本原因是因为时间不是 UTC 标准格式(没有时区信息)导致的?
3、现在给出问题的解决方案。
解决方案
既然我们已经知道了出现问题的根本原因,那么就可以对症下药了:
1、后端对时间进行重新转义,将时间转换为 UTC 标准时间格式,如:'2019-08-25T18:00:00+08:00'
2、后端将时间转换成时间戳形式,如:1566727200000
这两点是后端处理的方法,前端处理方法,比较复杂,需要将时间字符串通过正则替换为标准时间,这里就不多说了,因为这种方法治标不治本。
当然,如果你有什么好的处理方法,欢迎留言给我!
总结
另外,这里也提到了一个能高效解决问题的方案:
1、发现出现了什么问题?
2、发生这个问题的根本原因是什么?
3、在提出解决方案。
我们解决问题,不能只解决表象问题,要找问题的根本原因在哪里,然后再着手解决处理,这样我们才能真正的解决问题。不要一发现问题,就想着怎么去处理,那么有可能就会出现很多未知问题。找代码的 bug 如果不按照这种思维去处理的话,我相信你的代码就像下面一样:
好了,本文就啰嗦到这里了,文中如有不对之处,望多多指教!
祝大家新的一周愉快!
参考文献
1、时区:https://baike.baidu.com/item/%E6%97%B6%E5%8C%BA/491122
2、协调世界时:https://baike.baidu.com/item/%E5%8D%8F%E8%B0%83%E4%B8%96%E7%95%8C%E6%97%B6/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
转载请注明:Falost的小窝 » Javascript 中的 Date 对象引发的血案