javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS实现时间戳功能

利用JavaScript实现时间戳功能的5种方法详解

作者:JialBro

在现代软件开发中,时间戳是记录时间的重要手段,在JavaScript中,通过不同的方法可以获取当前的时间戳,这篇文章主要介绍了利用JavaScript实现时间戳功能的5种方法,需要的朋友可以参考下

前言

在前端开发中,时间戳是连接日期显示与数据处理的核心桥梁,广泛应用于订单跟踪、日志记录、倒计时功能等场景。JavaScript通过Date对象提供了丰富的时间戳处理能力,但不同方法的精度差异、跨浏览器兼容性以及与后端的交互问题,常常成为开发中的"隐形坑"。本文将系统梳理时间戳的获取技巧、格式转换方案、核心知识体系及跨端适配策略,结合实战案例提供可直接落地的解决方案。

一、精准获取:5种JavaScript时间戳获取方法全解析

JavaScript中时间戳通常指"距离1970年1月1日00:00:00 GMT的毫秒数",共13位数字。获取时间戳的方法主要围绕Date对象展开,不同方法在精度、语法简洁度上各有侧重。

1.1 静态方法:Date.now()(推荐)

Date.now()是ES5引入的静态方法,无需实例化Date对象即可直接获取当前时间戳,语法简洁且性能优异,是获取当前时间戳的首选方案。

// 直接调用静态方法,返回13位毫秒级时间戳
const timestamp = Date.now();
console.log(timestamp); // 输出示例:1726789254321

优势:无需创建Date实例,减少内存开销;支持所有现代浏览器及IE9+。
适用场景:需要快速获取当前时间戳的场景,如按钮点击时间记录、接口请求时间戳参数。

1.2 实例方法:getTime()(兼容性首选)

getTime()Date对象的原型方法,需通过实例调用,返回当前实例对应的毫秒级时间戳,兼容性覆盖所有浏览器(包括IE6+)。

// 实例化Date对象后调用方法
const date = new Date();
const timestamp = date.getTime();
console.log(timestamp); // 输出示例:1726789301234

// 简化写法(不创建变量引用)
const timestampShort = new Date().getTime();

优势:兼容性无死角,精度与Date.now()一致;可通过自定义日期对象获取指定时间的时间戳。

适用场景:需要兼容老旧浏览器的项目,或需获取特定日期时间戳的场景。

1.3 实例方法:valueOf()(隐式转换底层实现)

valueOf()Object的通用方法,Date对象重写了该方法以返回毫秒级时间戳,与getTime()功能完全一致。

const timestamp = new Date().valueOf();
console.log(timestamp); // 输出示例:1726789356789

原理:当Date对象参与数值运算时,会自动调用valueOf()方法进行隐式转换,例如:

// 隐式调用valueOf()获取时间戳
const timestamp = +new Date();
console.log(timestamp); // 效果等同于new Date().valueOf()

1.4 静态方法:Date.parse()(慎用,精度有限)

Date.parse()可解析日期字符串或Date对象并返回时间戳,但存在毫秒级精度丢失的问题,返回值的后三位固定为000。

// 解析Date对象(精度丢失)
const timestamp1 = Date.parse(new Date());
console.log(timestamp1); // 输出示例:1726789400000(后三位为000)

// 解析日期字符串(支持格式有限)
const timestamp2 = Date.parse("2025-09-20 14:30:00");
console.log(timestamp2); // 输出示例:1753026600000

注意事项

1.5 类型转换:Number()(隐式转换的显式写法)

通过Number()函数将Date对象强制转换为数值类型,本质是调用valueOf()方法,精度与getTime()一致。

const date = new Date();
const timestamp = Number(date);
console.log(timestamp); // 输出示例:1726789452345

对比总结

方法语法简洁度精度兼容性推荐度
Date.now()★★★★★毫秒级IE9+★★★★★
new Date().getTime()★★★★☆毫秒级所有浏览器★★★★★
new Date().valueOf()★★★★☆毫秒级所有浏览器★★★★☆
Date.parse()★★★★☆秒级(丢失毫秒)所有浏览器★☆☆☆☆
Number(new Date())★★★☆☆毫秒级所有浏览器★★★☆☆

二、格式转换:时间戳与可读日期的双向转换技巧

前端开发中常需将后端返回的时间戳转换为用户可读的日期格式,或反之将用户输入的日期转换为时间戳存储。以下是覆盖主流需求的转换方案。

2.1 时间戳转可读日期:按需生成格式化字符串

根据业务场景不同,可读日期格式主要分为"本地化格式"和"标准统一格式"两类,前者适配不同地区显示习惯,后者用于报表、日志等统一展示场景。

方案1:生成本地化格式(如"2025/9/20 下午2:45")

利用toLocaleString()方法自动适配系统区域设置,无需手动拼接,适合面向多地区用户的产品。

/**
 * 时间戳转本地化日期时间(可自定义精度)
 * @param {Number} timestamp - 13位毫秒级时间戳
 * @param {Boolean} keepSeconds - 是否保留秒数
 * @returns {String} 本地化日期时间字符串
 */
function toLocalDateTime(timestamp, keepSeconds = true) {
  // 校验并转换时间戳类型(避免字符串类型导致的Invalid Date)
  const date = new Date(Number(timestamp));
  if (isNaN(date.getTime())) return "无效时间";
  
  let result = date.toLocaleString();
  // 移除秒数(如从"2025/9/20 14:45:30"变为"2025/9/20 14:45")
  if (!keepSeconds) {
    result = result.replace(/:\d{1,2}$/, "");
  }
  return result;
}

// 示例使用
console.log(toLocalDateTime(1726789530123)); // 输出:2025/9/20 14:45:30(根据系统区域调整)
console.log(toLocalDateTime(1726789530123, false)); // 输出:2025/9/20 14:45

方案2:生成标准统一格式(如"2025-09-20 14:45:30")

toLocaleString()存在浏览器兼容性差异(如IE返回"2025年9月20日"),需通过Date对象的获取方法手动拼接,确保跨浏览器一致性。

/**
 * 时间戳转标准格式(yyyy-MM-dd HH:mm:ss)
 * @param {Number} timestamp - 13位毫秒级时间戳
 * @returns {String} 标准日期时间字符串
 */
function toStandardDateTime(timestamp) {
  const date = new Date(Number(timestamp));
  if (isNaN(date.getTime())) return "无效时间";
  
  // 获取年、月、日(月份从0开始,需+1)
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 补零处理
  const day = String(date.getDate()).padStart(2, "0");
  
  // 获取时、分、秒
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  
  // 拼接格式
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// 示例使用
console.log(toStandardDateTime(1726789530123)); // 输出:2025-09-20 14:45:30

关键技巧:使用String.padStart(2, "0")确保月份、日期等字段始终为两位数,避免出现"2025-9-5"等不规范格式。

2.2 可读日期转时间戳:解析与校验并重

将用户输入或后端返回的日期字符串转换为时间戳时,需先处理格式差异并校验有效性,避免生成无效时间戳。

/**
 * 日期字符串转时间戳
 * @param {String} dateStr - 日期字符串(支持yyyy-MM-dd、yyyy/MM/dd HH:mm等格式)
 * @returns {Number|null} 13位毫秒级时间戳,无效时返回null
 */
function toTimestamp(dateStr) {
  // 统一格式:将"-"替换为"/",适配Date.parse()解析规则
  const normalizedStr = dateStr.replace(/-/g, "/");
  const timestamp = Date.parse(normalizedStr);
  
  // 校验有效性(Date.parse()失败时返回NaN)
  if (isNaN(timestamp)) {
    console.error("无效的日期字符串:", dateStr);
    return null;
  }
  
  // Date.parse()返回秒级时间戳(后三位为0),需补全毫秒(此处取0)
  return timestamp;
}

// 示例使用
console.log(toTimestamp("2025-09-20")); // 输出:1726742400000
console.log(toTimestamp("2025/09/20 14:45")); // 输出:1726789500000
console.log(toTimestamp("invalid-date")); // 输出:null(控制台报错)

三、核心知识:Date对象全方位解析

时间戳的处理依赖Date对象的方法体系,深入理解其构造函数、核心方法及输出格式,是解决复杂时间问题的基础。

3.1 Date对象构造函数详解

Date对象的构造函数支持多种参数形式,可灵活创建当前时间或指定时间的实例。

参数形式说明示例
无参数创建当前时间的Date实例new Date()
毫秒数(Number)根据时间戳创建实例(支持10位秒级或13位毫秒级)new Date(1726789530123)
日期字符串(String)解析字符串创建实例(推荐yyyy/MM/dd格式,兼容性优于yyyy-MM-ddnew Date("2025/09/20 14:45")
年,月,…(多个参数)按年、月(0-11)、日、时、分、秒、毫秒顺序创建实例new Date(2025, 8, 20, 14, 45, 30)

注意事项

3.2 常用Date对象方法分类

Date对象的方法按功能可分为"获取类"、“设置类"和"格式化类”,以下是开发中高频使用的方法清单。

(1)日期获取类方法(本地时间)

方法名说明返回值范围
getFullYear()获取四位数年份如2025
getMonth()获取月份(0-11)0-11
getDate()获取月份中的日期(1-31)1-31
getHours()获取小时(0-23)0-23
getMinutes()获取分钟(0-59)0-59
getSeconds()获取秒数(0-59)0-59
getMilliseconds()获取毫秒数(0-999)0-999
getTime()获取时间戳(毫秒级)13位数字

(2)格式化类方法(输出字符串)

方法名说明输出示例
toLocaleDateString()本地化日期字符串“2025/9/20”(中文环境)
toLocaleTimeString()本地化时间字符串“14:45:30”(中文环境)
toDateString()简化日期字符串(不含时间)“Fri Sep 20 2025”
toTimeString()简化时间字符串(含时区)“14:45:30 GMT+0800 (中国标准时间)”
toUTCString()UTC标准时间字符串“Fri, 20 Sep 2025 06:45:30 GMT”

3.3 时间戳的本质与内部表示

JavaScript中Date对象的内部本质就是时间戳——一个表示毫秒数的64位浮点数。这种表示方式的优势在于:

例如,计算两个日期之间的天数差:

/**
 * 计算两个日期的天数差
 * @param {Number} timestamp1 - 起始时间戳
 * @param {Number} timestamp2 - 结束时间戳
 * @returns {Number} 天数差(绝对值)
 */
function getDayDiff(timestamp1, timestamp2) {
  const msPerDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
  return Math.abs(Math.floor((timestamp2 - timestamp1) / msPerDay));
}

// 示例:计算2025-09-20与2025-09-15的天数差
const diff = getDayDiff(1726742400000, 1726224000000);
console.log(diff); // 输出:5

四、跨端适配:JavaScript与PHP时间戳转换及兼容性处理

前端与后端交互时,最常见的问题是时间戳位数差异(JS为13位,PHP为10位),同时跨浏览器的解析差异也需特别处理。

4.1 JS与PHP时间戳双向转换

PHP的时间戳为"距离1970年1月1日的秒数"(10位),而JS为毫秒数(13位),转换核心是乘以或除以1000。

(1)PHP时间戳(10位)转JS时间戳(13位)

/**
 * PHP时间戳转JS时间戳
 * @param {Number|String} phpTimestamp - 10位秒级时间戳
 * @returns {Number} 13位毫秒级时间戳
 */
function phpToJsTimestamp(phpTimestamp) {
  const num = Number(phpTimestamp);
  if (isNaN(num) || String(num).length !== 10) {
    console.error("无效的PHP时间戳:", phpTimestamp);
    return null;
  }
  return num * 1000;
}

// 示例:PHP返回的10位时间戳转JS可用格式
const jsTimestamp = phpToJsTimestamp("1726789530");
console.log(toStandardDateTime(jsTimestamp)); // 输出:2025-09-20 14:45:30

(2)JS时间戳(13位)转PHP时间戳(10位)

/**
 * JS时间戳转PHP时间戳
 * @param {Number} jsTimestamp - 13位毫秒级时间戳
 * @returns {Number} 10位秒级时间戳
 */
function jsToPhpTimestamp(jsTimestamp) {
  if (isNaN(jsTimestamp) || String(jsTimestamp).length !== 13) {
    console.error("无效的JS时间戳:", jsTimestamp);
    return null;
  }
  return Math.floor(jsTimestamp / 1000);
}

// 示例:JS时间戳转PHP可用格式
const phpTimestamp = jsToPhpTimestamp(1726789530123);
console.log(phpTimestamp); // 输出:1726789530

(3)实战场景:显示"多久前"

结合PHP时间戳转换,实现社交平台常见的"XX秒前/分钟前"功能:

/**
 * 计算距离当前时间的差值描述
 * @param {Number|String} phpTimestamp - PHP返回的10位时间戳
 * @returns {String} 差值描述(如"2分钟前")
 */
function formatTimeAgo(phpTimestamp) {
  const jsNow = Date.now();
  const jsTarget = phpToJsTimestamp(phpTimestamp);
  if (!jsTarget) return "未知时间";
  
  const secondsDiff = Math.floor((jsNow - jsTarget) / 1000);
  
  // 按秒、分钟、小时、天分级显示
  if (secondsDiff < 60) return `${secondsDiff}秒前`;
  if (secondsDiff < 3600) return `${Math.floor(secondsDiff / 60)}分钟前`;
  if (secondsDiff < 86400) return `${Math.floor(secondsDiff / 3600)}小时前`;
  return `${Math.floor(secondsDiff / 86400)}天前`;
}

// 示例使用
console.log(formatTimeAgo("1726789530")); // 输出:2分钟前(根据当前时间动态变化)

4.2 跨浏览器兼容性处理

不同浏览器对Date对象的解析存在差异,需针对性处理常见问题:

问题1:日期字符串解析差异

IE浏览器不支持yyyy-MM-dd格式的字符串解析,需统一转换为yyyy/MM/dd格式:

// 兼容处理:统一日期字符串格式
function normalizeDateStr(dateStr) {
  // 将"-"替换为"/",移除T分隔符(如ISO格式"2025-09-20T14:45")
  return dateStr.replace(/-/g, "/").replace("T", " ");
}

// 修复IE解析问题
const date = new Date(normalizeDateStr("2025-09-20T14:45"));

问题2:toLocaleString()格式不一致

不同浏览器的toLocaleString()输出格式不同,如需统一格式,建议使用本文2.1节的toStandardDateTime()方法手动拼接。

问题3:时间戳位数不规范

后端可能返回12位或其他位数的时间戳,需统一处理为13位:

/**
 * 标准化时间戳为13位毫秒级
 * @param {Number|String} timestamp - 任意位数的时间戳
 * @returns {Number|null} 13位时间戳
 */
function normalizeTimestamp(timestamp) {
  const str = String(timestamp).trim();
  if (!/^\d+$/.test(str)) return null;
  
  switch (str.length) {
    case 10: return Number(str) * 1000; // 10位→13位
    case 12: return Number(str.padEnd(13, "0")); // 12位→13位
    case 13: return Number(str); // 正常13位
    default: return null; // 不支持的位数
  }
}

// 示例使用
console.log(normalizeTimestamp("1726789530")); // 1726789530000(10位→13位)
console.log(normalizeTimestamp("172678953012")); // 1726789530120(12位→13位)

五、总结

时间戳处理是前端开发的基础技能,掌握正确的方法和避坑技巧能显著提升开发效率。以下是核心总结:

  1. 获取时间戳首选方案

    • 现代项目:优先使用Date.now(),语法简洁且性能优;
    • 老旧浏览器兼容:使用new Date().getTime(),覆盖所有IE版本。
  2. 格式转换原则

    • 本地化显示:使用toLocaleString(),适配用户区域设置;
    • 统一格式需求:手动拼接getFullYear()等方法的返回值,避免浏览器差异;
    • 必做校验:转换前通过isNaN(date.getTime())判断时间有效性。
  3. 跨端交互关键

    • 明确位数:JS用13位毫秒级,PHP用10位秒级,转换时务必乘除1000;
    • 格式统一:后端返回日期字符串时,优先使用yyyy/MM/dd HH:mm:ss格式。
  4. 性能与兼容性平衡

    • 避免频繁创建Date实例:可缓存当前时间戳减少性能开销;
    • 复杂场景推荐库:如dayjsmoment.js(轻量级优先选dayjs),封装了更完善的时间处理能力。

通过本文的方法与技巧,可轻松应对前端开发中90%以上的时间戳处理场景,从基础的格式转换到复杂的跨端适配,都能实现精准、高效的开发落地。

到此这篇关于利用JavaScript实现时间戳功能的5种方法的文章就介绍到这了,更多相关JS实现时间戳功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文