【React实战技巧】——将数据库返回的时间转换为几分钟前、几小时前、几天前……

目录

一、几个时间相关的概念：

二、明确数据库返回的时间格式：

三、时间处理函数代码（每个步骤均有详解）：

1、先在utils文件夹下创建一个js文件time.js。

2、在time.js中抒写如下代码：

3、在需要使用时间处理函数的文件下，导入time文件就可以正常使用了：

---

在进行时间转换前，我们需要先了解几个关于时间的概念，这可以更好的帮我们理解进行时间计算时的时差问题。

一、几个时间相关的概念：

GMT时间：Greenwich Mean Time，格林尼治平时，又称格林尼治平均时间或格林尼治标准时间。是指位于英国伦敦郊区的皇家格林尼治天文台的标准时间。

GMT存在较大误差，因此现在已不再被作为标准时间使用。现在的标准时间，是由原子钟报时的协调世界时（UTC）

UTC时间：Universal Time Coordinated，中文名称：世界标准时间或世界协调时。

UTC时间可以理解为全世界都公用的一个时间。它实际上反映了一种约定，即为全世界所认可的一个统一时间，而不是某特定地区的时间。

中国人常用的北京时间比UTC时间快8个小时。也即UTC时间凌晨0点时，北京时间已经是早上8点，这就是为啥全世界人往往不直接用UTC时间计时原因。

CST时间：China Standard Time，即中国标准时间。在时区划分上，属东八区，比协调世界时早8小时，记为UTC+8。

UNIX时间戳（timestamp）：计算机中的UNIX时间戳，是以GMT/UTC时间1970-01-01T00:00:00为起点，到当前具体时间的秒数(不考虑闰秒)。这样做的目的，主要是通过“整数计算”来简化计算机对时间操作的复杂度。 

二、明确数据库返回的时间格式：

我在往数据库中添加时间时，使用的是时间戳。这里数据库返回的时间格式是："2024-03-25T02:30:19.246Z"。

三、时间处理函数代码（每个步骤均有详解）：

1、先在utils文件夹下创建一个js文件time.js。

2、在time.js中抒写如下代码：

export default function time(UTCtiem) {
    // 1、将数据库中存储的ISO 8601格式的时间字符串"2024-03-25T10:30:19.246Z"
    //    转换成如下格式的utc时间（但与发布时的本地时间存在8小时时差）：2024-03-25 01:02:19
    var T_pos = UTCtiem.indexOf('T'); 
    var Z_pos = UTCtiem.indexOf('Z');  
    
    // 1）是每条数据发布的年月日
    var year_month_day = UTCtiem.substr(0, T_pos); // 2024-03-25

    // 2）是每条数据的发布时分秒，但从ISO 8601时间字符串转换为正常时间，默认会按照utc时间转化，所以和本地时间存在8小时时差
    var hour_minute_second = UTCtiem.substr(T_pos + 1, Z_pos - T_pos - 1); // 01:02:19.246

    // 3）通过对字符串的处理，修正8小时时差
    let hour1 =parseInt( hour_minute_second .split(':')[0])+8  // 补全8小时的时差
    hour_minute_second =hour_minute_second.replace(hour_minute_second .split(':')[0],hour1) // 重新拼接时分秒，就是本地时间了，09:02:19.246
    var new_datetime = year_month_day + " " + hour_minute_second;  //  2024-03-25 01:02:19.246 这时是发布数据的本地时间

    // 2、将发布的本地时间格式化：Mon Mar 25 2024 09:02:19 GMT+0800 (中国标准时间)
    var dateTime = new Date(new_datetime);

     // 1）将发布数据的本地时间转换回时间戳
    var no1new = dateTime.valueOf();  
    
    // 3、以下是获取发布时间的年月日 时分秒信息
    var year = dateTime.getFullYear();
    var month = dateTime.getMonth() + 1;
    var day = dateTime.getDate();
    var hour = dateTime.getHours();
    var minute = dateTime.getMinutes();
    var second = dateTime.getSeconds();
    // 4、获取当前时间戳
    var now = +Date.now();  // 获取当前时间戳
    // var now_new = now.valueOf();  //typescript转换写法

    var milliseconds = 0;
    var timeSpanStr;
    milliseconds = now - no1new;  // 用当前时间的时间戳-发布时间的时间戳

    if (milliseconds <= 1000 * 60 * 1) {
        timeSpanStr = '刚刚';
    }
    else if (1000 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60) {
        timeSpanStr = Math.round((milliseconds / (1000 * 60))) + '分钟前';
    }
    else if (1000 * 60 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24) {
        timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60)) + '小时前';
    }
    else if (1000 * 60 * 60 * 24 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24 * 15) {
        timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60 * 24)) + '天前';
    }
    else if (milliseconds > 1000 * 60 * 60 * 24 * 15 && year === now.getFullYear()) {
        timeSpanStr = month + '-' + day + ' ' + hour + ':' + minute;
    } else {
        timeSpanStr = year + '-' + month + '-' + day + ' ' + hour + ':' + minute;
    }
    return timeSpanStr;

}

3、在需要使用时间处理函数的文件下，导入time文件就可以正常使用了：

import changetime from '../utils/time'  // 注意自己的文件路径
let times = changetime('2024-03-16T10:05:15.854Z')
console.log('changetime',times);