JavaScript：理解时间戳 / 常用时间戳 日期 转换

一、JavaScript 中 理解时间戳

时间戳（timestamp）是指一个特定日期和时间的数字表示形式，通常是从某个特定时间点（比如1970年1月1日00:00:00 UTC）起的秒数或毫秒数。

时间戳通常用于记录事件的时间，以便在不同的系统、不同的时区之间进行标准化处理和比较。时间戳是计算机系统中常用的时间表示形式，也被广泛用于网络通信、数据库、日志记录等领域。

在编程中，我们可以使用各种编程语言中的库或函数来将当前时间转换成时间戳，或将时间戳转换为人类可读的日期和时间格式。无论在何种情况下，理解时间戳对于进行时间相关计算和数据处理非常重要。

在JavaScript中，我们可以使用Date对象来处理时间戳。

二、时间戳转换

2.1、将当前时间转换为时间戳

使用Date对象的getTime()方法或valueOf()方法

const currentTimeStamp = new Date().getTime(); // 获取当前时间的毫秒数

2.2、将时间戳转换为日期对象

使用Date对象的构造函数

const timeStamp = 1699337022425;
const date = new Date(timeStamp); // 根据时间戳创建日期对象

2.3、在进行时间比较和计算时

使用Date对象的各种方法

const date1 = new Date(2023, 11, 06); // "2023-11-06"
const date2 = new Date(2023, 11, 07); // "2023-11-07"
if (date1 < date2) {
  console.log('date1 is before date2'); // 输出："date1 is before date2"
}

需要注意的是，在JavaScript中处理时间时，时区是非常重要的因素。因为时间戳是以UTC时间为基准计算的，而且不同的时区可能有不同的偏移量，因此在进行时间处理时需要考虑时区问题，确保计算的准确性。

2.4、时间戳转换成日期时间字符串

var timestamp = 1699337022425;
var date = new Date(timestamp);
var dateTimeString = date.toLocaleString();
console.log(dateTimeString); // 2023/11/7 14:03:42
 

2.5、日期字符串转换成时间戳

var dateString = "2023-11-07";
var timestamp = Date.parse(dateString) / 1000;
console.log(timestamp); // 1699315200
 

2.6、日期时间字符串转换成时间戳

var dateTimeString = "2023-11-07 14:25:19";
var timestamp = Date.parse(dateTimeString) / 1000;
console.log(timestamp); // 1699338319

2.7、将时间戳转换为日期时间字符串

const timestamp = 1699337022425;
const date = new Date(timestamp);
const formattedDateTime = date.toLocaleString(); // 2023/11/7 14:03:42
console.log(formattedDateTime)

2.8、将时间戳转换为日期字符串

const timestamp = 1699337022425;
const date = new Date(timestamp);
const formattedDate = date.toLocaleDateString();
console.log(formattedDateTime)

2.9、将时间戳转换为时间字符串

const timestamp = 1595932800000;
const date = new Date(timestamp);
const formattedTime = date.toLocaleTimeString(); // "下午12:00:00"

注意：以上方法都是基于本地时区处理的。如果需要跨时区或者进行更复杂的时间转换，可以使用包含时区信息的第三方库，如moment.js。

三、时间戳转换日期时分秒

要将 JavaScript 的时间戳（单位为毫秒）转换为日期时分秒格式，可以使用 JavaScript 的 Date() 对象。以下是将时间戳转换为日期字符串的示例代码：

const timestamp = 1699337022425; // 时间戳（2023/11/7 14:03:42）
 
const date = new Date(timestamp); // 创建 Date 对象
 
const year = date.getFullYear(); // 获取年份
const month = date.getMonth() + 1; // 获取月份（返回值为0~11，需要加1）
const day = date.getDate(); // 获取日期
const hours = date.getHours(); // 获取小时
const minutes = date.getMinutes(); // 获取分钟
const seconds = date.getSeconds(); // 获取秒数
 
const dateString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 拼接日期字符串
console.log(dateString); // 输出：2023/11/7 14:03:42

在上面的代码中，首先创建了一个 Date 对象，并将时间戳作为参数传递给它。然后使用 Date 对象的各种方法获取年份、月份、日期、小时、分钟和秒数，并将它们拼接成一个日期字符串。

四、判断时间戳是否在今天

// 2.1、获取今天的日期
const today = new Date().setHours(0, 0, 0, 0) // 今天凌晨的时间戳
// 2.2、把时间戳转换为日期格式
const timestamp = 1699337022425// 时间戳
const date = new Date(timestamp).setHours(0, 0, 0, 0) // 转换为日期格式并设置时间为凌晨
// 2.3、比较日期是否相等
if (date === today) {
    console.log("时间戳在今天")
} else {
    console.log("时间戳不在今天")
}

五、五分钟内的显示空字符串，五分钟后的显示年月日时分

// 计算消息时间的展示
export function calcChatDateTime (timestamp) {
  console.log("105", timestamp)
  const now = new Date();
  const then = new Date(timestamp * 1000); // 将时间戳转换为Date对象
 
  if (then.getTime() > now.getTime() - 5 * 60 * 1000) {
    // 时间戳时间不超过当下时间五分钟
    return '';
  } else {
    // 时间戳时间超过五分钟
    const year = then.getFullYear();
    const month = then.getMonth() + 1; // 月份是从0开始的，所以需要加1
    const day = then.getDate();
    const hours = then.getHours();
    const minutes = then.getMinutes();
    const dateTime = `${year}-${month}-${day} ${hours}:${minutes}`;
    return dateTime;
  }
}

六、像微信一样展示消息时间

js写一个方法，
入参时间戳，
返回 时间戳时间处于当天并且不超过五分钟的返回空字符串，
处于当天时间超过五分钟的显示时分，
处于昨天的显示 昨天+时分，
处于一周内的并且晚过昨天的显示星期+时分，
处于今年并且晚过一周的显示月日+时分，
处于今年之前的返回年月日时分

其基本思路是：

首先将入参时间戳转为一个JavaScript Date对象

然后计算出今天、昨天、一周前的Date对象，用于后续的比较

按照优先级判断时间戳处于哪个时间范围内，返回对应的格式化字符串

其中，格式化函数formatTime用于将Date对象格式化为指定格式的字符串。

function formatTime(timestamp) {
  if (!timestamp) {
    return "";
  }
  const now = new Date();
  const time = new Date(timestamp * 1000);
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
  const yesterday = new Date(today);
  yesterday.setDate(yesterday.getDate() - 1);
  const lastWeek = new Date(today);
  lastWeek.setDate(lastWeek.getDate() - 7);
 
  if (time < today && time >= yesterday) {
    // 昨天
    return "昨天 " + formatTime(time, "hh:mm");
  } else if (time >= today && now - time < 300 * 1000) {
    // 当天不超过5分钟
    return "";
  } else if (time >= today) {
    // 当天超过5分钟
    return formatTime(time, "hh:mm");
  } else if (time >= lastWeek) {
    // 一周内，晚于昨天
    const weekDays = ["日", "一", "二", "三", "四", "五", "六"];
    return "星期" + weekDays[time.getDay()] + " " + formatTime(time, "hh:mm");
  } else if (time.getFullYear() === now.getFullYear()) {
    // 今年，晚于一周前
    return formatTime(time, "MM-dd hh:mm");
  } else {
    // 今年之前
    return formatTime(time, "yyyy-MM-dd hh:mm");
  }
}
 
function formatTime(date, fmt = "yyyy-MM-dd hh:mm:ss") {
  const o = {
    "M+": date.getMonth() + 1,
    "d+": date.getDate(),
    "h+": date.getHours(),
    "m+": date.getMinutes(),
    "s+": date.getSeconds(),
    "q+": Math.floor((date.getMonth() + 3) / 3),
    S: date.getMilliseconds(),
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      (date.getFullYear() + "").substr(4 - RegExp.$1.length)
    );
  }
  for (const k in o) {
    if (new RegExp("(" + k + ")").test(fmt)) {
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
      );
    }
  }
  return fmt;
}

测试成功

formatTime(1632194678) // "17:11"
formatTime(1632181000) // "昨天 13:50"
formatTime(1632030178) // "星期五 00:22"
formatTime(1614216761) // "02-25 15:46"
formatTime(1577808000) // "2020-01-01 08:00"
formatTime()            // ""

七、过程记录

记录一、理解Unix时间戳

Unix时间戳是一个表示从1970年1月1日00:00:00 UTC到当前时间的秒数的整数值。它通常被用作跨平台数据交换的时间表示方式。Unix时间戳可以由许多编程语言和应用程序轻松处理和转换，例如在Python中，可以使用time模块对Unix时间戳进行转换和操作。 

记录二、JavaScript 中时间戳都有多少位的

时间戳位数取决于采用哪种时间戳格式。在 JavaScript 中，常用的时间戳格式有两种：

秒级时间戳：从1970年1月1日00:00:00 UTC起至现在的秒数。时间戳位数为10位，例如：`1621396350`。

毫秒级时间戳：从1970年1月1日00:00:00 UTC起至现在的毫秒数。时间戳位数为13位，例如：`1621396350000`。

需要根据具体的需求选择合适的时间戳格式，通常情况下，使用毫秒级时间戳更为常见。

记录三、补零函数

function pad(num) {
  // 补0函数，当数字小于10时在前面加0
  return num < 10 ? '0' + num : num;
}

记录四、day.js

安装 | Day.js中文网

记录五、Moment.js

Moment.js 中文网

记录六、获取年、月，月份两位展示

var currentDate = new Date();
var year = currentDate.getFullYear(); // 获取年份
var month = ("0" + (currentDate.getMonth() + 1)).slice(-2); // 获取月份，并展示为两位数
 
console.log(year); // 输出年份
console.log(month); // 输出月份

记录七、获取上个月的年月

下一个同理

var currentDate = new Date();
var lastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
var year = lastMonth.getFullYear(); // 上个月的年份
var month = ("0" + (lastMonth.getMonth() + 1)).slice(-2); // 上个月的月份，并展示为两位数
 
console.log(year); // 输出年份
console.log(month); // 输出月份

记录八、YYYYMM获取上个月的年月

function getPreviousMonthFromYYYYMM(year, month) {
    
    // 确保月份是有效的
    if (month < 1 || month > 12) return "Invalid month";
 
    // 计算上个月的年份和月份
    var previousYear = year;
    var previousMonth = month - 1;
    
    // 如果月份小于1，表示上一年
    if (previousMonth === 0) {
        previousMonth = 12;
        previousYear--;
    }
    
    // 格式化输出为两位数
    previousMonth = ("0" + previousMonth).slice(-2);
    
    return {
        year: previousYear,
        month: previousMonth
    }
}

记录九、YYYYMM获取下个月的年月 

function getNextMonthFromYYYYMM(year, month) {
    
    // 确保月份是有效的
    if (month < 1 || month > 12) return "Invalid month";
 
    // 计算下个月的年份和月份
    var nextYear = year;
    var nextMonth = month + 1;
    
    // 如果月份大于12，表示下一年
    if (nextMonth === 13) {
        nextMonth = 1;
        nextYear++;
    }
    
    // 格式化输出为两位数
    nextMonth = ("0" + nextMonth).slice(-2);
    
    return {
        year: nextYear,
        month: nextMonth
    }
}
 
console.log(getNextMonthFromYYYYMM("202301")); // 输出 "202302"

记录十、获取今天是周几

// 获取当前日期  
var today = new Date();  
  
// 获取今天是周几（0-6，其中0代表星期日）  
var dayOfWeek = today.getDay();  
  
// 创建一个包含星期名称的数组  
var weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];  
  
// 输出结果  
console.log("今天是: " + weekdays[dayOfWeek]);

记录十一、获取本月1号是周几

// 获取当前日期  
var today = new Date();  
  
// 设置日期为本月的第一天  
var firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);  
  
// 获取当月1号是星期几（0-6，其中0代表星期日）  
var dayOfWeek = firstDayOfMonth.getDay();  
  
// 创建一个包含星期名称的数组  
var weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];  
  
// 输出结果  
console.log("本月1号是: " + weekdays[dayOfWeek]);

记录十二、js获取今天是几号

// 获取当前日期  
var today = new Date();  
  
// 获取今天是几号  
var dayOfMonth = today.getDate();  
  
// 输出结果  
console.log("今天是: " + dayOfMonth + "号");

记录十三、js获取本月有几天

// 获取当前日期  
var today = new Date();  
  
// 获取当前年份和月份  
var year = today.getFullYear();  
var month = today.getMonth();  
  
// 设置下一个月的第一天  
var nextMonthFirstDay = new Date(year, month + 1, 1);  
  
// 获取本月最后一天的日期（下个月的第一天减去一天）  
var lastDayOfMonth = new Date(nextMonthFirstDay - 1).getDate();  
  
// 输出结果  
console.log("本月有: " + lastDayOfMonth + " 天");

有了记录十、记录十一、记录十二、记录十三，就可以实现一个简单的日历了

 

八、欢迎交流指正

九、参考链接

element：日历 / 使用记录_element-plus calendar first-day-of-week-CSDN博客