关于JS时间对象遇到微秒的情况

1,410 阅读2分钟

先说结论:JS时间对象对于精度只能到毫秒,毫秒以后的精度会丢失。

与后端不同,后端可以比如 Python 是能获取到以秒为单位小数点后六位的时间戳(也就是微秒)

发现这个情况是在公司开发的时候,遇到了需要用到 element-ui 日期组件展示精确到微秒的情况,但是组件不支持,就直接下载了 element-ui 源码修改 date-pick 组件。

在修改途中发现,发现组件内部传输统一用时时间对象,用 moment 转换出来发觉对应不上后端返回的时间戳,最后发现是JS时间对象只能精确到毫秒。

官网查看API

去MDN上查看时间对象的方法,获取最小单位的方法是getMilliseconds() 获取到的是13位精确到毫秒的时间戳。

new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

手动尝试

手动初始化时间对象传入带微秒的时间戳

const timeStamp = new Date(1676297361020.123)
console.log(timeStamp.getTime()); 
//原生方法获取时间戳 1676297361020

console.log(moment(timeStamp).format('YYYY-MM-DD HH:mm:ss.SSSSSS')) 
//moment格式化 2023-02-13 22:09:21.020000

moment格式化虽然能格式化成想要的格式,但是精度还是丢了,即使传入的是时间戳结果还是一样,说明moment内部应该也是用的原生的方法获取的日期与时间(猜测,没去阅读源码,有阅读过的可以补充)

最后自己的解决办法是将毫秒与微秒作为一组拆分为单独一个输入框在时间旁边。

效果图:

54a62f4049819196846ee9fce72d68d.png

代码写的不好,就不贴出来献丑了。

结束语:虽然大多数情况下开发遇不到时间精度要求这么高,但是希望大家遇到了避坑。欢迎补充。