时间格式化工具的函数详解

需求：

• 当我们在开发过程中，经常会遇到对日期进行展示的这种需求
• 通常我们拿到的数据都是时间戳，这个时候就需要我们做一些操作，使得时间戳能变成具体的年月日时分秒，再对其展示
• 有时候对展示的日期格式还有要求，所以对此我专门写了一个工具函数，并且对其进行了详细的解释

第一版：简单易懂，但是代码重复性非常高，典型的垃圾代码

const productJSON = {
    name: "computer",
    nowPrice: 5999,
    oldPrice: 6999,
    endTime: "1659252301637"
}

// 版本一：
// 1.这个版本的代码，可以明显看出来，其中有许多代码的复合性很高，而且if...else嵌套的很多，典型的垃圾代码。
// 1.1.使用if...else嵌套的主要原因就是为了，在正则表达式和formatString中的某个字符匹配时，能够使用对  应的具体的时间将字符替换
// 2.很明显可以看出具体的年月日时分秒和对应的正则表达式是一一对应的
// 3.既然是一一对应的，就可以考虑把它们写在一个对象中。正则表达式为key，具体时间为value

// 封装一个函数：如果时间不足两位的话，自动给前面补一个0
function add(time) {
    return String(time).padStart(2, "0")
}

function fmtTime(time, formatString) {
    // 1.将传入的时间戳转成具体的年月日时分秒
    const date = new Date(Number(time))
    let newTime = formatString

    // 2.拿到具体的年月日时分秒
    const year = add(date.getFullYear())
    // 因为月份是从0开始计算的，所以需要加一
    const month = add(date.getMonth() + 1)
    const day = add(date.getDate())
    const hours = add(date.getHours())
    const minute = add(date.getMinutes())
    const second = add(date.getSeconds())

    // 3.写对应传入格式的年月日时分秒的正则表达式，以便能将具体的年月日时分秒写入传入的格式中
    const yearReg = /Y+/
    const monthReg = /M+/
    const dayReg = /D+/
    const hoursReg = /h+/
    const minuteReg = /m+/
    const secondReg = /s+/

    // 4.因为知道时间的单位最多只有年月日时分秒这六种，所以循环六次，并且将拿到的日期时间写入对应的位置
    for (let i = 0; i < 6; i++) {
        if (yearReg.test(newTime)) {
            newTime = newTime.replace(yearReg, year)
        } else if (monthReg.test(newTime)) {
            newTime = newTime.replace(monthReg, month)
        } else if (dayReg.test(newTime)) {
            newTime = newTime.replace(dayReg, day)
        } else if (hoursReg.test(newTime)) {
            newTime = newTime.replace(hoursReg, hours)
        } else if (minuteReg.test(newTime)) {
            newTime = newTime.replace(minuteReg, minute)
        } else if (secondReg.test(newTime)) {
            newTime = newTime.replace(secondReg, second)
        }
    }


    return newTime
}

console.log(fmtTime(productJSON.endTime, "YY-MM-DD hh:mm:ss"))

第二版：对第一版进行了很大程度的改善，但是相比于第一版不太容易理解

const productJSON = {
    name: "computer",
    nowPrice: 5999,
    oldPrice: 6999,
    endTime: "1659252301637"
}
// 版本二：
// 1.因为正则表达式和具体的时间是一一对应的，所以将它们写在一个对象中，这样通过遍历对象就可以拿到具体的key。
// 2.并且在循环内部使用if语句时，如果遇到了哪个时间的正则表达式和formatString中的某个字符匹配时，就可以直接通过key拿到对应的具体的时间。再对字符进行替换。不用再使用那么多if...else的嵌套了

function fmtTime(time, formatString) {

    const date = new Date(Number(time))

    // 将正则表达式和具体的时间写在一个对象中
    const timeObj = {
        "Y+": date.getFullYear(),
        "M+": date.getMonth() + 1,
        "D+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
    }

    for (let timeItem in timeObj) {
        // 对象中的key只是一个字符串，所以需要将其先转换成正则表达式
        const timeReg = new RegExp(timeItem)
        // 判断格式模板中是否有哪个字符与正则表达式相匹配
        if ((timeReg).test(formatString)) {
            //如果匹配的话，就让具体的时间将格式模板中的字符替换，并且当时间不够两位时，自动给前面补0
            formatString = formatString.replace(timeReg, (String(timeObj[timeItem])).padStart(2, "0"))
        }
    }

    return formatString
}

console.log(fmtTime(productJSON.endTime, "YY-MM-DD hh:mm:ss"))