JS实现Date()日期格式化的3种常用方法

在Web开发中，日期和时间的处理是一个常见的任务。JavaScript提供了内置的Date对象来处理日期和时间，但默认的日期格式往往不符合我们的需求。为了满足各种应用场景，我们需要对日期进行格式化。本文将介绍三种常用的JavaScript日期格式化方法，帮助开发者在实际项目中更加灵活地处理日期数据。

Date( ) 介绍

Date( ) 基本使用

Date()日期对象是构造函数，必须使用new来调用我们的日期对象。

• 若Date()没有参数时 返回当前时间

• 若Date(timer)有参数时 返回参数设置的时间

• 参数写法：\'2012-2-2 08:54:32\'（字符串）

• 返回值格式：Sun May 28 2023 23:36:28 GMT+0800 (中国标准时间)

//无参数时letdateW=newDate();console.log(\'当前时间\',dateW);//SunMay28202323:36:28GMT+0800(中国标准时间)//有参数时letdateY=newDate(\'2012-2-208:54:32\');console.log(\'指定时间\',dateY);//ThuFeb02201208:54:32GMT+0800(中国标准时间)

Date() 常用API

Date()可以通过许多方法获取日期和时间的各个部分，在格式化时间时我们经常用到这些API。

letdate=newDate();console.log(date.getFullYear());//当前日期的年2022console.log(date.getMonth()+1);//月份+1由于月份是0-11计算所以需要+1console.log(date.getDate());//日console.log(date.getDay());//星期几注意：星期日返回的是0console.log(date.getHours());//时console.log(date.getMinutes());//分console.log(date.getSeconds());//秒

日期格式化

1.1 toLocaleString（原生方法）

Date 对象有一个toLocaleString方法，该方法可以格式化日期和时间,同时衍生出另外两种分别获得日期和时间的方法。

• 字段说明：

• 日期+时间:toLocaleString()

• 日期:toLocaleDateString()

• 时间:toLocaleTimeString()

• 参数说明(非必填)：

• \'en-US\', { timeZone: \'America/New_York\' }

• en-US: 地区设置(String）

• { timeZone: \'America/New_York\' }: 日期时间格式和时区信息(Object)

lettimer=newDate()console.log(timer.toLocaleString())//日期+时间2023/5/2823:07:35console.log(timer.toLocaleDateString())//日期2023/5/28console.log(timer.toLocaleTimeString())//时间23:10:31

//两个参数：（地区设置，日期时间格式和时区信息）console.log(time.toLocaleString(\'en-US\',{timeZone:\'America/New_York\'}))//打印结果5/28/2023,11:08:39AM

1.2 字符串方法

string.padStart(字符串长度, 填充元素): 用填充元素填充string字符串，使得产生的新字符串达到所设置的长度（参数一：字符串长度）。

• padStart从原字符串左侧开始填充

• padEnd从原字符串右侧开始填充

letstr=\'str\'str.padStart(5,\'0\')//\"00str\"//不指定填充元素时，以空字符串填充str.padStart(5)//\"abc\"//填充元素超出指定长度时，从左->右对填充元素截取str.padStart(6,\'123465\');//\"123str\"//原字符串长度大于设定长度时，以原字符串长度为准不截断原字符串str.padStart(2);//\"str\"

1) 利用字符串进行日期格式化

console.log(time.getFullYear().toString().padStart(4,\'0\'))//年2023console.log((time.getMonth()+1).toString().padStart(2,\'0\'))//月05console.log(time.getDate().toString().padStart(2,\'0\'))//日29console.log(\'星期\'+(time.getDay()===0?7:time.getDay()))//周星期1console.log(time.getHours().toString().padStart(2,\'0\'))//时01console.log(time.getMinutes().toString().padStart(2,\'0\'))//分19console.log(time.getSeconds().toString().padStart(2,\'0\'))//秒55

2) 格式化函数封装

lettime=newDate()//定义格式化封装函数functionformaData(timer){constyear=timer.getFullYear()constmonth=timer.getMonth()+1//由于月份从0开始，因此需加1constday=timer.getDate()consthour=timer.getHours()constminute=timer.getMinutes()constsecond=timer.getSeconds()return`${pad(year,4)}-${pad(month)}-${pad(day)}${pad(hour)}:${pad(minute)}:${pad(second)}`}//定义具体处理标准//timeEl传递过来具体的数值：年月日时分秒//total字符串总长度默认值为2//str补充元素默认值为\"0\"functionpad(timeEl,total=2,str=\'0\'){returntimeEl.toString().padStart(total,str)}//调用函数console.log(formaData(time))//2023-05-2900:30:19

1.3 第三方库

除了以上方法外，还有很多第三方库可以用来格式化日期时间，最常用的主要为Moment.js。

1)安装 Moment.js

npminstallmoment

2)导入 Moment.js 模块（main.js)

importmomentfrom\'moment\';Vue.prototype.$moment=moment

3)格式化时间

//`this.$moment()`输出当前时间的moment对象console.log(this.$moment().format(\'YYYY-MM-DDHH:mm:ss\'));//2023-05-2900:30:19

其他处理方法

2.1 时间戳

date 时间戳（毫秒数）：

• 获取date总的毫秒数，不是当前时间的毫秒数，而是距离1970年1月1日过了多少毫秒数。

• 获取方法：

  letdate=newDate();//写法一console.log(date.valueOf());//现在时间距离1970.1.1的毫秒数console.log(date.getTime());//写法二letdate=+newDate();console.log(date);//返回当前总的毫秒数//写法三console.log(Date.now());//H5新增低版本浏览器打不开

• valueof( ) 、 getTime( )

• const timer = + new Date()常用

• Date.now( ) 低版本浏览器打不开

倒计时函数封装

functioncountDown(time){letdateNow=+newDate();//获取当前时间的毫秒数letdateOver=+newDate(time);//获取目标时间的毫秒数letgapTime=(dateOver-dateNow)/1000//由毫秒得到秒lets=pad(parseInt(gapTime%60));//秒数letm=pad(parseInt(gapTime/60%60));//分钟数leth=pad(parseInt(gapTime/60/60%24));//小时数letd=pad(parseInt(cha/60/60/24));//天数returnd+\'天\'+h+\'小时\'+m+\'分钟\'+s+\'秒\';}//时间标准的处理函数functionpad(timeEl,total=2,str=\'0\'){returntimeEl.toString().padStart(total,str)}//调用函数console.log(countDown(\'2122-5-198:00:00\'));

汇总一下new Date().getxxx/setxxx的方法输出，简述一些注意点:

• new Date(param)param可以有几种格式，有浏览器通用的年月日时分秒的格式，但也会有IE,safari可能不兼容的格式，报错invalid date；

• getYear()方法返回的是年份的后两位，但这是1970-1999年才是两位，2000-???则一直加上去，会出现三位以上的返回，2000就是100，依次类推…

• getMonth()返回的是0-11的数值，0是一月Jan，所以输出的时候需要注意+1；同理getDay()返回0-6，0代表星期日Sun；

• getTime()返回的是1970.1.1开始到现在的毫秒数，同理valueof()也是一样的，注意Date.parse(new Date()返回的也是毫秒数，但会将后三位读取为0，不建议使用；

• 对于不存在的日期格式，就如new Date(yyyy,mth,dd,hh,mm,ss)中除了yyyy之外其他如果超过其取值范围的话，会像其’上级’进制，如ss（0-59）如果写着65，那就用65减去 [区间位60]，的05并像其’上级’，mm进一位，表达不好可以看例子…

/**js中单独调用newDate();显示这种格式WedJul31201913:20:09GMT+0800(中国标准时间)*但是用newDate()参与计算会自动转换为从1970.1.1开始的毫秒数*/varcurrent_date=newDate();//WedJan24201913:20:09GMT+0800(中国标准时间)varbefore_date=newDate(\"1991/2/2511:59:05\");//MonFeb25199111:59:05GMT+0800(中国标准时间)vardemo_date=newDate(667454345000);//MonFeb25199111:59:05GMT+0800(中国标准时间)//对于输入超过取值范围的参数，实行上级进位制varerror_date=newDate(2018,13,25,13,56,08);varerror_date1=newDate(2018,1,30,13,56,08);console.log(error_date);//mth(0-11)区间位12MonFeb25201913:56:08GMT+0800console.log(error_date1);//dd(闰年1-29|平年1-28)2018区间位28FriMar02201813:56:08GMT+0800---------------------------------------------------------------------------------------//getxxx获取的数值number格式:before_date.getYear();//911970-1999获取当前年份(2位)current_date.getYear();//1192000-????获取3位以上就是一直算上去2000年刚好为100before_date.getFullYear();//1991获取完整的年份(4位,1970-????)before_date.getMonth();//1获取当前月份(0-11,0代表1月),所以获取当前月份是before_date.getMonth()+1;before_date.getDate();//25获取当前日(1-31)before_date.getDay();//1获取当前星期X(0-6,0代表星期天)before_date.getTime();//667454345000获取当前时间(从1970.1.1开始的毫秒数)before_date.valueOf();//667554345000同上before_date.getHours();//11获取当前小时数(0-23)before_date.getMinutes();//59获取当前分钟数(0-59)before_date.getSeconds();//5获取当前秒数(0-59)current_date.getMilliseconds();//获取当前毫秒数(0-999)----------------------------------------------------------------------------------------//设置setxxxsetDate()//设置Date对象中月的某一天(1~31)setMonth()//设置Date对象中月份(0~11)setFullYear()//设置Date对象中的年份（四位数字）setFullYear()//setYear()方法已经淘汰setHours()//设置Date对象中的小时(0~23)setMinutes()//设置Date对象中的分钟(0~59)setSeconds()//设置Date对象中的秒钟(0~59)setMilliseconds()//设置Date对象中的毫秒(0~999)setTime()//以毫秒设置Date对象setUTCDate()//根据世界时设置Date对象中月份的一天(1~31)setUTCMonth()//根据世界时设置Date对象中的月份(0~11)setUTCFullYear()//根据世界时设置Date对象中的年份（四位数字）setUTCHours()//根据世界时设置Date对象中的小时(0~23)setUTCMinutes()//根据世界时设置Date对象中的分钟(0~59)setUTCSeconds()//根据世界时设置Date对象中的秒钟(0~59)setUTCMilliseconds()//根据世界时设置Date对象中的毫秒(0~999)

汇总一下new Date().toxxx/toLocalexxx的方法输出，简述一些注意点:

• toDateString/toTimeString || toLocaleDateString/toLocaleTimeString两者的输出文本格式有所差异，且后者新增的参数 locales 和 options 使程序能够指定使用哪种语言格式化规则

• toGMTString、toUTCString两者在定义上只是名字有所差异，其实GMT在时间数值上是接近UTC的，他们输出的格式一样，是标准时间

• toLocaleString方法在不同浏览器输出的文本格式不同，我们可以自定义一个统一的输出

//返回字符串string格式：current_date.toLocaleDateString();//yyyy/MM/dd获取当前日期current_date.toLocaleTimeString();//(上午/下午)hh:mm:ss获取当前时间current_date.toLocaleString();//获取日期与时间//————————————————————————————————–————————————————————————————————–//1、当前系统区域设置格式(toLocaleDateString和toLocaleTimeString)例子:(newDate()).toLocaleDateString()+\"\"+(newDate()).toLocaleTimeString()结果:2008年1月29日16:13:11//2.普通字符串(toDateString和toTimeString)例子:(newDate()).toDateString()+\"\"+(newDate()).toTimeString()结果:TueJan29200816:13:11UTC+0800//3.格林威治标准时间(toGMTString)例子:(newDate()).toGMTString()结果:Tue,29Jan200808:13:11UTC//4.全球标准时间(toUTCString)例子:(newDate()).toUTCString()结果:Tue,29Jan200808:13:11UTC//5.Date对象字符串(toString)例子:(newDate()).toString()结果:TueJan2916:13:11UTC+08002008//————————————————————————————————–————————————————————————————————–

总结

通过本文的介绍，我们学习了三种常用的JavaScript日期格式化方法：使用原生的Date对象方法、借助第三方库(如moment.js)以及自定义格式化函数。每种方法都有其独特的优势和适用场景，开发者可以根据具体需求选择合适的方法。掌握这些技巧，将有助于我们在日常开发中更加高效地处理日期和时间，提升用户体验和代码质量。希望本文的内容能对广大前端开发者有所帮助，使大家在实际工作中更加得心应手。