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'(当月结束)
相关推荐
IT_陈寒1 小时前
JavaScript的this坑人实录,这次我真的记下来了
前端·人工智能·后端
开开心心就好2 小时前
音频降噪剪辑工具,音量裁剪一键处理
运维·服务器·前端·spring·ocr·音视频·1024程序员节
螺丝钉tina4 小时前
[Playwright] [02]常用命令与调试:Debug UI、Mode和 Trace Viewer
开发语言·javascript·测试工具·ui·自动化
PedroQue994 小时前
0.8.2 新增 backFallback 配置,无 tabbar 页返回无忧
前端·uni-app
淡漠的蓝精灵4 小时前
web.py:一个简单到极致的 Python Web 框架
开发语言·前端·python·其他
开开心心就好5 小时前
竖式除法出题工具,整除余数混合模式
运维·服务器·前端·javascript·ocr·perl·1024程序员节
起个名字费劲死了5 小时前
Halcon学习一:骰子识别
前端·python·学习
大江东去浪淘尽千古风流人物5 小时前
【HexVIO】DSP卸载双目惯性VIO:Hexagon向量化前端与单帧融合调度深度解析
前端·状态模式·slam·dsp·vio·hexagon·移动端加速
এ慕ོ冬℘゜5 小时前
JS 事件循环、宏任务微任务:单线程底层原理 + 执行顺序
开发语言·javascript·ecmascript
其实防守也摸鱼5 小时前
Chrome 扩展安全攻防实录:从攻击面到防御实践
开发语言·前端·网络·chrome·安全·web安全·php