title: Date时间格式化
date: 2021-06-09
description: 这是可以用于项目开发中的时间格式化实践
开始
我们经常在项目中看到Date转换成相关的时间展示，
比如2021年06月20日、2021-06-20、2021年06月20日 18:00:00
本文将介绍如何快速、方便的让Date对象转换成上述的格式
常规操作
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
//2021年06月20日
console.log(year + '年' + month + '月' + day + '日' )
//2021年06月20日 18:00:00
console.log(year + '年' + month + '月' + day + '日' + hour+ ':' + minute +':' + second)
上面的方式好处就是足够灵活，可以按照需求任意搭配，不好的地方也有：
1、代码太过于冗长，使用不太友好
2、要是存在多个时间，变量命名容易冲突
3、不方便复用、移植、重构
如何改善
1、针对上面的问题，我们可以通过function来简化整个操作
在js里面，function可以利用他的作用域有效隔离变量命名冲突，
在const、let之前还可以通过闭包来实现作用域隔离
2、定义规则，利用正则匹配相关规则实现内容替换，通过字符串的replace来替换上述console的组合操作
3、挂载在Date对象的prototype上面，可以对整个Date对象实现方法扩展，方便复用
定义规则
| 输入 | 示例 | 描述 |
|---|---|---|
yyyy |
2020 |
输入几个y就是几位数字的年份 |
M MM |
7 07 |
月份数字，复数的M当小于10则会追加0 |
d dd |
3 03 |
月的某天，复数的d当小于10则会追加0 |
H HH |
0..23 |
小时（24小时制），复数的h当小于10则会追加0 |
h hh |
1..12 |
小时（12小时制），复数的h当小于10则会追加0 |
m mm |
0..59 |
分钟，复数的m当小于10则会追加0 |
s ss |
0..59 |
秒数，复数的s当小于10则会追加0 |
S SS SSS |
0..999 |
带分数的秒钟，复数的S当小于10则会追加0 |
w ww |
1..7 |
指定日期的星期中的第几天，复数的w当小于10则会追加0 |
W |
一..天 |
指定日期的星期中的第几天，汉字一 二 三 四 五 六 天 |
q |
1..4 |
季度 |
如何调用
我们在尝试在Date对象上面挂载一个format方法，通过这个方法，传入上面定义的规则实现格式的转换
//定义方法
Date.prototype.format = function(rule){
console.log(this)
return rule
}
//方法调用
new Date().format('yyyy-MM-dd HH:mm:ss')
问题：
1.定义在prototype上面是为什么
2.function的声明可不可以使用箭头函数替代
如何转换
上面已经将方法定义好，调用方式也确定了，我们将使用正则去匹配相关的Rule,并生成文本
替换规则：
1、找出相同的规律，建立规则映射结构
2、年份需要单独处理
3、带分数的秒钟需要单独处理
4、汉化的周几需要单独处理
规则1：
通过示例可以看出，大部分的值都是在两位数之内，同时传入复数的规则都会追加0
我们利用正则匹配区间内$n的特性可以获得对应的匹配字符串
string.substring可以实现复数规则追加0
规则2：
年份数值不需要复数规则追加0，传入几个y则展示多少位年份
所以这里要提出来单独处理
规则3：
带分数的秒钟这里的值是三位数字的，和两位数字的处理在string.substring有所不同
所以这里也要提出来单独处理
规则4：
汉化的周几，这里需要建立一个数值映射结构{1: "一",2: "二",3: "三",4: "四",5: "五",6: "六",0: "天"}
所以这里也要提出来单独处理
综上所述，我们用代码实现下面的format函数
Date.prototype.format = function(ruleText){
const date = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"H+": this.getHours(),
"h+": (this.getHours() + 1) % 12 || 12,
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"w+": this.getDay()
};
if (/(y+)/i.test(ruleText)) {
ruleText = ruleText.replace(
RegExp.$1,
(this.getFullYear() + "").substring(4 - RegExp.$1.length)
);
}
if (/(S+)/.test(ruleText)) {
const ms = this.getMilliseconds();
ruleText = ruleText.replace(
RegExp.$1,
RegExp.$1.length === 1
? ms
: ("000" + ms).substring(("" + ms).length)
);
}
if (/(W+)/.test(ruleText)) {
const weeks = {1: "一",2: "二",3: "三",4: "四",5: "五",6: "六",0: "天"};
ruleText = ruleText.replace(RegExp.$1, weeks[date["w+"]]);
}
for (const k in date) {
if (new RegExp("(" + k + ")").test(ruleText)) {
ruleText = ruleText.replace(
RegExp.$1,
RegExp.$1.length === 1
? date[k]
: ("00" + date[k]).substring(("" + date[k]).length)
);
}
}
return ruleText;
}
//测试
new Date().format("测试1=>yyyy年MM月dd日 hh:mm:ss 星期W Qq")
new Date().format("测试2=>yyyy年MM月dd日 HH:mm:ss 星期W Qq")
new Date().format("测试3=>yyyy年MM月d日 H:mm:ss 星期W Qq")
new Date().format("测试3=>yy年M月d日 H:mm:ss 星期W Qq")
运行上面的测试代码，获得如下结果
问题：
1.如果传入yyyyyy会发生什么，其他的规则呢
2.针对这个方法还有优化的点吗
总结
1、解决Date时间格式化，在项目中反复的去按照需求规则展示时间的代码冗余
2、将规则语义化，更利于展示和理解
3、可移植性强，能多项目复用，对项目不会产生其余的副作用
至此，整个Date时间格式化函数就完成了