首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript时间戳转为日期格式

JavaScript将时间戳转换为日期格式的多种转换方法

2025-12-08 09:42:33 作者：yingjuxia.com

在 JavaScript 中,将时间戳转换为日期格式是一个常见需求,可以通过原生 Date 对象、日期格式化方法或第三方库现,以下是详细的中文讲解,介绍多种转换方法,包含代码示例、使用场景和注意事项,需要的朋友可以参考下

1.时间戳简介

定义：时间戳是以 1970-01-01 00:00:00 UTC（Unix 纪元）为起点的秒数或毫秒数。
- 毫秒时间戳：如 1630454400000（毫秒，JavaScript 默认）。
- 秒时间戳：如 1630454400（需乘以 1000 转为毫秒）。
目标：将时间戳转换为可读格式，如 YYYY-MM-DD HH:mm:ss 或 2021-09-01 08:00:00。

2.转换方法

方法 1：使用原生Date对象

描述：通过 new Date(timestamp) 创建日期对象，再提取年月日等部分。
适用场景：简单转换，适合不需要复杂格式化的场景。
代码示例：

// 毫秒时间戳
const timestamp = 1630454400000; // 2021-09-01 00:00:00 UTC
const date = new Date(timestamp);

// 提取日期部分
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需 +1
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');

// 格式化
const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
console.log(formattedDate); // 输出: 2021-09-01 00:00:00

说明：
- padStart(2, '0') 确保月份、日期等为两位数。
- 使用 UTC 方法（如 getUTCFullYear）可避免时区影响：

const utcDate = `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}-${String(date.getUTCDate()).padStart(2, '0')}`;
console.log(utcDate); // 输出: 2021-09-01

方法 2：使用toLocaleString()

描述：Date 对象的 toLocaleString() 方法提供本地化格式，支持自定义选项。
适用场景：需要本地化日期格式或简单格式化。
代码示例：

const timestamp = 1630454400000;
const date = new Date(timestamp);

// 默认本地化格式
console.log(date.toLocaleString('zh-CN')); // 输出: 2021/9/1 08:00:00（中国时区）

// 自定义格式
const options = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
};
console.log(date.toLocaleString('zh-CN', options)); // 输出: 2021-09-01 08:00:00

说明：
- toLocaleString 根据地区（zh-CN、en-US）调整格式。
- options 参数支持灵活定制。
注意：格式因浏览器和地区不同而异。

方法 3：自定义格式化函数

描述：编写函数根据指定格式（如 YYYY-MM-DD）转换时间戳。
适用场景：需要统一、可控的日期格式。
代码示例：

function formatDate(timestamp, format = 'YYYY-MM-DD HH:mm:ss') {
    const date = new Date(timestamp);
    const map = {
        'YYYY': date.getFullYear(),
        'MM': String(date.getMonth() + 1).padStart(2, '0'),
        'DD': String(date.getDate()).padStart(2, '0'),
        'HH': String(date.getHours()).padStart(2, '0'),
        'mm': String(date.getMinutes()).padStart(2, '0'),
        'ss': String(date.getSeconds()).padStart(2, '0')
    };
    return format.replace(/YYYY|MM|DD|HH|mm|ss/g, match => map[match]);
}

const timestamp = 1630454400000;
console.log(formatDate(timestamp)); // 输出: 2021-09-01 00:00:00
console.log(formatDate(timestamp, 'YYYY/MM/DD')); // 输出: 2021/09/01

说明：
- 支持自定义格式，灵活性高。
- 可扩展支持更多格式（如 YYYY年MM月DD日）。

方法 4：使用 Moment.js 库

描述：Moment.js 是一个强大的日期处理库，支持丰富的格式化选项。
适用场景：复杂日期操作或需要兼容旧项目。
代码示例：

// HTML: <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
const timestamp = 1630454400000;
const formatted = moment(timestamp).format('YYYY-MM-DD HH:mm:ss');
console.log(formatted); // 输出: 2021-09-01 00:00:00

// 本地化
moment.locale('zh-cn');
console.log(moment(timestamp).format('LLL')); // 输出: 2021年9月1日 08:00

说明：
- 需要引入 Moment.js（CDN 或 NPM：npm install moment）。
- 支持多种格式和本地化，但库体积较大（约 70KB 压缩版）。
注意：Moment.js 已进入维护模式，推荐新项目使用 date-fns。

方法 5：使用 date-fns 库

描述：date-fns 是现代、轻量的日期处理库，模块化设计。
适用场景：新项目，需轻量且现代化的日期处理。
代码示例：

// NPM: npm install date-fns
import { format } from 'date-fns';

const timestamp = 1630454400000;
const formatted = format(new Date(timestamp), 'yyyy-MM-dd HH:mm:ss');
console.log(formatted); // 输出: 2021-09-01 00:00:00

说明：
- 按需导入，体积小（仅导入所需函数）。
- 支持丰富的格式化选项，类似 Moment.js 但更轻量。

方法 6：使用 jQuery（结合 DOM）

描述：结合 jQuery 从 DOM 获取时间戳并转换。
适用场景：项目已使用 jQuery，需处理用户输入的时间戳。
代码示例：

// HTML: <input type="text" id="timestamp" value="1630454400000"><button onclick="format()">转换</button>
$(document).ready(function() {
    window.format = function() {
        const timestamp = $('#timestamp').val();
        const date = new Date(Number(timestamp));
        const formatted = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        console.log(formatted); // 输出: 2021-09-01
    };
});

说明：需引入 jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

3.综合示例

以下是一个完整示例，展示多种转换方法：

<!DOCTYPE html>
<html>
<head>
    <title>时间戳转换</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/date-fns@2.30.0/dist/date-fns.min.js"></script>
    <style>
        body { font-family: Arial; padding: 20px; }
        input, button { margin: 10px; padding: 8px; }
    </style>
</head>
<body>
    <input type="text" id="timestamp" value="1630454400000" placeholder="输入时间戳">
    <button onclick="convert()">转换</button>
    <div id="output"></div>

    <script>
        function formatDate(timestamp, format = 'YYYY-MM-DD HH:mm:ss') {
            const date = new Date(timestamp);
            const map = {
                'YYYY': date.getFullYear(),
                'MM': String(date.getMonth() + 1).padStart(2, '0'),
                'DD': String(date.getDate()).padStart(2, '0'),
                'HH': String(date.getHours()).padStart(2, '0'),
                'mm': String(date.getMinutes()).padStart(2, '0'),
                'ss': String(date.getSeconds()).padStart(2, '0')
            };
            return format.replace(/YYYY|MM|DD|HH|mm|ss/g, match => map[match]);
        }

        function convert() {
            const timestamp = Number(document.getElementById('timestamp').value);
            if (isNaN(timestamp)) {
                alert('请输入有效时间戳！');
                return;
            }

            const date = new Date(timestamp);
            const output = `
                <p>原生 Date: ${formatDate(timestamp)}</p>
                <p>toLocaleString: ${date.toLocaleString('zh-CN')}</p>
                <p>Moment.js: ${moment(timestamp).format('YYYY-MM-DD HH:mm:ss')}</p>
                <p>date-fns: ${format(new Date(timestamp), 'yyyy-MM-dd HH:mm:ss')}</p>
            `;
            document.getElementById('output').innerHTML = output;
        }
    </script>
</body>
</html>

4.方法对比

方法	依赖	优点	缺点
原生 `Date`	无	无依赖，简单实现	需手动格式化，代码稍长
`toLocaleString()`	无	本地化支持，灵活选项	格式因浏览器/地区不同
自定义格式化	无	完全控制格式，灵活	需编写额外代码
Moment.js	Moment.js	功能强大，易用，支持本地化	体积大，维护模式
date-fns	date-fns	轻量，模块化，现代	需额外引入库
jQuery	jQuery	适合 jQuery 项目，简洁 DOM 操作	需引入 jQuery，增加依赖

5.注意事项

时间戳单位：
- JavaScript Date 接受毫秒时间戳，秒时间戳需乘以 1000：

const seconds = 1630454400;
const date = new Date(seconds * 1000);

时区处理：
- 默认使用本地时区，需用 UTC 方法（如 getUTCFullYear）处理 UTC 时间。
- 库如 Moment.js/date-fns 支持时区插件。
输入验证：
- 检查时间戳是否有效：

if (isNaN(timestamp) || timestamp < 0) {
    throw new Error('无效时间戳');
}

性能：
- 原生方法最轻量，适合简单场景。
- Moment.js 体积大，date-fns 更适合新项目。
浏览器兼容性：
- Date 和 toLocaleString 广泛支持。
- padStart 是 ES2017，IE 不支持，需 polyfill。
安全性：
- 用户输入时间戳需验证，防止异常值或恶意输入。

6.总结

首选方法：原生 Date + 自定义格式化，简单无依赖。
复杂场景：使用 date-fns（轻量现代）或 Moment.js（功能全面）。
jQuery 项目：结合 jQuery 处理 DOM 输入。
选择依据：
- 无依赖：原生 Date 或 toLocaleString。
- 复杂格式：自定义函数或 date-fns。
- 本地化：toLocaleString 或 Moment.js。
测试：验证不同时间戳（毫秒/秒）、时区和格式。

如果需要特定格式的实现（如 YYYY年MM月DD日）、时区处理，或其他 JavaScript 相关问题，请提供更多细节，我可以进一步优化回答！

以上就是JavaScript将时间戳转换为日期格式的多种转换方法的详细内容，更多关于JavaScript时间戳转为日期格式的资料请关注脚本之家其它相关文章！