详解JavaScript时间格式化

什么是时间格式化

在编写前端代码中，经常需要将时间进行格式化展示。时间格式化可以把人类可读的时间转换成计算机可读的时间，或将计算机可读的时间转换成人类可读的时间格式。实现时间格式化可以让用户更易于理解，也方便程序后续处理。

JavaScript的Date对象

JavaScript内置了Date对象来处理日期与时间。Date对象可以获取当前时间、为日期进行计算以及将日期与时间转换为指定格式。

创建Date对象

可以使用new关键字和Date对象的构造函数来创建一个Date对象。构造函数可以接收多种格式的参数，例如：

// 不传参数，Date对象默认创建当前时间
var date1 = new Date();
console.log(date1);

// 传入指定时间，参数格式为[年,月,日,时,分,秒,毫秒]
var date2 = new Date(2021,3,10,15,30,0,0);
console.log(date2);

// 传入指定时间戳，单位为毫秒
var date3 = new Date(1618043400000);
console.log(date3);

Date对象常用方法

Date对象常用的方法包括：getFullYear()、getMonth()、getDate()、getDay()等等。这些方法可以帮我们获取一个Date对象的具体时间信息。

例如：

var date = new Date();
console.log(date.getFullYear()); // 获取当前年份
console.log(date.getMonth()); // 获取当前月份，从0开始计数
console.log(date.getDate()); // 获取日期
console.log(date.getDay()); // 获取星期，从0开始计数，0代表星期日，1代表星期一等等

JavaScript时间格式化实现

时间格式化的常用符号

在JavaScript中，时间格式化常用的符号包括：

符号	说明
yyyy	年份
MM	月份
dd	日期
HH	时
mm	分
ss	秒
SSS	毫秒

实现时间格式化

我们可以自己编写一个时间格式化函数，如下：

/**
 * 时间格式化函数
 * @param {Date} date Date对象
 * @param {string} fmt 时间格式化字符串
 * @return {string} 格式化后的时间字符串
 */
function formatDate(date, fmt){
    var o = {
        "M+" : date.getMonth()+1,                 //月份
        "d+" : date.getDate(),                    //日
        "H+" : date.getHours(),                   //小时
        "m+" : date.getMinutes(),                 //分
        "s+" : date.getSeconds(),                 //秒
        "q+" : Math.floor((date.getMonth()+3)/3), //季度
        "S"  : date.getMilliseconds()             //毫秒
    };
    if(/(y+)/.test(fmt)) {
        fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
    }
    for(var k in o) {
        if(new RegExp("("+ k +")").test(fmt)){
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        }
    }
    return fmt;
}

该函数中，参数date是Date对象，参数fmt是时间格式化字符串。函数首先定义了一个对象o来存放需要的时间信息，然后使用正则表达式替换fmt字符串中的符号，最后返回格式化后的时间字符串。

该函数支持的格式字符串例如：yyyy年MM月dd日 HH:mm:ss.SSS，可以通过以下方式进行调用：

var date = new Date();
var fmtDate = formatDate(date, "yyyy年MM月dd日 HH:mm:ss.SSS");
console.log(fmtDate);

该函数返回当前时间格式化后的字符串。例如：

2021年05月01日 16:32:09.203

同时，该函数还支持以多种方式创建Date对象，也可以根据需要进行修改以获取更精细的格式化信息。

时间格式化示例

以下是两个基于时间格式化函数的使用示例。

假设我们需要将一个时间戳转换为“2021-05-01 16:32:09”这样的格式：

var timestamp = 1619869929000;
var date = new Date(timestamp);
var fmtDate = formatDate(date, "yyyy-MM-dd HH:mm:ss");
console.log(fmtDate); // 2021-05-01 16:32:09

假设我们需要将一个时间戳转换为“2021年5月1日”这样的格式：

var timestamp = 1619869929000;
var date = new Date(timestamp);
var fmtDate = formatDate(date, "yyyy年M月d日");
console.log(fmtDate); // 2021年5月1日

结论

JavaScript的Date对象可以轻松地实现时间的格式化、转换等操作，方便程序设计和用户理解。同时也可以通过自定义函数来实现更加灵活的时间格式化。