用dayjs解析时间戳,我被提了bug

article/2025/8/13 20:41:01

引言

前几天开发中突然接到测试提的一个 Bug,说我的时间组件显示异常。

我很诧异,这里初始化数据是后端返回的,我什么也没改,这bug提给我干啥。我去问后端:“这数据是不是有问题?”。后端答:“没问题啊,我们一直都是这么返回的时间戳,其他人用也没报错。”

于是,对比生产环境数据,我终于找到了问题根源:后端时间戳的类型,从 Number 静悄悄地变成了 String。

Bug原因

问题的原因,肯定就出现在时间数据解析上了,代码中,我统一用的dayjs做的时间解析。

如图,对时间戳的解析我都是这么写的

const time = dayjs(res.endTime).format('YYYY-MM-DD HH:mm:ss')

于是,我分别试了两种数据类型的解析方式:

  • 字符型
dayjs('175008959900').format('YYYY-MM-DD hh:mm:ss') // 1975-07-19 01:35:59
  • 数值型
dayjs(Number('175008959900')).format('YYYY-MM-DD HH:mm:ss') // 2025-07-17 06:59:59

看来,问题原因显而易见了:

由于后端返回的是字符串类型'175008959900'dayjs() 在处理字符串时,会尝试按“常见的日期字符串格式”进行解析(如 YYYY-MM-DDYYYYMMDD 等),并不会自动识别为时间戳。所以它不会把这个字符串当作毫秒时间戳来解析,而是直接失败(解析成无效日期),但 dayjs 会退化为 Unix epoch(1970 年)或给出错误结果,最终导致返回的是错误的时间。

如何避免此类问题

同dayjs一样,原生的 new Date() 在解析时间戳时也存在类似的问题,因此,不管是 Date 还是 dayjs,一律对后端返回的时间戳 Number(input) 兜底处理,永远不要信任它传的是数字还是字符串:

const ts = Number(res.endTime);
const date = new Date(ts);

思考

其实出现这个问题,除了后端更改时间戳类型,也在于我没有充分理解“时间戳”的含义。我一直以为时间戳就是一段字符或一段数字,因此,从来没有想过做任何兜底处理。那么,什么是时间戳?

时间戳(Timestamp) 是一种用来表示时间的数字,通常表示从某个“起点时刻”到某个指定时间之间所经过的时间长度。这个“起点”大多数情况下是 1970 年 1 月 1 日 00:00:00 UTC(Unix 纪元)

常见时间戳类型:

类型单位示例值说明
Unix 时间戳(秒)1750089599常见于后端接口、数据库存储
毫秒时间戳毫秒1750089599000JavaScript 常用,Date.now()

时间戳的意义:

  • 它是一个 绝对时间的数字化表示,可以跨语言、跨平台统一理解;
  • 更容易做计算:两个时间戳相减就能得到毫秒差值(时间间隔);
  • 更紧凑:比如比字符串 "2025-07-17 06:59:59" 更短,处理性能更高。

在 JavaScript 中的使用:

console.log(Date.now()); // 比如:1714729530000// 将时间戳转为日期
console.log(new Date(1750089599000)); // Thu Jul 17 2025 06:59:59 GMT+0800

关于我

一个热爱技术分享的资深前端工程师,技术栈为Vue、React、Threejs,当然对一些前沿的技术也比较感兴趣,如微前端、鸿蒙开发、油猴脚本开发等。
如果你对前端技术也充满热爱或者希望关注一些前沿技术,欢迎加群讨论~

当然,如果你有任何面试、工作上遇到的技术问题也都可以在群里提问,有时间我就会及时回答~

在这里插入图片描述


http://www.hkcw.cn/article/NTSORpwFYv.shtml

相关文章

适配器模式:让不兼容接口协同工作

文章目录 1. 适配器模式概述2. 适配器模式的分类2.1 类适配器2.2 对象适配器 3. 适配器模式的结构4. C#实现适配器模式4.1 对象适配器实现4.2 类适配器实现 5. 适配器模式的实际应用场景5.1 第三方库集成5.2 遗留系统集成5.3 系统重构与升级5.4 跨平台开发 6. 类适配器与对象适…

多模态AI的企业应用场景:视觉+语言模型的商业价值挖掘

关键词:多模态AI | 视觉语言模型 | 企业应用 | 商业价值 | 人工智能 📚 文章目录 一、引言:多模态AI时代的到来二、多模态AI技术架构深度解析三、客服场景:智能化服务体验革命四、营销场景:精准投放与创意生成五、研…

设备驱动与文件系统:01 I/O与显示器

操作系统设备驱动学习之旅——以显示器驱动为例 从这一节开始,我要学习操作系统的第四个部分,就是i o设备的驱动。今天要讲的是第26讲,内容围绕i o设备中的显示器展开,探究显示器是如何被驱动的,也就是操作系统怎样让…

【计算机网络】Linux下简单的UDP服务器(超详细)

套接字接口 我们把服务器封装成一个类,当我们定义出一个服务器对象后需要马上初始化服务器,而初始化服务器需要做的第一件事就是创建套接字。 🌎socket函数 这是Linux中创建套接字的系统调用,函数原型如下: int socket(int domain, int typ…

基于微信小程序的云校园信息服务平台设计与实现(源码+定制+开发)云端校园服务系统开发 面向师生的校园事务小程序设计与实现 融合微信生态的智慧校园管理系统开发

博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…

6月1日星期日今日早报简报微语报早读

6月1日星期日,农历五月初六,早报#微语早读。 1、10个省份城镇化率超70%,广东城镇人口超9700万; 2、长沙居民起诉太平财险不赔“新冠险”,立案878天后获胜判; 3、海口:全市范围内禁止投放互联…

linux命令 systemctl 和 supervisord 区别及用法解读

目录 基础与背景服务管理范围配置文件和管理方式监控与日志依赖管理适用场景常用命令对照表实际应用场景举例优缺点对比小结参考链接 1. 基础与背景 systemctl 和 supervisord 都是用于管理和控制服务(进程)的工具,但它们在设计、使用场景和…

用mediamtx搭建简易rtmp,rtsp视频服务器

简述: 平常测试的时候搭建rtmp服务器很麻烦,这个mediamtx服务器,只要下载就能运行,不用安装、编译、配置等,简单易用、ffmpeg推流、vlc拉流 基础环境: vmware17,centos10 64位,wi…

YOLOv5-入门篇笔记

1.创建环境 conda create -n yolvo5 python3.8 去pytorch.org下载1.8.2的版本。 pip --default-timeout1688 install torch1.8.2 torchvision0.9.2 torchaudio0.8.2 --extra-index-url https://download.pytorch.org/whl/lts/1.8/cu111 github上下载yolov5的zip pip --def…

设计模式-行为型模式-模版方法模式

概述 模板方法模式 :Template Method Pattern : 是一种行为型设计模式. 它定义了一个操作中的算法骨架,而将一些步骤延迟到子类中实现。 模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤。 符合 开闭原则。 可以在算法的流程中&…

barker-OFDM模糊函数原理及仿真

文章目录 前言一、巴克码序列二、barker-OFDM 信号1、OFDM 信号表达式2、模糊函数表达式 三、MATLAB 仿真1、MATLAB 核心源码2、仿真结果①、barker-OFDM 模糊函数②、barker-OFDM 距离分辨率③、barker-OFDM 速度分辨率④、barker-OFDM 等高线图 四、资源自取 前言 本文进行 …

十三、【核心功能篇】测试计划管理:组织和编排测试用例

【核心功能篇】测试计划管理:组织和编排测试用例 前言准备工作第一部分:后端实现 (Django)1. 定义 TestPlan 模型2. 生成并应用数据库迁移3. 创建 TestPlanSerializer4. 创建 TestPlanViewSet5. 注册路由6. 注册到 Django Admin 第二部分:前端…

Python训练第四十一天

DAY 41 简单CNN 知识回顾 数据增强卷积神经网络定义的写法batch归一化:调整一个批次的分布,常用与图像数据特征图:只有卷积操作输出的才叫特征图调度器:直接修改基础学习率 卷积操作常见流程如下: 1. 输入 → 卷积层 →…

【C++进阶篇】哈希表的封装(赋源码)

C哈希表终极封装指南:从线性探测到STL兼容的迭代器魔法 一. 哈希表的封装1.1 基本结构1.1.1 插入1.1.2 查找1.1.3 删除1.1.4 Begin()1.1.5 End()1.1.6 构造函数1.1.7 析构函数 1.2 迭代器设计(重点)1.2.1 重载operator*()1.2.2 重载operator-…

238除自身以外数组的乘积

题目链接: https://leetcode.cn/problems/product-of-array-except-self/description/解法一&#xff1a;暴力解法 直接遍历一遍数组&#xff0c;求该数组的除该数之外的乘积&#xff0c;但是超时时间复杂度为n方。 vector<int> productExceptSelf(vector<int>&a…

主数据编码体系全景解析:从基础到高级的编码策略全指南

在数字化转型的浪潮中&#xff0c;主数据管理&#xff08;MDM&#xff09;已成为企业数字化转型的基石。而主数据编码作为MDM的核心环节&#xff0c;其设计质量直接关系到数据管理的效率、系统的可扩展性以及业务决策的准确性。本文将系统性地探讨主数据编码的七大核心策略&…

C# 类和继承(构造函数的执行)

构造函数的执行 在前一章中&#xff0c;我们看到了构造函数执行代码来准备一个即将使用的类。这包括初始化类的静 态成员和实例成员。在这一章&#xff0c;你会看到派生类对象有一部分就是基类对象。 要创建对象的基类部分&#xff0c;需要隐式调用基类的某个构造函数。继承层…

79. Word Search

题目描述 79. Word Search 回溯 代码一&#xff0c;使用used数组 class Solution {vector<pair<int,int>> directions{{0,1},{0,-1},{1,0},{-1,0}};vector<vector<bool>> used; public:bool exist(vector<vector<char>>& board, st…

大模型备案中语料安全详细说明

《AIGC安全要求》针对语料安全&#xff0c;在语料来源授权合法、安全评估核验、不良语料类型三个方面提出了重点要求&#xff0c;具体要求包括&#xff1a; 1、授权合法 语料的来源需要有合法的、明确的授权&#xff0c;确保其符合“授权、同意、告知”的合法性原则。根据语料…

汽车安全:功能安全FuSa、预期功能安全SOTIF与网络安全Cybersecurity 解析

汽车安全的三重防线&#xff1a;深入解析FuSa、SOTIF与网络安全技术 现代汽车已成为装有数千个传感器的移动计算机&#xff0c;安全挑战比传统车辆复杂百倍。 随着汽车智能化、网联化飞速发展&#xff0c;汽车电子电气架构已从简单的分布式控制系统演变为复杂的移动计算平台。现…