JavaScript时间戳到指定日期格式转换教程：DD-MMM-YYYY-js教程-PHP中文网

JavaScript时间戳到指定日期格式转换教程：DD-MMM-YYYY

聖光之護

发布： 2025-11-08 19:32:01

原创

946人浏览过

javascript时间戳到指定日期格式转换教程：dd-mmm-yyyy

本教程详细介绍了如何使用纯JavaScript将标准时间戳字符串（如`2023-06-12T00:00:00`）转换为特定的日期格式`DD-MMM-YYYY`（例如`12-Jun-2023`）。我们将利用JavaScript内置的`Date`对象及其方法来提取日期各部分，并通过自定义月份缩写数组实现精确格式化，无需依赖外部库。

在前端开发中，将日期和时间数据从一种格式转换到另一种格式是常见的需求。特别是当后端返回标准时间戳字符串，而前端需要以用户友好的特定格式（如DD-MMM-YYYY）显示时，掌握其转换方法至关重要。本教程将引导您完成使用原生JavaScript实现这一转换的过程。

核心概念：JavaScript Date 对象

JavaScript的Date对象是处理日期和时间的核心。它提供了多种方法来创建日期实例、提取年、月、日等信息，并进行格式化。

转换步骤详解

我们将以将时间戳字符串 2023-06-12T00:00:00 转换为 12-Jun-2023 为例，分步说明实现过程。

立即学习“Java免费学习笔记（深入）”；

1. 创建 Date 对象

首先，需要将给定的时间戳字符串转换为JavaScript的Date对象。Date构造函数可以直接解析多种日期字符串格式，包括ISO 8601格式的时间戳。

const timestampString = "2023-06-12T00:00:00";
const dateObject = new Date(timestampString);

console.log(dateObject); // 输出：Mon Jun 12 2023 08:00:00 GMT+0800 (中国标准时间) 或类似结果

登录后复制

说明： new Date() 会根据您的本地时区解析时间。如果时间戳不包含时区信息，它通常会被视为UTC时间，然后转换为本地时间。

WowTo

用AI建立视频知识库

查看详情

2. 提取日期组件

从Date对象中提取所需的日期组件：日、月、年。

getDate(): 返回月份中的日期（1-31）。
getMonth(): 返回月份（0-11，其中0代表一月，11代表十二月）。
getFullYear(): 返回年份（四位数字）。

const day = dateObject.getDate();           // 12
const monthIndex = dateObject.getMonth();   // 5 (因为六月是第6个月，索引为5)
const year = dateObject.getFullYear();      // 2023

登录后复制

3. 格式化月份名称

目标格式是DD-MMM-YYYY，其中MMM代表月份的缩写（如Jan、Feb、Jun）。由于getMonth()返回的是0-11的数字索引，我们需要一个数组来映射这些索引到对应的月份缩写。

const monthAbbreviations = [
    "Jan", "Feb", "Mar", "Apr", "May", "Jun",
    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];

const monthAbbr = monthAbbreviations[monthIndex]; // "Jun"

登录后复制

4. 组合最终格式

将提取并格式化后的日、月缩写和年组合成最终的DD-MMM-YYYY格式字符串。

const formattedDate = `${day}-${monthAbbr}-${year}`; // "12-Jun-2023"

登录后复制

完整示例代码

将以上步骤整合，形成一个完整的JavaScript函数，用于将时间戳字符串转换为指定格式。

/**
 * 将时间戳字符串转换为 DD-MMM-YYYY 格式的日期字符串。
 *
 * @param {string} timestampString - ISO 8601 格式的时间戳字符串，例如 "2023-06-12T00:00:00"。
 * @returns {string} 格式化后的日期字符串，例如 "12-Jun-2023"。
 */
function convertTimestampToDDMMMYYYY(timestampString) {
    // 1. 定义月份缩写数组，getMonth() 返回的索引 (0-11) 与此数组对应
    const monthAbbreviations = [
        "Jan", "Feb", "Mar", "Apr", "May", "Jun",
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ];

    // 2. 将时间戳字符串转换为 Date 对象
    const date = new Date(timestampString);

    // 3. 检查日期对象是否有效
    if (isNaN(date.getTime())) {
        console.error("无效的时间戳字符串:", timestampString);
        return "Invalid Date";
    }

    // 4. 提取日期组件
    const day = date.getDate();
    const monthIndex = date.getMonth(); // 0-11
    const year = date.getFullYear();

    // 5. 获取格式化的月份缩写
    const monthAbbr = monthAbbreviations[monthIndex];

    // 6. 组合成最终的 DD-MMM-YYYY 格式
    return `${day}-${monthAbbr}-${year}`;
}

// 示例用法
const myTimestamp = "2023-06-12T00:00:00";
const formattedResult = convertTimestampToDDMMMYYYY(myTimestamp);
console.log(`原始时间戳: ${myTimestamp}`);
console.log(`格式化结果: ${formattedResult}`); // 输出: 格式化结果: 12-Jun-2023

const anotherTimestamp = "2024-01-01T10:30:00";
console.log(`格式化结果: ${convertTimestampToDDMMMYYYY(anotherTimestamp)}`); // 输出: 格式化结果: 1-Jan-2024

const invalidTimestamp = "invalid-date-string";
console.log(`格式化结果: ${convertTimestampToDDMMMYYYY(invalidTimestamp)}`); // 输出: 格式化结果: Invalid Date

登录后复制

注意事项

时区问题：new Date()在解析时间戳时会受到运行环境时区的影响。如果您的时间戳是UTC时间，但希望以UTC格式显示，或者需要处理不同时区之间的转换，则需要更复杂的逻辑，例如使用getUTCDay()、getUTCMonth()等方法，或者使用第三方库。本教程的方案适用于将时间戳转换为本地时区下的DD-MMM-YYYY格式。
月份索引：getMonth()方法返回的月份索引是从0开始的（0代表一月）。在自定义月份名称数组时，请务必保持一致。
错误处理：在实际应用中，应考虑输入的时间戳字符串可能无效的情况。在示例代码中已添加isNaN(date.getTime())来检查日期对象是否有效。
更复杂的格式化：对于更复杂的日期格式化需求（例如，带有前导零的日期、星期几、不同语言的月份名称等），或者需要处理大量的日期操作，建议考虑使用成熟的第三方日期处理库，如 date-fns 或 Moment.js（尽管 Moment.js 已不再推荐用于新项目，但仍被广泛使用）。这些库提供了更强大、更灵活的API来处理各种日期时间场景。

总结

通过本教程，您已经掌握了如何使用原生JavaScript的Date对象，结合自定义月份缩写数组，将标准时间戳字符串转换为DD-MMM-YYYY格式。这种方法简单、高效，且无需引入额外的库，非常适合处理常见的日期格式化需求。在实际开发中，理解Date对象的行为和其方法的正确使用是处理日期时间数据的关键。

以上就是JavaScript时间戳到指定日期格式转换教程：DD-MMM-YYYY的详细内容，更多请关注php中文网其它相关文章！