JavaScript日期格式化：从原始值到用户友好的字符串

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

• 🤖 洛可可白：个人主页

• 🔥 个人专栏：✅前端技术 ✅后端技术

• 🏠 个人博客：洛可可白博客

• 🐱 代码获取：bestwishes0203

• 📷 封面壁纸：洛可可白wallpaper

JavaScript日期格式化：从原始值到用户友好的字符串

在JavaScript中，日期和时间的处理是开发中常见的需求之一。为了在用户界面上显示日期和时间，或者在日志记录中保持一致的格式，我们需要将JavaScript的日期对象格式化为可读的字符串。本文将介绍JavaScript中的日期处理，特别是Date对象的使用，以及如何编写一个函数来格式化日期。

JavaScript中的Date对象

JavaScript的Date对象是一个内置对象，用于表示特定的日期和时间。它提供了多种方法来获取和设置日期和时间的各个部分，如年、月、日、小时、分钟和秒。

创建Date对象

你可以通过多种方式创建一个Date对象：

// 使用当前日期和时间创建Date对象
let now = new Date();

// 使用指定的年、月、日、时、分、秒创建Date对象
let specificDate = new Date(2024, 3, 28, 14, 30, 0);

获取日期和时间的组成部分

Date对象提供了如下方法来获取日期的各个部分：

let date = new Date();
console.log(date.getFullYear()); // 获取年份
console.log(date.getMonth() + 1); // 获取月份（注意月份从0开始）
console.log(date.getDate()); // 获取日
console.log(date.getHours()); // 获取小时
console.log(date.getMinutes()); // 获取分钟
console.log(date.getSeconds()); // 获取秒

格式化日期

在实际应用中，我们通常需要将Date对象格式化为特定的字符串格式。下面是一个formatDateTime函数的示例，它接受一个日期字符串或Date对象，并返回格式化后的日期字符串。

export const formatDateTime = (date) => {
    if (date === "" || !date) {
        return "";
    }
    var d = new Date(date);
    var y = d.getFullYear();
    var m = d.getMonth() + 1;
    var d = d.getDate();
    var h = d.getHours();
    var minute = d.getMinutes();
    var second = d.getSeconds();

    m = m < 10 ? ('0' + m) : m;
    d = d < 10 ? ('0' + d) : d;
    h = h < 10 ? ('0' + h) : h;
    minute = minute < 10 ? ('0' + minute) : minute;
    second = second < 10 ? ('0' + second) : second;

    return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
}

使用示例

假设我们有一个Date对象，我们想要将其格式化为YYYY-MM-DD HH:MM:SS的格式：

let now = new Date();
console.log(formatDateTime(now)); // 输出：2024-03-28 14:30:00

或者我们有一个日期字符串：

let dateString = "2024-03-28T14:30:00.000Z";
console.log(formatDateTime(dateString)); // 输出：2024-03-28 14:30:00

通过上述formatDateTime函数，我们可以轻松地将JavaScript的日期对象转换为用户友好的格式化字符串。这在开发Web应用程序时非常有用，尤其是在需要显示日期和时间信息的场合。

如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀

🎉 往期精彩回顾

入门教程：Windows搭建C语言和EasyX开发环境
CentOS系统下Docker的安装教程
Spring Boot单元测试全指南：使用Mockito和AssertJ
Yarn简介及Windows安装与使用指南
H5实现3D旋转照片墙教程
Element-Plus 实现动态渲染图标教程
MyBatis-Plus分页接口实现教程：Spring Boot中如何编写分页查询
Element-Plus下拉菜单边框去除教程
Web实现猜数字游戏：JavaScript DOM基础与实例教程
Web实现名言生成器：JavaScript DOM基础与实例教程
Web实现井字棋游戏：JavaScript DOM基础与实例教程
Web实现表格单选全选与反选操作：JavaScript DOM基础与实例教程
H5实现Web ECharts教程：轻松创建动态数据图表