JavaScript 日期時間格式化

　　上一篇筆記c#日期時間格式化列印了一下C#格式化日期時間，這里在記錄一下JS版本，其實這就是重復造輪子了，有很多現成的類別庫，例如：momentjs，但是有些時候又沒有參考這個類別庫，沒有那么復雜的需求，所以寫一個小方法就需要了，先看一下輸出記錄：

 　   這里并沒有完全參照C#的格式化，也參照了一下momentjs，下面看一下代碼：

/**
 * 格式化日期
 * 例子： dateExtend_Format(new Date(),"yyyy-MM-dd hh:mm:ss SSS")
 * @param {Date} targetDate 
 * @param {String} format 
 * @returns {string} 回傳格式化之后字串
 */
export const dateExtend_Format = function (targetDate, format) {
    var year0 = targetDate.getFullYear(),
        momth0 = targetDate.getMonth() + 1,
        date0 = targetDate.getDate(),
        day0 = targetDate.getDay(),
        hour0 = targetDate.getHours(),
        minute0 = targetDate.getMinutes(),
        second0 = targetDate.getSeconds(),
        millisecond0 = targetDate.getMilliseconds(),
        quarter0 = Math.floor((momth0 + 2) / 3),
        numToCnObj = {
            0: "日",
            1: "一",
            2: "二",
            3: "三",
            4: "四",
            5: "五",
            6: "六",
            7: "七",
            8: "八",
            9: "九",
            10: "十",
            11: "十一",
            12: "十二",
        },
        week0 = numToCnObj[day0];

    function handleMillisecond(matchLength) {
        var retStr = millisecond0.toString().padStart(3, "0");
        if (matchLength > 3) {
            retStr = retStr.padEnd(matchLength, "0");
        } else {
            retStr = retStr.substr(0, matchLength);
        }
        return retStr;
    }
    var o = {
        "y+": function (matchLength) {
            // y和yyy都回傳1999
            var retStr = year0.toString();
            if (matchLength === 2) {
                retStr = retStr.substr(-2, 2);
            }
            else if (matchLength > 4) {
                retStr = retStr.padStart(matchLength, "0");
            }
            return retStr;
        },
        "M+": function (matchLength) {
            var retStr = momth0.toString();
            switch (matchLength) {
                case 1: {
                    break;
                }
                case 2: {
                    retStr = retStr.padStart(2, "0");
                    break;
                }
                case 3: {
                    retStr = retStr + "月";
                    break;
                }
                default: {
                    retStr = numToCnObj[retStr] + "月";
                    break;
                }
            }
            return retStr;
        },
        "d+": function (matchLength) {
            var retStr = date0.toString();
            switch (matchLength) {
                case 1: {
                    break;
                }
                case 2: {
                    retStr = retStr.padStart(2, "0");
                    break;
                }
                case 3: {
                    retStr = "周" + week0;
                    break;
                }
                default: {
                    retStr = "星期" + week0;
                    break;
                }
            }
            return retStr;
        },
        "h+": function (matchLength) {
            var retStr = hour0 > 12 ? (hour0 - 12).toString() : hour0.toString();
            if (matchLength > 1) {
                retStr = retStr.padStart(2, "0");
            }
            return retStr;
        },
        "H+": function (matchLength) {
            var retStr = hour0.toString();
            if (matchLength > 1) {
                retStr = retStr.padStart(2, "0");
            }
            return retStr;
        },
        "m+": function (matchLength) {
            var retStr = minute0.toString();
            if (matchLength > 1) {
                retStr = retStr.padStart(2, "0");
            }
            return retStr;
        },
        "s+": function (matchLength) {
            var retStr = second0.toString();
            if (matchLength > 1) {
                retStr = retStr.padStart(2, "0");
            }
            return retStr;
        },
        "S+": handleMillisecond,
        "f+": handleMillisecond,
        "t+": function (matchLength) {
            var retStr = hour0 > 12 ? "下午" : "上午";
            if (matchLength === 1) {
                retStr = retStr.substr(0, matchLength);
            }
            return retStr;
        },
        "q+": function (matchLength) {
            return quarter0.toString()
        },
        "w": function (matchLength) {
            return week0.toString()
        },
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, o[k](RegExp.$1.length));
        }
    }
    return format;
}

//var date1 = new Date("2021-11-22 15:36:48.678");
var date1 = new Date("2021-01-03 06:07:08.009");
console.log("y->" + dateExtend_Format(date1, "y"));
console.log("yy->" + dateExtend_Format(date1, "yy"));
console.log("yyy->" + dateExtend_Format(date1, "yyy"));
console.log("yyyy->" + dateExtend_Format(date1, "yyyy"));
console.log("yyyyy->" + dateExtend_Format(date1, "yyyyy"));
console.log("yyyyyy->" + dateExtend_Format(date1, "yyyyyy"));
console.log("y-MM-dd->" + dateExtend_Format(date1, "y-MM-dd"));
console.log("yy-MM-dd->" + dateExtend_Format(date1, "yy-MM-dd"));
console.log("yyy-MM-dd->" + dateExtend_Format(date1, "yyy-MM-dd"));
console.log("yyyy-MM-dd->" + dateExtend_Format(date1, "yyyy-MM-dd"));
console.log("yyyyy-MM-dd->" + dateExtend_Format(date1, "yyyyy-MM-dd"));
console.log("yyyyyy-MM-dd->" + dateExtend_Format(date1, "yyyyyy-MM-dd"));

console.log("M->" + dateExtend_Format(date1, "M"));
console.log("MM->" + dateExtend_Format(date1, "MM"));
console.log("MMM->" + dateExtend_Format(date1, "MMM"));
console.log("MMMM->" + dateExtend_Format(date1, "MMMM"));
console.log("MMMMM->" + dateExtend_Format(date1, "MMMMM"));
console.log("yyyy-M-dd->" + dateExtend_Format(date1, "yyyy-M-dd"));
console.log("yyyy-MM-dd->" + dateExtend_Format(date1, "yyyy-MM-dd"));
console.log("yyyy-MMM-dd->" + dateExtend_Format(date1, "yyyy-MMM-dd"));
console.log("yyyy-MMMM-dd->" + dateExtend_Format(date1, "yyyy-MMMM-dd"));
console.log("yyyy-MMMMM-dd->" + dateExtend_Format(date1, "yyyy-MMMMM-dd"));

console.log("d->" + dateExtend_Format(date1, "d"));
console.log("dd->" + dateExtend_Format(date1, "dd"));
console.log("ddd->" + dateExtend_Format(date1, "ddd"));
console.log("dddd->" + dateExtend_Format(date1, "dddd"));
console.log("ddddd->" + dateExtend_Format(date1, "ddddd"));
console.log("yyyy-MM-d->" + dateExtend_Format(date1, "yyyy-MM-d"));
console.log("yyyy-MM-dd->" + dateExtend_Format(date1, "yyyy-MM-dd"));
console.log("yyyy-MM-ddd->" + dateExtend_Format(date1, "yyyy-MM-ddd"));
console.log("yyyy-MM-dddd->" + dateExtend_Format(date1, "yyyy-MM-dddd"));
console.log("yyyy-MM-ddddd->" + dateExtend_Format(date1, "yyyy-MM-ddddd"));

console.log("h->" + dateExtend_Format(date1, "h"));
console.log("hh->" + dateExtend_Format(date1, "hh"));
console.log("hhh->" + dateExtend_Format(date1, "hhh"));
console.log("hhhh->" + dateExtend_Format(date1, "hhhh"));
console.log("h:mm:ss.fff->" + dateExtend_Format(date1, "h:mm:ss.fff"));
console.log("hh:mm:ss.fff->" + dateExtend_Format(date1, "hh:mm:ss.fff"));
console.log("hhh:mm:ss.fff->" + dateExtend_Format(date1, "hhh:mm:ss.fff"));
console.log("hhhh:mm:ss.fff->" + dateExtend_Format(date1, "hhhh:mm:ss.fff"));

console.log("H->" + dateExtend_Format(date1, "H"));
console.log("HH->" + dateExtend_Format(date1, "HH"));
console.log("HHH->" + dateExtend_Format(date1, "HHH"));
console.log("HHHH->" + dateExtend_Format(date1, "HHHH"));
console.log("H:mm:ss.fff->" + dateExtend_Format(date1, "H:mm:ss.fff"));
console.log("HH:mm:ss.fff->" + dateExtend_Format(date1, "HH:mm:ss.fff"));
console.log("HHH:mm:ss.fff->" + dateExtend_Format(date1, "HHH:mm:ss.fff"));
console.log("HHHH:mm:ss.fff->" + dateExtend_Format(date1, "HHHH:mm:ss.fff"));

console.log("m->" + dateExtend_Format(date1, "m"));
console.log("mm->" + dateExtend_Format(date1, "mm"));
console.log("mmm->" + dateExtend_Format(date1, "mmm"));
console.log("mmmm->" + dateExtend_Format(date1, "mmmm"));
console.log("HH:m:ss.fff->" + dateExtend_Format(date1, "HH:m:ss.fff"));
console.log("HH:mm:ss.fff->" + dateExtend_Format(date1, "HH:mm:ss.fff"));
console.log("HH:mmm:ss.fff->" + dateExtend_Format(date1, "HH:mmm:ss.fff"));
console.log("HH:mmmm:ss.fff->" + dateExtend_Format(date1, "HH:mmmm:ss.fff"));

console.log("s->" + dateExtend_Format(date1, "s"));
console.log("ss->" + dateExtend_Format(date1, "ss"));
console.log("sss->" + dateExtend_Format(date1, "sss"));
console.log("ssss->" + dateExtend_Format(date1, "ssss"));
console.log("HH:mm:s.fff->" + dateExtend_Format(date1, "HH:mm:s.fff"));
console.log("HH:mm:ss.fff->" + dateExtend_Format(date1, "HH:mm:ss.fff"));
console.log("HH:mm:sss.fff->" + dateExtend_Format(date1, "HH:mm:sss.fff"));
console.log("HH:mm:ssss.fff->" + dateExtend_Format(date1, "HH:mm:ssss.fff"));

console.log("f->" + dateExtend_Format(date1, "f"));
console.log("ff->" + dateExtend_Format(date1, "ff"));
console.log("fff->" + dateExtend_Format(date1, "fff"));
console.log("ffff->" + dateExtend_Format(date1, "ffff"));
console.log("fffff->" + dateExtend_Format(date1, "fffff"));
console.log("ffffff->" + dateExtend_Format(date1, "ffffff"));

console.log("HH:mm:ss.f->" + dateExtend_Format(date1, "HH:mm:ss.f"));
console.log("HH:mm:ss.ff->" + dateExtend_Format(date1, "HH:mm:ss.ff"));
console.log("HH:mm:ss.fff->" + dateExtend_Format(date1, "HH:mm:ss.fff"));
console.log("HH:mm:ss.ffff->" + dateExtend_Format(date1, "HH:mm:ss.ffff"));
console.log("HH:mm:ss.fffff->" + dateExtend_Format(date1, "HH:mm:ss.fffff"));
console.log("HH:mm:ss.ffffff->" + dateExtend_Format(date1, "HH:mm:ss.ffffff"));

console.log("t->" + dateExtend_Format(date1, "t"));
console.log("tt->" + dateExtend_Format(date1, "tt"));
console.log("ttt->" + dateExtend_Format(date1, "ttt"));
console.log("tttt->" + dateExtend_Format(date1, "tttt"));
console.log("t HH:mm:ss->" + dateExtend_Format(date1, "t HH:mm:ss"));
console.log("tt HH:mm:ss->" + dateExtend_Format(date1, "tt HH:mm:ss"));
console.log("ttt HH:mm:ss->" + dateExtend_Format(date1, "ttt HH:mm:ss"));
console.log("tttt HH:mm:ss->" + dateExtend_Format(date1, "tttt HH:mm:ss"));

　　其實還應該注意一下使用環境，英文狀態下這樣肯定是有問題的……

　　之后再改進……

標籤：其他

上一篇：ES6之模塊入門（一）

下一篇：el-input限制只能輸入數字（開發小記）