JavaScript 中处理时间格式的核心方式

JavaScript 中处理时间格式主要有以下 10 种核心方式,涵盖原生 API 和现代标准:

一、原生 Date 对象格式

  1. ISO 8601 标准格式
c 复制代码
new Date().toISOString() 
// "2023-10-05T14:48:00.000Z" (UTC 时间)
  1. 本地化字符串格式
bash 复制代码
new Date().toString() 
// "Wed Oct 05 2023 22:48:00 GMT+0800 (中国标准时间)"
  1. 时间戳格式
bash 复制代码
Date.now() 
// 1696524480000 (毫秒数)

二、日期组件分解格式(针对于new Date格式的方法)

方法 示例值 说明
getFullYear() 2023 四位数年份
getMonth() 9 (0-11) 注意:月份从 0 开始
getDate() 5 当月第几天 (1-31)
getHours() 22 24 小时制
getMinutes() 48 分钟数
getSeconds() 0 秒数
getMilliseconds() 0 毫秒
getTime() 1767002549843 指定的日期和时间距 1970 年 1 月 1 日午夜(GMT 时间)之间的毫秒数。

例子:
new Date()里面可以是具体日期,如const today = new Date('2023-05-13');

bash 复制代码
//getFullYear:用于获取日期的年份。‌(其它与getFullYear用法相同)
const date = new Date('2023-10-05');
console.log(date.getFullYear()); // 输出: 2023

// getMonth:用于获取日期的月份值。‌
const now = new Date();
const monthIndex = now.getMonth(); // 返回 0-11 的整数
console.log(monthIndex); // 输出类似 11(如果当前是十二月)

//getDate:用于获取指定日期对象所表示的月份中的具体日期(即每月的第几天)
const today = new Date(); // 创建当前日期和时间的Date对象

const dayOfMonth = today.getDate(); // 获取当前日期是本月的第几天
console.log(dayOfMonth); // 输出结果:1-31之间的整数,表示日期

//getHours:返回指定时间的小时字段
var d = new Date();
var n = d.getHours();
console.log(n); // 当前小时整数(返回值是 0 (午夜) 到 23 (晚上 11 点)之间的一个整数)

//getMinutes:返回时间的分钟字段
const d = new Date();
const n = d.getMinutes();  
console.log(n); //以本地时间显示。返回值是 0 ~ 59 之间的一个整数。

//getSeconds:返回指定时间的秒数
const d = new Date();
const n = d.getSeconds();  
console.log(n); //以本地时间显示。返回值是 0 ~ 59 之间的一个整数。

//getMilliseconds:返回指定时间的毫秒数
const d = new Date();
const n = d.getMilliseconds();  
console.log(n); //	返回值是 0 ~ 999 之间的一个整数,该数字代表毫秒数。

//getTime:返回指定时间的毫秒数(时间戳)
var d = new Date();
var n = d.getTime();

三、引入day.js日期处理库

day.js官方组件库
1.使用优点
Day.js 是一个轻量级的JavaScript库,专为现代浏览器设计,用于解析、验证、操作和显示日期和时间。它旨在成为一个轻量级、可替代Moment.js的解决方案,因为Moment.js虽然功能强大但体积较大
2.基础用法
在这里仅对一些常用且基础的方法进行展示,更详细功能可参考上述官方文档链接
Day.js 的所有操作都围绕Day.js 对象进行。该对象是不可变的(immutable),即任何修改操作(如加减时间、设置日期)都会返回一个新的 Day.js 对象,原对象不会被改变。

bash 复制代码
// 1. 获取当前时间
const now = dayjs()

// 2. 字符串创建
//支持 ISO 格式、YYYY-MM-DD 等
const date1 = dayjs('2023-10-01')
const date2 = dayjs('2023-10-01T12:30:00')

// 3. 时间戳创建(毫秒)
const date3 = dayjs(1696108800000) // 对应 2023-10-01 00:00:00

// 4. new Date 对象创建
const date4 = dayjs(new Date(2023, 9, 1)) // 注意:Month 是 0 基(9 对应 10月)

// 5.转化成原生 Date 对象
const date = dayjs('2023-10-01')
date.toDate() // 原生 Date 对象:Sun Oct 01 2023 00:00:00 GMT+0800

3.格式化日期

javascript 复制代码
const date = dayjs('2024-10-01 12:30:45') //可更换任意需要的时间

// 常用格式
date.format('YYYY-MM-DD') // '2024-10-01'
date.format('YYYY年MM月DD日') // '2024年10月01日'
date.format('HH:mm:ss') // '12:30:45'
date.format('YYYY-MM-DD HH:mm:ss') // '2024-10-01 12:30:45'
date.format('X') // 1696149045(秒级时间戳)
date.format('x') // 1696149045000(毫秒级时间戳)
//常用占位符说明:

//YYYY:4位年份(如 2023)
//MM:2位月份(01-12)
//DD:2位日期(01-31)
//HH:24小时制小时(00-23)
//hh:12小时制小时(01-12)
//mm:分钟(00-59)
//ss:秒(00-59)
//X:秒级时间戳
//x:毫秒级时间戳

4. 时间计算(加减操作)

javascript 复制代码
const now = dayjs('2024-10-01')

// 加 1 年
now.add(1, 'year').format('YYYY-MM-DD') // '2024-10-01'

// 减 1 个月
now.subtract(1, 'month').format('YYYY-MM-DD') // '2024-09-01'

// 加 7 天
now.add(7, 'day').format('YYYY-MM-DD') // '2024-10-08'

// 加 30 分钟
now.add(30, 'minute').format('HH:mm') // 假设原时间为 00:00 → '00:30'

5.时间比较(diff)

javascript 复制代码
const date1 = dayjs('2023-10-01')
const date2 = dayjs('2023-10-08')

// 计算相差的天数
date2.diff(date1, 'day') // 7

// 计算相差的小时数
date2.diff(date1, 'hour') // 168(7×24)

// 不指定单位时,默认返回毫秒数
date2.diff(date1) // 604800000(7×24×60×60×1000)

//获取开始和结束时间
const date = dayjs('2023-10-01 12:30:45')

date.startOf('day').format('HH:mm:ss') // '00:00:00'(当天开始)
date.endOf('month').format('YYYY-MM-DD') // '2023-10-31'(当月结束)
相关推荐
EnCi Zheng14 分钟前
M5-markconv自定义CSS样式指南 [特殊字符]
前端·css·python
kyriewen18 分钟前
你的网页慢,用户不说直接走——前端性能监控教你“读心术”
前端·性能优化·监控
广州华水科技18 分钟前
北斗GNSS变形监测在大坝安全监测中的应用与优势分析
前端
前端老石人30 分钟前
前端开发中的 URL 完全指南
开发语言·前端·javascript·css·html
CAE虚拟与现实30 分钟前
五一假期闲来无事,来个前段、后端的说明吧
前端·后端·vtk·three.js·前后端
Sarvartha41 分钟前
三目运算符
linux·服务器·前端
晓晨的博客1 小时前
ROS1录制的bag包转换为ROS2格式
前端·chrome
Wect1 小时前
LeetCode 72. 编辑距离:动态规划经典题解
前端·算法·typescript
donecoding1 小时前
别再让 pnpm 跟着 nvm 跑了!独立安装终极指南
前端·node.js·前端工程化
不可能的是1 小时前
从 /simplify 指令深挖 Claude Code 多 Agent 协同机制
javascript