JavaScript 日期时间格式化

　　上一篇笔记c#日期时间格式化打印了一下C#格式化日期时间，这里在记录一下JS版本。其实这就是重复造轮子了，有很多现成的类库，例如：momentjs。但是有些时候又没有引用这个类库，没有那么复杂的需求，所以写一个小方法就需要了。先看一下输出记录：

 

格式

结果
(2021-01-03 06:07:08.009)

结果
(2021-11-22 15:36:48.678)

C#

JavaScript

C#

JavaScript

年相关

y

2021年1月

2021

2021年11月

2021

yy

21

21

21

21

yyy

2021

2021

2021

2021

yyyy

2021

2021

2021

2021

yyyyy

02021

02021

02021

02021

yyyyyy

002021

002021

002021

002021

y-MM-dd

21-01-03

2021-01-03

21-11-22

2021-11-22

yy-MM-dd

21-01-03

21-01-03

21-11-22

21-11-22

yyy-MM-dd

2021-01-03

2021-01-03

2021-11-22

2021-11-22

yyyy-MM-dd

2021-01-03

2021-01-03

2021-11-22

2021-11-22

yyyyy-MM-dd

02021-01-03

02021-01-03

02021-11-22

02021-11-22

yyyyyy-MM-dd

002021-01-03

002021-01-03

002021-11-22

002021-11-22

月相关

M

1月3日

1

11月22日

11

MM

01

01

11

11

MMM

1月

1月

11月

11月

MMMM

一月

一月

十一月

十一月

MMMMM

一月

一月

十一月

十一月

yyyy-M-dd

2021-1-03

2021-1-03

2021-11-22

2021-11-22

yyyy-MM-dd

2021-01-03

2021-01-03

2021-11-22

2021-11-22

yyyy-MMM-dd

2021-1月-03

2021-1月-03

2021-11月-22

2021-11月-22

yyyy-MMMM-dd

2021-一月-03

2021-一月-03

2021-十一月-22

2021-十一月-22

yyyy-MMMMM-dd

2021-一月-03

2021-一月-03

2021-十一月-22

2021-十一月-22

天相关

d

2021/1/3

3

2021/11/22

22

dd

03

03

22

22

ddd

周日

周日

周一

周一

dddd

星期日

星期日

星期一

星期一

ddddd

星期日

星期日

星期一

星期一

yyyy-MM-d

2021-01-3

2021-01-3

2021-11-22

2021-11-22

yyyy-MM-dd

2021-01-03

2021-01-03

2021-11-22

2021-11-22

yyyy-MM-ddd

2021-01-周日

2021-01-周日

2021-11-周一

2021-11-周一

yyyy-MM-dddd

2021-01-星期日

2021-01-星期日

2021-11-星期一

2021-11-星期一

yyyy-MM-ddddd

2021-01-星期日

2021-01-星期日

2021-11-星期一

2021-11-星期一

小时相关1

h

不支持

6

不支持

3

hh

06

06

03

03

hhh

06

06

03

03

hhhh

06

06

03

03

h:mm:ss.fff

6:07:08.009

6:07:08.009

3:36:48.678

3:36:48.678

hh:mm:ss.fff

06:07:08.009

06:07:08.009

03:36:48.678

03:36:48.678

hhh:mm:ss.fff

06:07:08.009

06:07:08.009

03:36:48.678

03:36:48.678

hhhh:mm:ss.fff

06:07:08.009

06:07:08.009

03:36:48.678

03:36:48.678

小时相关1

H

不支持

6

不支持

15

HH

06

06

15

15

HHH

06

06

15

15

HHHH

06

06

15

15

H:mm:ss.fff

6:07:08.009

6:07:08.009

15:36:48.678

15:36:48.678

HH:mm:ss.fff

06:07:08.009

06:07:08.009

15:36:48.678

15:36:48.678

HHH:mm:ss.fff

06:07:08.009

06:07:08.009

15:36:48.678

15:36:48.678

HHHH:mm:ss.fff

06:07:08.009

06:07:08.009

15:36:48.678

15:36:48.678

分钟相关

m

1月3日

7

11月22日

36

mm

07

07

36

36

mmm

07

07

36

36

mmmm

07

07

36

36

HH:m:ss.fff

06:7:08.009

06:7:08.009

15:36:48.678

15:36:48.678

HH:mm:ss.fff

06:07:08.009

06:07:08.009

15:36:48.678

15:36:48.678

HH:mmm:ss.fff

06:07:08.009

06:07:08.009

15:36:48.678

15:36:48.678

HH:mmmm:ss.fff

06:07:08.009

06:07:08.009

15:36:48.678

15:36:48.678

秒相关

s

2021-01-03T06:07:08

8

2021-11-22T15:36:48

48

ss

08

08

48

48

sss

08

08

48

48

ssss

08

08

48

48

HH:mm:s.fff

06:07:8.009

06:07:8.009

15:36:48.678

15:36:48.678

HH:mm:ss.fff

06:07:08.009

06:07:08.009

15:36:48.678

15:36:48.678

HH:mm:sss.fff

06:07:08.009

06:07:08.009

15:36:48.678

15:36:48.678

HH:mm:ssss.fff

06:07:08.009

06:07:08.009

15:36:48.678

15:36:48.678

毫秒相关

f

2021年1月3日 6:07

0

2021年11月22日 15:36

6

ff

00

00

67

67

fff

009

009

678

678

ffff

0090

0090

6780

6780

fffff

00900

00900

67800

67800

ffffff

009000

009000

678000

678000

HH:mm:ss.f

06:07:08.0

06:07:08.0

15:36:48.6

15:36:48.6

HH:mm:ss.ff

06:07:08.00

06:07:08.00

15:36:48.67

15:36:48.67

HH:mm:ss.fff

06:07:08.009

06:07:08.009

15:36:48.678

15:36:48.678

HH:mm:ss.ffff

06:07:08.0090

06:07:08.0090

15:36:48.6780

15:36:48.6780

HH:mm:ss.fffff

06:07:08.00900

06:07:08.00900

15:36:48.67800

15:36:48.67800

HH:mm:ss.ffffff

06:07:08.009000

06:07:08.009000

15:36:48.678000

15:36:48.678000

上午/下午

t

6:07

上

15:36

下

tt

上午

上午

下午

下午

ttt

上午

上午

下午

下午

tttt

上午

上午

下午

下午

t HH:mm:ss

上 06:07:08

上 06:07:08

下 15:36:48

下 15:36:48

tt HH:mm:ss

上午 06:07:08

上午 06:07:08

下午 15:36:48

下午 15:36:48

ttt HH:mm:ss

上午 06:07:08

上午 06:07:08

下午 15:36:48

下午 15:36:48

tttt HH:mm:ss

上午 06:07:08

上午 06:07:08

下午 15:36:48

下午 15:36:48

 　　这里并没有完全参照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) {
    if (getDataType(targetDate) !== "date")
        throw new Error("参数异常：targetDate必须是Date类型");
    if (!(getDataType(format) === "string" && format.length))
        throw new Error("参数异常：format必须是String类型并且不能为空");
    let 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) {
        let retStr = millisecond0.toString().padStart(3, "0");
        if (matchLength > 3) {
            retStr = retStr.padEnd(matchLength, "0");
        } else {
            retStr = retStr.substr(0, matchLength);
        }
        return retStr;
    }
    let o = {
        "y+": function (matchLength) {
            // y和yyy都返回1999
            let 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) {
            let 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) {
            let 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) {
            let retStr = hour0 > 12 ? (hour0 - 12).toString() : hour0.toString();
            if (matchLength > 1) {
                retStr = retStr.padStart(2, "0");
            }
            return retStr;
        },
        "H+": function (matchLength) {
            let retStr = hour0.toString();
            if (matchLength > 1) {
                retStr = retStr.padStart(2, "0");
            }
            return retStr;
        },
        "m+": function (matchLength) {
            let retStr = minute0.toString();
            if (matchLength > 1) {
                retStr = retStr.padStart(2, "0");
            }
            return retStr;
        },
        "s+": function (matchLength) {
            let retStr = second0.toString();
            if (matchLength > 1) {
                retStr = retStr.padStart(2, "0");
            }
            return retStr;
        },
        "S+": handleMillisecond,
        "f+": handleMillisecond,
        "t+": function (matchLength) {
            let 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 (let k in o) {
        const arrayMatch = [...format.matchAll(new RegExp("(" + k + ")", "g"))];
        if (Array.isArray(arrayMatch) && arrayMatch.length) {
            arrayMatch.forEach((item) => {
                format = format.replace(item[0], o[k](item[0].length));
            });
        }
    }
    return format;
}
View Code
//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"));
测试代码

　　其实还应该注意一下使用环境，英文状态下这样肯定是有问题的……

　　之后再改进……

　　有点尴尬啊！昨天才弄上去，之后就发现bug,今天补一下，之前的写法不支持"yyyy-MM-dd ddd dddd"这样的写法，类似其中包含多个的……还有就是这里用到了一些ES6+的语法……

posted @ 2021-01-05 20:46  du-blog  阅读(1086)  评论(0)  编辑  收藏  举报