牛骨文教育服务平台(让学习变的简单)
博文笔记

多种不同的方法实现Javascript的日期格式化,你能写出几种?

创建时间:2017-11-29 投稿人: 15575260667 浏览次数:274

前言

在写Javascript代码的时候,我们经常会用到Date类型,有的时候往往需要不同格式的时间,有的精确到天(yyyy-MM-dd),有的精确到秒(yyyy-MM-dd HH:mm:ss)。

由于Javascript不像Java那样有现成的方法去格式化时间,所以往往需要自己去封装,今天我们就一起来看看几种不同的格式化Javascript的Date的方法吧。

文中的代码我已经放在了github上,感兴趣的同学可以自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/formatDate/formatDate.js

多种不同的方法实现Javascript的日期格式化,你能写出几种?

Javascript

方法1

时间格式基本包括年,月,日,时,分,秒,毫秒,有的会包含季度。

实现的主要思想如下。

  • 预先定义一个对象,key为可能的正则表达式,value为每个正则对应的实际值。

  • 预先匹配年份,确定年份值。

  • 然后遍历对象,确定可能有的月份,天或者时分秒等值。

  • 季度我们采用q表示。

得到的代码如下所示。

多种不同的方法实现Javascript的日期格式化,你能写出几种?

方法1

接下来我们进行如下的代码测试。

多种不同的方法实现Javascript的日期格式化,你能写出几种?

代码测试

从上图中可以看出,对于传入的不同时间格式,会显示出不同格式的时间。

方法2

在方法1的基础上,增加了展示星期几的参数,我们通过字母E去表示。

  • 传入一个E,返回一个表示数字的汉字,如周一,就返回一。

  • 传入两个E,返回两个汉字,如周一就返回周一。

  • 传入三个E,返回星期的表示,如周一返回星期一。

在方法1的代码基础上,我们补充了关于E的正则表达式,新增的关于E的处理代码如下。

多种不同的方法实现Javascript的日期格式化,你能写出几种?

增加处理星期的方法

最终得到的全部代码如下所示。

多种不同的方法实现Javascript的日期格式化,你能写出几种?

方法2

通过以下的代码进行测试。

多种不同的方法实现Javascript的日期格式化,你能写出几种?

方法2测试代码

通过上述的测试结果发现,方法2中新增的星期表示是正确的。

方法3

方法3的实现相比于方法1和方法2来说更为简单一点,将传入的时间格式限制的更多一点,一般就只能为常用的形式。

多种不同的方法实现Javascript的日期格式化,你能写出几种?

方法3的实现

我们通过如下代码进行测试。

多种不同的方法实现Javascript的日期格式化,你能写出几种?

方法3测试结果

通过上述的代码测试结果,发现方法3可以实现基本的时间格式化,但是相比于方法1和方法2,格式化的可选项太少。

方法4

这里推荐一个非常好用的格式化时间的库-moment.js,它是一款专门用于处理时间的库,支持多种不同的格式化类型。

http://momentjs.cn/

  • 安装

moment.js有多种不同的安装方法。

多种不同的方法实现Javascript的日期格式化,你能写出几种?

安装

  • 使用方法

这里简单介绍下moment.js的使用方法,也是通过传递不同的参数输出不同的时间。

这里看下官网上的例子。

多种不同的方法实现Javascript的日期格式化,你能写出几种?

moment,js基本用法

如果对moment.js感兴趣的同学可以自行去官网去看看常用的API,相信你在使用上肯定会觉得非常方便的。

结束语

今天这篇文章介绍了Javascript中几种格式化时间的方法,有简单的实现,也有复杂的实现,最后还推荐了一款好用的库mome.js。

想学好Javascript,我觉得有一本是必看的,那就是《高级Javascript程序设计》,目前已经出了3版,想学好Javascript的同学不要错过噢~