js-扩展new Date的功能格式化日期时间，让你摆脱苦恼

概序

前段时间， 朋友叫我把new Date的功能扩展一下，我说网上不是有一堆么，他说太复杂了，让我搞个简单点的。

憋了半天，发现简单不起来啊，只能搞个简化版的出来。
目前常用功能有这样几个：获取现在时间戳、获取今天时间戳、获取周、月、am、pm、任意格式化时间。
因为不喜欢直接在 Date 上拓展，所以简单的写了个方法，名字是 oDate。
（注：其他时间格式暂不支持如：UTC、GMT 这种，如需可自行拓展）

先列出需要的几个方法：

1
2
3
4
5
6
function oDate() {}
function initialize() {} // 用来初始化
oDate.prototype.toString = function () {}; // 格式化日期时间
oDate.prototype.clearTime = function () {}; // 重置时分秒毫秒
oDate.now = function () {}; // 获取现在时间戳
oDate.today = function () {}; // 获取今天时间戳（重置时分秒毫秒）

先来说说比较重要的日期时间格式，需要怎么判定传进去的格式能拿到理想的格式。
看看日期时间都有什么组成，然后根据这个规律定义我们想要的格式
常用的时间：年月日 周几 上午|下午 时分秒（毫秒）月份
那么，我们可以根据这个规律，给每个添加固定格式：

  • yyyy // 年
  • MM // 月
  • dd // 日
  • dddd // 周几
  • TT // 上午|下午
  • hh // 时
  • mm // 分
  • ss // 秒

……

等等的格式，好了，那么，我们要转换格式的时候就可以这样组合：

yyyy MM dd TT hh mm ss fff dddd MMMM

当我们通过 toString 方法传上面的格式就能拿到我们想要的样子

// 2016 12 16 周五 上午 11 53 07 111

toString('yyyy MM dd TT hh mm ss fff dddd MMMM');

那么问题来了，我们怎么区分呢，日期时间里还要包含各种符号。

方案

我们可以用 replace()
例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var now = new Date();
var _date = 'yyyy-MM-dd TT hh:mm:ss.fff dddd MMMM'
.replace('yyyy', now.getFullYear())
.replace('MM', now.getMonth()+1)
.replace('dd', now.getDate())
.replace('TT', (now.getHours() < 12 ? 'AM' : 'PM'))
.replace('hh', now.getHours())
.replace('mm', now.getMinutes())
.replace('ss', now.getSeconds())
.replace('fff', now.getMilliseconds())
.replace('dddd', dayName[now.getDay()])
.replace('MMMM', monthName[now.getMonth()]); 
console.log(_date); // 2016 MM dd TT hh mm ss fff dddd MMMM

感觉非常简单，但是感觉很不直观，难道就这样结束了么？

能不能一个 replace() 搞定？

可以！上正则吧！（正则怎么学习，可以看小编另外的有关正则的文章）

1
2
3
4
5
6
7
var now = new Date();
var _date = '([yyyy-MM-dd] TT [hh:mm:ss.fff] dddd '+
'MMMM yy年 d日 ddd M月 MMM h时 m分 s秒 H HH tt)';
_date.replace(/d{1,4}|M{1,4}|yy(?:yy)?|([hHmstT])\1?|fff\b/g, 
  function ($0) {
  console.log($0)
});

不要太简单..那接下来怎么赋值呢，方法里面用 switch 不就好啦

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
(function () {
 // 先来个 补0 的方法
 function zeroize(n, len) {
  len = len || 2;
  n += '';
  while (n.length < len) {
    n = '0' + n;
  }
  return n;
 }
 var monthNames = ['January', 'February', 'March', 
     'April', 'May', 'June', 'July', 'August', 
     'September', 'October', 'November', 'December'];
 var monthNamesShort = ['Jan', 'Feb', 'Mar', 
    'Apr', 'May', 'Jun', 'Jul', 'Aug', 
    'Sep', 'Oct', 'Nov', 'Dec'];
 var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 
    'Thursday', 'Friday', 'Saturday'];
 var dayNamesShort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'];
 var now = new Date();
 var _date = 'yyyy-MM-dd TT hh:mm:ss.fff dddd MMMM'
 .replace(/d{1,4}|M{1,4}|yy(?:yy)?|([hHmstT])\1?|fff\b/g, 
  function ($0) {
   switch ($0) {
     case 'd': return now.getDate();
     case 'dd': return zeroize(now.getDate());
     case 'ddd': return [now.getDay()];
     case 'dddd': return [now.getDay()];
     case 'M': return now.getMonth() + 1;
     case 'MM': return zeroize(now.getMonth() + 1);
     case 'MMM': return [now.getMonth()];
     case 'MMMM': return monthNames[now.getMonth()];
     case 'yy': return new String(now.getFullYear()).substr(2);
     case 'yyyy': return now.getFullYear();
     case 'h': return now.getHours() % 12 || 12;
     case 'hh': return zeroize(now.getHours() % 12 || 12);
     case 'H': return now.getHours();
     case 'HH': return zeroize(now.getHours());
     case 'm': return now.getMinutes();
     case 'mm': return zeroize(now.getMinutes());
     case 's': return now.getSeconds();
     case 'ss': return zeroize(now.getSeconds());
     case 'fff': return now.getMilliseconds();
     case 'tt': return now.getHours() < 12 ? 'am' : 'pm';
     case 'TT': return now.getHours() < 12 ? 'AM' : 'PM';
   }
 });
 // 2016-12-16 PM 01:46:48.996 Friday December
 console.log(_date); 
})();

就问你简不简单。

什么？你说还有没有别的方案？觉得这个正则太长看不懂

咱换种方式写，用 new RegExp match while switch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
(function () {
 var monthNames = ['January', 'February', 'March', 
     'April', 'May', 'June', 'July', 'August', 
     'September', 'October', 'November', 'December'];
 var monthNamesShort = ['Jan', 'Feb', 'Mar', 
    'Apr', 'May', 'Jun', 'Jul', 'Aug', 
    'Sep', 'Oct', 'Nov', 'Dec'];
 var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 
    'Thursday', 'Friday', 'Saturday'];
 var dayNamesShort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'];
 function _string(_date, str) {
   switch (str) {
     case 'd': return _date.getDate();
     case 'dd': return zeroize(_date.getDate());
     case 'ddd': return dayNamesShort[_date.getDay()];
     case 'dddd': return dayNames[_date.getDay()];
     case 'M': return _date.getMonth() + 1;
     case 'MM': return zeroize(_date.getMonth() + 1);
     case 'MMM': return monthNamesShort[_date.getMonth()];
     case 'MMMM': return monthNames[_date.getMonth()];
     case 'yy': return new String(_date.getFullYear()).substr(2);
     case 'yyyy': return _date.getFullYear();
     case 'h': return _date.getHours() % 12 || 12;
     case 'hh': return zeroize(_date.getHours() % 12 || 12);
     case 'H': return _date.getHours();
     case 'HH': return zeroize(_date.getHours());
     case 'm': return _date.getMinutes();
     case 'mm': return zeroize(_date.getMinutes());
     case 's': return _date.getSeconds();
     case 'ss': return zeroize(_date.getSeconds());
     case 'fff': return _date.getMilliseconds();
     case 'tt': return _date.getHours() < 12 ? 'am' : 'pm';
     case 'TT': return _date.getHours() < 12 ? 'AM' : 'PM';
   }
 }

 // 先来个 补0 的方法
 function zeroize(n, len) {
   len = len || 2;
   n += '';
   while (n.length < len) {
     n = '0' + n;
   }
   return n;
 }

 var formatStringRE = new RegExp("(([a-zA-Z])\\2*)");
 var formatString = 'yyyy-MM-dd TT hh:mm:ss.fff dddd MMMM';
 var now = new Date();
 var out = '';
 while (m = formatString.match(formatStringRE)) {
   out += formatString.substr(0, m.index);
   if (m[1]) {
     out += _string(now, m[1]);
   }
   formatString = formatString.substr(m.index + m[0].length);
 }
 out += formatString;
 console.log(out);
})();

各位觉得，这三种写法，哪种更符合你们的预期要求呢？

代码总结

言归正传，继续我们今天的目的，封装函数，并可随时拓展。

其他功能不再深究如何实现，以下为完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
var oDate = (function (Date, Math, Array, undefined) {
 var formatStringRE = new RegExp("(([a-zA-Z])\\2*)");
 var dataList = {
   monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December'
   ],
   monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
   ],
   dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday',
     'Thursday', 'Friday', 'Saturday'
   ],
   dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
   am: 'AM',
   pm: 'PM'
 }

 function oDate() {
   return initialize(
     (this instanceof oDate) ? this : new oDate(),
     arguments
   );
 }
 // 初始化
 function initialize(xdate, args) {
   var len = args.length;
   var utcMode;
   if (isBoolean(args[len])) {
     utcMode = args[--len];
     args = slice(args, 0, len);
   }
   if (!len) {
     xdate[0] = new Date();
   } else if (len == 1) {
     var arg = args[0];
     if (arg instanceof Date || isNumber(arg)) {
       xdate[0] = new Date(+arg);
     } else if (isString(arg)) {
       xdate[0] = new Date(arg);
     }
   }
   return xdate;
 }

 oDate.prototype = {
   // 格式化方法
   toString: function (formatString) {
     if (formatString === undefined) {
       return this[0].toString();
     } else {
       return format(this, formatString);
     }
   },
   // 重置时分秒毫秒
   clearTime: function () {
     this[0].setHours(0, 0, 0, 0);
     return this;
   }
 };
 // 现在时间戳
 oDate.now = function () {
   return +new Date();
 };
 // 今日戳
 oDate.today = function () {
   return new oDate().clearTime();
 };
 // 格式化
 function format(xdate, formatString) {
   var out = '';
   while (m = formatString.match(formatStringRE)) {
     out += formatString.substr(0, m.index);
     if (m[1]) {
       out += processTokenString(xdate, m[1]);
     }

     formatString = formatString.substr(m.index + m[0].length);
   }
   return out + formatString;
 }
 // 返回对应值
 function processTokenString(xdate, tokenString) {
   var time = xdate[0];
   var _date = {
     year: time.getFullYear(),
     month: time.getMonth(),
     date: time.getDate(),
     day: time.getDay(),
     hours: time.getHours(),
     minutes: time.getMinutes(),
     seconds: time.getSeconds(),
     milliseconds: time.getMilliseconds()
   };
   switch (tokenString) {
     case 'yy': return (_date.year + '').substring(2);
     case 'yyyy': return _date.year;
     case 'M': return _date.month + 1;
     case 'MM': return zeroize(_date.month + 1);
     case 'MMM': return dataList.monthNamesShort[_date.month];
     case 'MMMM': return dataList.monthNames[_date.month];
     case 'd': return _date.date;
     case 'dd': return zeroize(_date.date);
     case 'ddd': return dataList.dayNamesShort[_date.day];
     case 'dddd': return dataList.dayNames[_date.day];
     case 'h': return _date.hours % 12 || 12;
     case 'hh': return zeroize(_date.hours % 12 || 12);
     case 'H': return _date.hours;
     case 'HH': return zeroize(_date.hours);
     case 'm': return _date.minutes;
     case 'mm': return zeroize(_date.minutes);
     case 's': return _date.seconds;
     case 'ss': return zeroize(_date.seconds);
     case 'fff': return zeroize(_date.milliseconds, 3);
     case 'tt': return _date.hours < 12 ? dataList.am.toLowerCase() : 
           dataList.pm.toLowerCase();
     case 'TT': return _date.hours < 12 ? dataList.am : dataList.pm;
   }
 }
 // 补0
 function zeroize(n, len) {
   len = len || 2;
   n += '';
   while (n.length < len) {
     n = '0' + n;
   }
   return n;
 }
 // 是否是 boolean
 function isBoolean(arg) {
   return typeof arg == 'boolean';
 }
 // 是否是 number
 function isNumber(arg) {
   return typeof arg == 'number';
 }
 // 是否是 string
 function isString(arg) {
   return typeof arg == 'string';
 }

 return oDate;
})(Date, Math, Array);

// 使用方法

// [2015-02-07 pm 11:32:03 Saturday]
console.log(oDate(1423323123123)
  .toString('[yyyy-MM-dd tt hh:mm:ss dddd]'))

// [2018-04-08 Sunday]
console.log(oDate(1523126123123)
  .toString('[yyyy-MM-dd dddd]'))

// [2011-11-24 pm 04 Thursday]
console.log(oDate(1322123523123)
  .toString('[yyyy-MM-dd tt hh dddd]'))

// 2024-08-12 am 05:38 12]
console.log(oDate(1723412313123)
  .toString('[yyyy-MM-dd tt hh:mm dd]'))

// [2015/11/11 AM 08:00:00 Wednesday]
console.log(oDate('2015-11-11')
  .toString('[yyyy/MM/dd TT hh:mm:ss dddd]'))

// [2015年11月11日 13时01分00秒 11]
console.log(oDate('2015/11/11 13:01')
  .toString('[yyyy年MM月dd日 HH时mm分ss秒 dd]'))

// [2015/11/11 PM 03:01:20 11]
console.log(oDate('2015-11-11 15:01:20')
  .toString('[yyyy/MM/dd TT hh:mm:ss dd]'))

// [2015/11/11 20:11:30 Wednesday]
console.log(oDate('2015-11-11 20:11:30')
  .toString('[yyyy/MM/dd HH:mm:ss dddd]'))

// [12-16-2016 pm 02:28:14(.548) Friday]
console.log(oDate(oDate.now())
  .toString('[MM-dd-yyyy tt hh:mm:ss(.fff) dddd]'))

// [16-12-2016 Friday pm 02:28:14(.548) December Friday]
console.log(oDate(oDate.now())
  .toString('[dd-MM-yyyy dddd tt hh:mm:ss(.fff) MMMM dddd]'))

// [2016-12-16 Friday PM 02:28:14(.549) December Friday]
console.log(oDate(oDate.now())
  .toString('[yyyy-MM-dd dddd TT hh:mm:ss(.fff) MMMM dddd]'))

// [2016-12-16 Fri pm 02:28:14(.549) Dec Friday]
console.log(oDate(oDate.now())
  .toString('[yyyy-MM-dd ddd tt hh:mm:ss(.fff) MMM dddd]'))
// [2016-12-16 Fri am 12:00:00(.000) Dec Friday]
oDate.today()
  .toString('[yyyy-MM-dd ddd tt hh:mm:ss(.fff) MMM dddd]')

oDate().toString("yyyy-MM-dd") 方法的参数详细描述：

  • d：将日显示为不带前导零的数字，如 1
  • dd：将日显示为带前导零的数字，如 01
  • ddd：将日显示为缩写形式，如 Sun
  • dddd：将日显示为全名，如 Sunday
  • M：将月份显示为不带前导零的数字，如一月显示为 1
  • MM：将月份显示为带前导零的数字，如 01
  • MMM：将月份显示为缩写形式，如 Jan
  • MMMM：将月份显示为完整月份名，如 January
  • yy：以两位数字格式显示年份
  • yyyy：以四位数字格式显示年份
  • h：使用 12 小时制将小时显示为不带前导零的数字
  • hh：使用 12 小时制将小时显示为带前导零的数字
  • H：使用 24 小时制将小时显示为不带前导零的数字
  • HH：使用 24 小时制将小时显示为带前导零的数字
  • m：将分钟显示为不带前导零的数字
  • mm：将分钟显示为带前导零的数字
  • s：将秒显示为不带前导零的数字
  • ss：将秒显示为带前导零的数字
  • fff：以三位数毫秒
  • tt：显示am/pm
  • TT：显示AM/PM

oDate.now() 获取现在的完整时间戳
oDate.today() 获取今天时间戳（去掉时分秒毫秒 ）

有人会说 tt TT 显示不正确，目前只对 12时进行划分，没有区分 凌晨 上午 中午 下午 晚上 这种情况，所以在 0点 到 0:59:59 的情况下， 显示的是 AM 12:59:59

这就当留给大家的作业吧，在 oDate 原基础上也可以很轻松拓展。

至于 基于源生 Date 上拓展 Date.prototype.format 也不阐述了，不喜欢这种写法。

关注 web翎云阁，定时推送，互动精彩多，若你有更好的见解，欢迎留言探讨！

本作品采用 知识共享署名 3.0 中国大陆许可协议 进行许可，分享、演绎需署名且使用相同方式共享。转载请务必保留本页网址和作者信息，否则即为侵权。

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家