简介
在JavaScript中转换时间戳是Web开发人员的基本技能。无论您是在处理API、数据库还是用户界面,您都会经常需要在Unix时间戳和人类可读日期之间进行转换。本教程将指导您了解需要知道的一切。
您将学到什么
- ✅ 获取当前时间戳
- ✅ 将时间戳转换为Date对象
- ✅ 将Date对象转换为时间戳
- ✅ 格式化时间戳以供显示
- ✅ 处理不同的时间戳精度
- ✅ 处理时区
- ✅ 常见陷阱及避免方法
前提条件
只需要基本的JavaScript知识。本教程不需要外部库(虽然我们会在最后提到一些流行的库)。
步骤1:获取当前时间戳
最简单的操作 - 将当前时间作为时间戳获取。
方法1:Date.now()(推荐)
JAVASCRIPT1// 获取毫秒级当前时间戳 2const timestamp = Date.now(); 3console.log(timestamp); 4// 输出:1704067200000(13位)
为什么使用这个?
- ✅ 最快的方法
- ✅ 无需创建Date对象
- ✅ 最常用
方法2:new Date().getTime()
JAVASCRIPT1// 创建Date对象并获取时间戳 2const timestamp = new Date().getTime(); 3console.log(timestamp); 4// 输出:1704067200000(13位)
何时使用?
- 当您已经有Date对象时
- 当您需要链式调用方法时
方法3:一元加号运算符
JAVASCRIPT1// 使用一元加号的简写 2const timestamp = +new Date(); 3console.log(timestamp); 4// 输出:1704067200000(13位)
何时使用?
- 代码高尔夫或简洁性很重要时
- 不推荐初学者使用(可读性较差)
获取秒级时间戳
JavaScript默认使用毫秒,但许多API使用秒:
JAVASCRIPT1// 获取秒级时间戳(10位) 2const timestampInSeconds = Math.floor(Date.now() / 1000); 3console.log(timestampInSeconds); 4// 输出:1704067200(10位) 5 6// 替代方法:使用parseInt 7const timestampSec = parseInt(Date.now() / 1000); 8console.log(timestampSec); 9// 输出:1704067200
步骤2:将时间戳转换为Date对象
将Unix时间戳转换为JavaScript Date对象。
基本转换
JAVASCRIPT1// 毫秒时间戳(13位) 2const timestamp = 1704067200000; 3const date = new Date(timestamp); 4 5console.log(date); 6// 输出:Mon Jan 01 2024 00:00:00 GMT+0000 (UTC) 7 8console.log(date.toISOString()); 9// 输出:2024-01-01T00:00:00.000Z
转换秒级时间戳
许多API返回秒级时间戳(10位),而不是毫秒:
JAVASCRIPT1// 秒级时间戳(10位)- 必须乘以1000! 2const timestampInSeconds = 1704067200; 3const date = new Date(timestampInSeconds * 1000); 4 5console.log(date.toISOString()); 6// 输出:2024-01-01T00:00:00.000Z
⚠️ 常见错误:
JAVASCRIPT1// ❌ 错误:直接使用秒级时间戳 2const wrongDate = new Date(1704067200); 3console.log(wrongDate.toISOString()); 4// 输出:1970-01-20T17:27:47.200Z(错误!) 5 6// ✅ 正确:乘以1000 7const correctDate = new Date(1704067200 * 1000); 8console.log(correctDate.toISOString()); 9// 输出:2024-01-01T00:00:00.000Z(正确!)
检测时间戳精度
自动检测时间戳是秒还是毫秒的辅助函数:
JAVASCRIPT1function createDateFromTimestamp(timestamp) { 2 // 如果时间戳有10位,则为秒 3 // 如果时间戳有13位,则为毫秒 4 const digitCount = timestamp.toString().length; 5 6 if (digitCount === 10) { 7 // 秒 - 乘以1000 8 return new Date(timestamp * 1000); 9 } else if (digitCount === 13) { 10 // 毫秒 - 直接使用 11 return new Date(timestamp); 12 } else { 13 throw new Error(`无效的时间戳:${timestamp}`); 14 } 15} 16 17// 使用方法 18const date1 = createDateFromTimestamp(1704067200); // 10位(秒) 19const date2 = createDateFromTimestamp(1704067200000); // 13位(毫秒) 20 21console.log(date1.toISOString()); // 2024-01-01T00:00:00.000Z 22console.log(date2.toISOString()); // 2024-01-01T00:00:00.000Z
步骤3:将Date对象转换为时间戳
将JavaScript Date对象转换回Unix时间戳。
从当前日期
JAVASCRIPT1const now = new Date(); 2 3// 获取毫秒时间戳 4const timestampMs = now.getTime(); 5console.log(timestampMs); // 1704067200000 6 7// 获取秒级时间戳 8const timestampSec = Math.floor(now.getTime() / 1000); 9console.log(timestampSec); // 1704067200
从特定日期字符串
JAVASCRIPT1// ISO 8601格式(推荐) 2const date1 = new Date('2024-01-01T00:00:00Z'); 3console.log(date1.getTime()); // 1704067200000 4 5// 不同的日期格式 6const date2 = new Date('January 1, 2024'); 7const date3 = new Date('01/01/2024'); 8const date4 = new Date('2024-01-01'); 9 10console.log(date2.getTime()); // 取决于本地时区 11console.log(date3.getTime()); // 取决于本地时区 12console.log(date4.getTime()); // 通常为本地时区的00:00:00
⚠️ 重要: 不同的日期字符串格式在时区方面表现不同!
从日期组件
JAVASCRIPT1// 从年、月、日等创建日期 2// 注意:月份从0开始索引(0 = 一月,11 = 十二月) 3const date = new Date(2024, 0, 1, 0, 0, 0); // 2024年1月1日 00:00:00 4const timestamp = date.getTime(); 5 6console.log(timestamp); // 本地时区时间戳 7 8// 对于UTC,使用Date.UTC() 9const utcTimestamp = Date.UTC(2024, 0, 1, 0, 0, 0); 10console.log(utcTimestamp); // 1704067200000(UTC)
步骤4:格式化时间戳
将时间戳转换为人类可读格式。
JavaScript内置方法
JAVASCRIPT1const date = new Date(1704067200000); 2 3// ISO 8601格式(最适合API) 4console.log(date.toISOString()); 5// 输出:"2024-01-01T00:00:00.000Z" 6 7// 特定区域设置的日期字符串 8console.log(date.toLocaleDateString()); 9// 输出:"1/1/2024"(美国)或"01/01/2024"(英国) 10 11// 特定区域设置的日期和时间 12console.log(date.toLocaleString()); 13// 输出:"1/1/2024, 12:00:00 AM" 14 15// 特定区域设置的时间 16console.log(date.toLocaleTimeString()); 17// 输出:"12:00:00 AM" 18 19// 完整日期字符串 20console.log(date.toDateString()); 21// 输出:"Mon Jan 01 2024" 22 23// UTC字符串 24console.log(date.toUTCString()); 25// 输出:"Mon, 01 Jan 2024 00:00:00 GMT"
自定义格式化
JAVASCRIPT1function formatTimestamp(timestamp, format = 'full') { 2 const date = new Date(timestamp); 3 4 const year = date.getFullYear(); 5 const month = String(date.getMonth() + 1).padStart(2, '0'); 6 const day = String(date.getDate()).padStart(2, '0'); 7 const hours = String(date.getHours()).padStart(2, '0'); 8 const minutes = String(date.getMinutes()).padStart(2, '0'); 9 const seconds = String(date.getSeconds()).padStart(2, '0'); 10 11 const formats = { 12 'full': `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`, 13 'date': `${year}-${month}-${day}`, 14 'time': `${hours}:${minutes}:${seconds}`, 15 'short': `${month}/${day}/${year}`, 16 'iso': date.toISOString() 17 }; 18 19 return formats[format] || formats.full; 20} 21 22// 使用方法 23const timestamp = 1704067200000; 24console.log(formatTimestamp(timestamp, 'full')); // "2024-01-01 00:00:00" 25console.log(formatTimestamp(timestamp, 'date')); // "2024-01-01" 26console.log(formatTimestamp(timestamp, 'time')); // "00:00:00" 27console.log(formatTimestamp(timestamp, 'short')); // "01/01/2024"
使用Intl.DateTimeFormat(现代方法)
JAVASCRIPT1const timestamp = 1704067200000; 2const date = new Date(timestamp); 3 4// 美式英语格式 5const usFormatter = new Intl.DateTimeFormat('zh-CN', { 6 year: 'numeric', 7 month: 'long', 8 day: 'numeric', 9 hour: '2-digit', 10 minute: '2-digit' 11}); 12console.log(usFormatter.format(date)); 13// 输出:"2024年1月1日 00:00" 14 15// 自定义格式 16const customFormatter = new Intl.DateTimeFormat('zh-CN', { 17 weekday: 'long', 18 year: 'numeric', 19 month: 'short', 20 day: 'numeric', 21 hour: '2-digit', 22 minute: '2-digit', 23 second: '2-digit', 24 timeZoneName: 'short' 25}); 26console.log(customFormatter.format(date)); 27// 输出:"2024年1月1日星期一 00:00:00 UTC"
步骤5:处理时区
处理不同的时区对于准确的时间戳转换至关重要。
UTC与本地时间
JAVASCRIPT1const timestamp = 1704067200000; // 2024年1月1日 00:00:00 UTC 2const date = new Date(timestamp); 3 4// 获取UTC组件 5console.log('UTC年份:', date.getUTCFullYear()); // 2024 6console.log('UTC月份:', date.getUTCMonth() + 1); // 1 7console.log('UTC日期:', date.getUTCDate()); // 1 8console.log('UTC小时:', date.getUTCHours()); // 0 9 10// 获取本地组件(取决于您的时区) 11console.log('本地年份:', date.getFullYear()); // 2024 12console.log('本地月份:', date.getMonth() + 1); // 1(或不同) 13console.log('本地日期:', date.getDate()); // 1(或不同) 14console.log('本地小时:', date.getHours()); // 0(或不同)
转换到特定时区
JAVASCRIPT1const timestamp = 1704067200000; 2const date = new Date(timestamp); 3 4// 使用Intl.DateTimeFormat在不同时区显示 5const timezones = ['America/New_York', 'Europe/London', 'Asia/Shanghai']; 6 7timezones.forEach(tz => { 8 const formatter = new Intl.DateTimeFormat('zh-CN', { 9 timeZone: tz, 10 year: 'numeric', 11 month: '2-digit', 12 day: '2-digit', 13 hour: '2-digit', 14 minute: '2-digit', 15 second: '2-digit', 16 timeZoneName: 'short' 17 }); 18 console.log(`${tz}:`, formatter.format(date)); 19}); 20 21// 输出: 22// America/New_York: 2023/12/31 19:00:00 EST 23// Europe/London: 2024/01/01 00:00:00 GMT 24// Asia/Shanghai: 2024/01/01 08:00:00 GMT+8
时区偏移
JAVASCRIPT1const date = new Date(); 2 3// 获取时区偏移(分钟) 4const offsetMinutes = date.getTimezoneOffset(); 5console.log('偏移(分钟):', offsetMinutes); // 例如,-480表示UTC+8 6 7// 转换为小时 8const offsetHours = -offsetMinutes / 60; 9console.log('偏移(小时):', offsetHours); // 例如,8表示UTC+8 10 11// 格式化偏移为字符串 12const sign = offsetHours >= 0 ? '+' : '-'; 13const hours = String(Math.abs(Math.floor(offsetHours))).padStart(2, '0'); 14const minutes = String(Math.abs((offsetHours % 1) * 60)).padStart(2, '0'); 15console.log(`UTC${sign}${hours}:${minutes}`); // 例如,"UTC+08:00"
步骤6:常见陷阱和解决方案
陷阱1:秒vs毫秒
JAVASCRIPT1// ❌ 错误:假设所有时间戳都是毫秒 2const wrongDate = new Date(1704067200); // 当作毫秒处理 3console.log(wrongDate.toISOString()); // 1970-01-20T17:27:47.200Z(错误!) 4 5// ✅ 正确:正确检查和转换 6const secondsTimestamp = 1704067200; 7const correctDate = new Date(secondsTimestamp * 1000); 8console.log(correctDate.toISOString()); // 2024-01-01T00:00:00.000Z(正确!)
陷阱2:月份从零开始索引
JAVASCRIPT1// ❌ 错误:对月份使用1-12 2const wrongDate = new Date(2024, 1, 1); // 创建2月1日,而不是1月1日 3console.log(wrongDate.toDateString()); // Thu Feb 01 2024 4 5// ✅ 正确:对月份使用0-11 6const correctDate = new Date(2024, 0, 1); // 创建1月1日 7console.log(correctDate.toDateString()); // Mon Jan 01 2024
陷阱3:日期字符串的时区问题
JAVASCRIPT1// 不同的字符串格式表现不同! 2 3// 带'Z'的ISO 8601 - 始终为UTC 4const utcDate = new Date('2024-01-01T00:00:00Z'); 5console.log(utcDate.toISOString()); // 2024-01-01T00:00:00.000Z 6 7// 不带'Z'的ISO 8601 - 当作本地时区处理 8const localDate = new Date('2024-01-01T00:00:00'); 9console.log(localDate.toISOString()); // 取决于您的时区 10 11// 仅日期格式 - 当作本地时区午夜处理 12const dateOnly = new Date('2024-01-01'); 13console.log(dateOnly.toISOString()); // 通常为本地午夜 14 15// ✅ 最佳实践:始终使用带'Z'的ISO 8601表示UTC 16const safeDate = new Date('2024-01-01T00:00:00.000Z');
陷阱4:无效日期
JAVASCRIPT1// 无效日期可能导致静默错误 2const invalidDate = new Date('不是日期'); 3console.log(invalidDate); // Invalid Date 4console.log(invalidDate.getTime()); // NaN 5 6// ✅ 最佳实践:始终验证 7function isValidDate(date) { 8 return date instanceof Date && !isNaN(date.getTime()); 9} 10 11const date1 = new Date('2024-01-01'); 12const date2 = new Date('invalid'); 13 14console.log(isValidDate(date1)); // true 15console.log(isValidDate(date2)); // false
步骤7:实际示例
示例1:显示"多久以前"格式
JAVASCRIPT1function timeAgo(timestamp) { 2 const now = Date.now(); 3 const secondsAgo = Math.floor((now - timestamp) / 1000); 4 5 if (secondsAgo < 60) { 6 return `${secondsAgo}秒前`; 7 } else if (secondsAgo < 3600) { 8 const minutes = Math.floor(secondsAgo / 60); 9 return `${minutes}分钟前`; 10 } else if (secondsAgo < 86400) { 11 const hours = Math.floor(secondsAgo / 3600); 12 return `${hours}小时前`; 13 } else { 14 const days = Math.floor(secondsAgo / 86400); 15 return `${days}天前`; 16 } 17} 18 19// 使用方法 20console.log(timeAgo(Date.now() - 30000)); // "30秒前" 21console.log(timeAgo(Date.now() - 300000)); // "5分钟前" 22console.log(timeAgo(Date.now() - 7200000)); // "2小时前" 23console.log(timeAgo(Date.now() - 172800000)); // "2天前"
示例2:API响应处理器
JAVASCRIPT1// 典型的带时间戳的API响应 2const apiResponse = { 3 created_at: 1704067200, // 秒 4 updated_at: 1704153600000, // 毫秒(混合精度!) 5 expires_at: "2024-01-10T00:00:00Z" // ISO 8601字符串 6}; 7 8// 将所有转换为Date对象 9function parseApiTimestamps(response) { 10 return { 11 created: new Date(response.created_at * 1000), // 转换秒 12 updated: new Date(response.updated_at), // 已经是毫秒 13 expires: new Date(response.expires_at) // 解析ISO字符串 14 }; 15} 16 17const dates = parseApiTimestamps(apiResponse); 18console.log('创建:', dates.created.toLocaleDateString()); 19console.log('更新:', dates.updated.toLocaleDateString()); 20console.log('过期:', dates.expires.toLocaleDateString());
示例3:日期范围验证器
JAVASCRIPT1function isWithinRange(timestamp, startDate, endDate) { 2 const date = new Date(timestamp); 3 const start = new Date(startDate); 4 const end = new Date(endDate); 5 6 return date >= start && date <= end; 7} 8 9// 使用方法 10const eventTimestamp = 1704067200000; // 2024年1月1日 11const rangeStart = '2024-01-01'; 12const rangeEnd = '2024-12-31'; 13 14console.log(isWithinRange(eventTimestamp, rangeStart, rangeEnd)); // true
用于高级用例的流行库
对于生产应用,请考虑这些库:
date-fns(推荐)
JAVASCRIPT1import { format, parseISO, formatDistance } from 'date-fns'; 2import { zhCN } from 'date-fns/locale'; 3 4// 格式化时间戳 5const timestamp = 1704067200000; 6const formatted = format(timestamp, 'PPP', { locale: zhCN }); 7console.log(formatted); // "2024年1月1日" 8 9// 多久以前 10const distance = formatDistance(timestamp, Date.now(), { 11 addSuffix: true, 12 locale: zhCN 13}); 14console.log(distance); // "2天前"
Luxon(现代、时区感知)
JAVASCRIPT1import { DateTime } from 'luxon'; 2 3// 从时间戳 4const dt = DateTime.fromMillis(1704067200000); 5console.log(dt.toISO()); // "2024-01-01T00:00:00.000Z" 6 7// 时区转换 8const shanghai = dt.setZone('Asia/Shanghai'); 9console.log(shanghai.toFormat('yyyy-MM-dd HH:mm:ss'));
总结
您已经学会了如何:
- ✅ 使用
Date.now()获取当前时间戳 - ✅ 将时间戳转换为Date对象
- ✅ 将Date对象转换回时间戳
- ✅ 格式化日期以供显示
- ✅ 处理不同的时间戳精度
- ✅ 处理时区
- ✅ 避免常见陷阱
相关工具
使用我们的免费工具练习所学内容:
- Unix时间戳转换器 - 交互式时间戳转换
- 当前时间戳 - 获取各种格式的当前时间
- JavaScript时间戳助手 - JavaScript特定工具
- 批量时间戳转换器 - 转换多个时间戳
下一步
最后更新:2025年1月