在前端开发中，日期时间的格式化处理是一个常见且重要的需求。不同的业务场景往往需要不同的日期展示格式，而我们从后端获取的日期数据格式也可能多种多样。今天我要分享的是一款实用的 JavaScript 日期格式化过滤器，它能够轻松应对多种日期格式转换需求。

需求分析

在实际项目中，我们通常会遇到以下几种日期处理场景：

1. 将数据库返回的数字字符串日期（如 "20180215125959"）转换为 JavaScript 的 Date 对象
2. 将 Date 对象按照指定格式（如 "yyyy-MM-dd hh:mm:ss"）转换为字符串
3. 直接将数据库的数字字符串日期转换为指定格式的字符串

针对这些需求，我设计了一个名为formatAllDate的通用函数，通过不同的类型参数来处理各种转换场景。

实现方案

下面是完整的实现代码，我会逐部分进行解析：

// 日期格式化过滤器
// 当formatDateType=1时候，将数据库得到的时间字符串改为date类型 
// 示例: (20180215125959|formatAllDate(1))
formatAllDate(param1, DateType, param2) {
    // 处理空值或'0'的情况
    if (!param1 || param1 === '0') {
        return '';
    }
    
    // 类型1: 数字字符串转Date对象
    if (DateType === 1) {
        let year = param1.substr(0, 4);
        let month = param1.substr(4, 2);
        let day = param1.substr(6, 2);
        let hour = 0, minute = 0, second = 0;
        
        // 处理包含时分秒的情况
        if (param1.length > 8) {
            hour = param1.substr(8, 2);
            minute = param1.substr(10, 2);
            second = param1.substr(12, 2);
        }
        
        // 创建并设置Date对象
        let date = new Date();
        date.setFullYear(year, month - 1, day);  // 月份需要减1，因为JavaScript月份从0开始
        date.setHours(hour, minute, second);
        return date;
    } 
    // 类型2: Date对象按指定格式输出
    else if (DateType === 2) {
        // 用法示例: (date | formatAllDate(2, 'yyyy-MM-dd hh:mm:ss'))
        let date = new Date(param1);
        let o = {
            'M+': date.getMonth() + 1, // 月份
            'd+': date.getDate(),      // 日
            'h+': date.getHours(),     // 小时
            'm+': date.getMinutes(),   // 分
            's+': date.getSeconds(),   // 秒
        };
        
        // 处理年份
        if (/(y+)/.test(param2)) {
            param2 = param2.replace(RegExp.$1, 
                (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        
        // 处理月、日、时、分、秒
        for (let k in o) {
            if (new RegExp('(' + k + ')').test(param2)) {
                param2 = param2.replace(RegExp.$1, 
                    (RegExp.$1.length === 1) ? (o[k]) : 
                    (('00' + o[k]).substr(('' + o[k]).length)));
            }
        }
        return param2;
    } 
    // 类型3: 数字字符串直接转指定格式
    else if (DateType === 3) {
        // 示例: 将'20180101121212'转换为'YYYY-MM-dd hh:mm:ss'
        let year = param1.substr(0, 4);
        let month = param1.substr(4, 2);
        let day = param1.substr(6, 2);
        let hour = 0, minute = 0, second = 0;
        
        if (param1.length > 8) {
            hour = param1.substr(8, 2);
            minute = param1.substr(10, 2);
            second = param1.substr(12, 2);
        }
        
        // 先转换为Date对象
        let date = new Date();
        date.setFullYear(year, month - 1, day);
        date.setHours(hour, minute, second);
        
        // 再按指定格式转换
        let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds(),
        };
        
        if (/(y+)/.test(param2)) {
            param2 = param2.replace(RegExp.$1, 
                (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        
        for (let k in o) {
            if (new RegExp('(' + k + ')').test(param2)) {
                param2 = param2.replace(RegExp.$1, 
                    (RegExp.$1.length === 1) ? (o[k]) : 
                    (('00' + o[k]).substr(('' + o[k]).length)));
            }
        }
        return param2;
    } else {
        return '';
    }
}

功能解析

这个日期格式化过滤器主要通过三个类型参数来实现不同的功能：

1. 类型 1（DateType=1）：字符串转 Date 对象

   • 输入：数据库格式的数字字符串，如 "20180215125959" 或 "20180215"
   • 处理：解析字符串中的年、月、日、时、分、秒信息
   • 输出：JavaScript 的 Date 对象

2. 类型 2（DateType=2）：Date 对象转指定格式字符串

   • 输入：Date 对象和格式字符串（如 "yyyy-MM-dd hh:mm:ss"）
   • 处理：根据格式字符串中的占位符进行替换
   • 输出：格式化后的日期字符串

3. 类型 3（DateType=3）：字符串直接转指定格式

   • 输入：数据库格式的数字字符串和格式字符串
   • 处理：先将字符串转为 Date 对象，再按指定格式转换
   • 输出：格式化后的日期字符串

使用示例

1. 将数字字符串转为 Date 对象：

formatAllDate("20180215125959", 1);
// 返回: Mon Feb 15 2018 12:59:59 GMT+0800 (中国标准时间)

      2.将 Date 对象转为指定格式：

const date = new Date(2018, 1, 15, 12, 59, 59);
formatAllDate(date, 2, "yyyy-MM-dd hh:mm:ss");
// 返回: "2018-02-15 12:59:59"

     3.直接将数字字符串转为指定格式：

formatAllDate("20180215125959", 3, "MM月dd日，yyyy年");
// 返回: "02月15日，2018年"

代码亮点

1. 灵活性高：通过一个函数处理多种日期转换场景，减少了代码冗余
2. 格式自定义：支持用户传入任意格式的字符串，满足不同展示需求
3. 容错处理：对空值和不完整日期字符串进行了处理
4. 补零处理：自动为单数的月、日、时、分、秒补零，保证格式统一

总结

这款日期格式化过滤器通过简洁的设计实现了多种常见的日期转换需求，特别适合处理从数据库获取的数字字符串格式日期。它的主要优势在于：

1. 多功能合一：一个函数处理三种常见的日期转换场景，降低了学习和使用成本
2. 使用简单：通过类型参数区分不同功能，接口设计直观
3. 扩展性好：如果需要添加新的日期处理类型，只需增加新的条件分支
4. 实用性强：针对实际项目中常见的日期格式问题提供了完整解决方案

在实际项目中，你可以将这个函数作为 Vue 的过滤器使用，也可以集成到其他 JavaScript 框架中，或者直接在原生 JavaScript 项目中调用。希望这个日期格式化工具能帮助你更高效地处理项目中的日期问题！

 

1. 将数字字符串转为 Date 对象：