秒数转换为易读的天、时、分、秒格式_秒转换成时间格式-CSDN博客

本文链接：https://blog.csdn.net/zhangbaiming_/article/details/140962312

在很多开发场景中，后台接口返回的数据通常是以秒为单位的时长（例如：320000秒）。在前端展示时，我们通常希望将这些秒数转换成更易读的时间格式，像是“天:小时:分钟:秒”的形式（例如：03天16小时53分20秒）。本文将详细介绍如何通过封装一个函数，将秒数转换为这种易于理解的时长格式，并在此基础上进行优化和增强。

1、功能需求

我们需要一个函数，该函数接收秒数作为输入，并将其转换为“天、小时、分钟、秒”格式，确保：

当秒数较大时（例如几天几小时），可以以天为单位显示。
当秒数较小时，应该仅显示小时、分钟和秒。
时间格式应包含必要的零填充（例如：03天、09小时等）。

2、基础实现

我们先来看一个简单的实现，它将秒数转换为天、时、分、秒格式。

const dayTime = (seconds) => {
    let second = parseInt(seconds) % 60;  // 获取秒数
    let min = parseInt(seconds / 60) % 60; // 获取分钟数
    let hour = parseInt(seconds / 3600) % 24; // 获取小时数
    let day = parseInt(seconds / 86400); // 获取天数，86400 秒为一天

    // 初始结果为秒数
    let result = second + "秒";

    if (seconds) {
        // 处理秒数，若小于10补零
        second = (second >= 0 && second < 10) ? '0' + second : second;
        result = second + "秒";
    }
    if (min) {
        // 处理分钟数，若小于10补零
        min = (min >= 0 && min < 10) ? '0' + min : min;
        result = min + "分" + second + "秒";
    }
    if (hour) {
        // 处理小时数，若小于10补零
        hour = (hour >= 0 && hour < 10) ? '0' + hour : hour;
        result = hour + "小时" + min + "分" + second + "秒";
    }
    if (day) {
        // 处理天数，若小于10补零
        day = (day >= 0 && day < 10) ? '0' + day : day;
        result = day + "天" + hour + "小时" + min + "分" + second + "秒";
    }
    return result;
}

// 测试
let time = dayTime(320000);
console.log(time);  // 输出: 03天16小时53分20秒

3、代码解析

获取秒数、分钟数、小时数和天数：
- 通过 parseInt(seconds) % 60 获取剩余的秒数。
- 通过 parseInt(seconds / 60) % 60 获取分钟数，seconds / 60 是将秒数转为分钟，再对60取余。
- 通过 parseInt(seconds / 3600) % 24 获取小时数，seconds / 3600 是将秒数转为小时，再对24取余（因为24小时为一天）。
- 通过 parseInt(seconds / 86400) 获取天数，86400 是一天的秒数（24小时 × 60分钟 × 60秒）。
格式化输出：
- 对秒、分钟、小时、天数进行条件判断，如果数值小于10，则在前面补零，以确保格式一致（例如：03天、09小时等）。
- 拼接最终结果时，每一层格式都会覆盖上一层，直到拼接出完整的“天、时、分、秒”格式。

4、优化与增强

虽然上述函数可以实现基本功能，但在一些情况下可能需要进一步优化，特别是针对更复杂的需求或大数据量的处理。以下是几个优化方向：

1. 处理无效输入

如果传入的秒数是负数或者无效值（如非数字），我们应返回一个默认值（例如："00天00小时00分00秒"）。可以通过简单的检查来实现这一点。

2. 增强的格式处理

为确保用户体验，可能需要在某些情况下忽略不必要的时间单位（例如，如果天数为0，则不显示天数）。

3. 提高性能

对于大量数据的处理，虽然当前的代码已经非常简单，但可以通过简化计算方式来进一步提高性能。例如，避免重复的 parseInt 操作，减少不必要的计算。

4. 更简洁的补零处理

可以使用 String.prototype.padStart() 方法来简化补零逻辑，代码会更加简洁且可读性更强。

改进后的版本

const dayTime = (seconds) => {
    // 输入校验
    if (isNaN(seconds) || seconds < 0) {
        return "00天00小时00分00秒"; // 无效输入返回默认值
    }

    // 计算天、小时、分钟、秒
    let second = seconds % 60;
    let min = Math.floor(seconds / 60) % 60;
    let hour = Math.floor(seconds / 3600) % 24;
    let day = Math.floor(seconds / 86400);

    // 格式化输出：使用 padStart 来补零
    second = second.toString().padStart(2, '0');
    min = min.toString().padStart(2, '0');
    hour = hour.toString().padStart(2, '0');
    day = day.toString().padStart(2, '0');

    // 拼接结果
    let result = '';
    if (day > 0) result += day + "天";
    if (hour > 0 || day > 0) result += hour + "小时";
    if (min > 0 || hour > 0 || day > 0) result += min + "分";
    result += second + "秒"; // 秒数始终显示

    return result;
}

// 测试
console.log(dayTime(320000));  // 03天16小时53分20秒
console.log(dayTime(86400));   // 01天00小时00分00秒
console.log(dayTime(3600));    // 01小时00分00秒
console.log(dayTime(150));     // 02分30秒
console.log(dayTime(-500));    // 00天00小时00分00秒 (无效输入)
console.log(dayTime("abc"));   // 00天00小时00分00秒 (无效输入)

5、代码优化点：

输入校验：加入了对非数字或者负数的秒数的检查，避免无效输入导致错误的输出。
性能提升：通过 Math.floor() 代替了多次 parseInt() 操作，简化了计算。
简化补零逻辑：使用 padStart() 方法简化了补零操作，使代码更加简洁易读。
灵活的格式：根据实际情况，如果天、小时、分钟数为0，则不显示该单位，保持输出格式的简洁性。

6、应用场景

该函数非常适合用于以下场景：

计时器：比如在线比赛的计时，任务执行时长的展示等。
视频播放时长：展示视频已播放时间。
日志或监控系统：展示长时间运行任务的持续时长。
时间统计：例如在管理系统中，展示某个任务的总时长。

7、总结

通过本文中的封装，我们能够轻松将秒数转换为易读的天、时、分、秒格式。我们不仅处理了秒数的基本转换，还考虑了输入校验、格式优化和性能提升等方面。无论是短时任务还是长时间运行的任务，用户都能直观地看到准确且友好的时间格式。这种方式可以应用于多个开发场景，如计时器、时长统计等，有助于提升用户体验和代码可维护性。