JavaScript时间戳与时间相互转换的常用方法

 更新时间:2025年04月23日 09:44:20   作者:风格654  
这篇文章主要介绍了JavaScript时间戳与时间相互转换的常用方法,包括获取当前时间戳、时间戳转时间对象、时间戳转格式化字符串、时间字符串转时间戳等,还讨论了常见应用场景如计算时间差、倒计时和UTC与本地时间互转,需要的朋友可以参考下

前言

在 JavaScript 中,时间戳(Timestamp)通常指 Unix 时间戳,即从 1970年1月1日 00:00:00 UTC 到某个时间点经过的 毫秒数(注意:其他语言如 Python 可能使用秒,但 JavaScript 默认用毫秒)。以下是时间戳与时间格式相互转换的常用方法:

1. 获取当前时间戳

// 方法1:Date.now()
const timestamp1 = Date.now();

// 方法2:new Date().getTime()
const timestamp2 = new Date().getTime();

// 方法3:+new Date()
const timestamp3 = +new Date();

2. 时间戳 → 时间对象

用时间戳生成 Date 对象后,可提取具体时间信息:

const timestamp = 1696147200000; // 示例时间戳(2023-10-01 00:00:00 UTC)
const date = new Date(timestamp);

// 提取时间信息(本地时区)
const year = date.getFullYear();     // 2023
const month = date.getMonth() + 1;   // 10(注意月份从0开始,需+1)
const day = date.getDate();          // 1
const hours = date.getHours();       // 8(假设时区为UTC+8)
const minutes = date.getMinutes();   // 0
const seconds = date.getSeconds();   // 0

// 提取UTC时间信息
const utcHours = date.getUTCHours(); // 0(UTC时间)

3. 时间戳 → 格式化字符串

将 Date 对象格式化为易读的字符串:

// 方法1:使用内置方法(本地时区)
const localDateStr = date.toLocaleDateString(); // "2023/10/1"
const localTimeStr = date.toLocaleTimeString(); // "08:00:00"
const localStr = date.toLocaleString();        // "2023/10/1 08:00:00"

// 方法2:手动拼接(灵活定制)
const formattedTime = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hours}:${minutes}:${seconds}`;
// "2023-10-01 08:00:00"

// 方法3:转成ISO标准格式(UTC时间)
const isoString = date.toISOString(); // "2023-10-01T00:00:00.000Z"

4. 时间字符串 → 时间戳

将日期字符串解析为时间戳:

// 方法1:Date.parse()(需符合标准格式)
const timestamp4 = Date.parse('2023-10-01T00:00:00Z'); // 1696147200000(UTC时间)

// 方法2:new Date().getTime()
const dateStr = '2023-10-01 08:00:00'; // 假设本地时区为UTC+8
const timestamp5 = new Date(dateStr).getTime(); // 1696147200000(需注意时区问题)

// 注意:非标准格式可能导致解析失败,建议使用ISO格式(YYYY-MM-DDTHH:mm:ssZ)

5. 常见场景示例

场景1:计算时间差

const start = Date.now();
// ...执行某些操作
const end = Date.now();
const duration = end - start; // 毫秒数

场景2:倒计时功能

function formatCountdown(timestamp) {
  const now = Date.now();
  const diff = timestamp - now;
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  return `${days}天 ${hours}小时`;
}

场景3:UTC与本地时间互转

// UTC时间 → 本地时间
const utcDate = new Date('2023-10-01T00:00:00Z');
const localHours = utcDate.getHours(); // 本地时区的小时数(如UTC+8得到8)

// 本地时间 → UTC时间戳
const localDate = new Date(2023, 9, 1, 8, 0, 0); // 2023-10-01 08:00:00(本地时间)
const utcTimestamp = Date.UTC(2023, 9, 1, 0, 0, 0); // 1696147200000

注意事项

  • 时区问题

    • new Date() 和 Date.parse() 默认使用本地时区,而 toISOString() 和 Date.UTC() 使用 UTC 时区。

    • 跨时区应用建议统一使用 UTC 时间。

  • 时间戳单位

    • JavaScript 使用 毫秒,与其他语言(如 Python 的秒)转换时需注意单位换算:

      const seconds = Math.floor(timestamp / 1000); // 毫秒转秒
      const milliseconds = seconds * 1000;          // 秒转毫秒
  • 浏览器兼容性

    • 避免使用非标准日期格式(如 '2023-10-01' 不带时间部分),不同浏览器解析结果可能不一致。

总结 

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

相关文章

  • 超详细的javascript数组方法汇总

    超详细的javascript数组方法汇总

    这篇文章主要对javascript的数组方法进行了详细的汇总,包括了最常用的的数组方法,还有扩展方法,很全面,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • js利用div背景,做一个竖线的效果。

    js利用div背景,做一个竖线的效果。

    尝试了好多种css属性,总是无法达成目标。主要就是height这个属性,100%,对于ff似乎并不起什么作用,既然我将其父容器的高度也设置为100%,依然没有效果。这样的话,就无法显示出平铺的背景,想法也得不到实现。
    2008-11-11
  • js form表单input框限制20个字符,10个汉字代码实例

    js form表单input框限制20个字符,10个汉字代码实例

    这篇文章主要介绍了js form表单input框限制20个字符,10个汉字,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • websocket4.0+typescript 实现热更新的方法

    websocket4.0+typescript 实现热更新的方法

    这篇文章主要介绍了websocket4.0+typescript 实现热更新的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • JavaScript版本迷局介绍

    JavaScript版本迷局介绍

    有人说喜欢一个人,没必要了解她的过去,然而想读懂一个人,却需要了解她的过去。
    2011-01-01
  • js技巧--转义符"\"的妙用

    js技巧--转义符"\"的妙用

    js技巧--转义符"\"的妙用...
    2007-01-01
  • JavaScript异步回调的Promise模式封装实例

    JavaScript异步回调的Promise模式封装实例

    这篇文章主要介绍了JavaScript异步回调的Promise模式封装实例,本文通过分析easyjs的源码得出,实例均参考easyjs,需要的朋友可以参考下
    2014-06-06
  • 基于layPage插件实现两种分页方式浅析

    基于layPage插件实现两种分页方式浅析

    这篇文章主要为大家详细介绍了基于layPage插件实现两种分页方式 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • ES6入门教程之Iterator与for...of循环详解

    ES6入门教程之Iterator与for...of循环详解

    最近在学习ES6,刚刚看到Iterator和for...of循环这一章,所以想要跟大家略微分享一下,下面这篇文章主要给大家介绍了关于ES6入门学习中Iterator与for...of循环的相关资料,不足之处还望大家多多指正,需要的朋友们可以参考学习。
    2017-05-05
  • JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)

    JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)

    这篇文章主要介绍了仿微信(电话)联系人列表滑动字母索引实例,通过for循环进行判断,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
    2017-08-08

最新评论