JS实现Date()日期格式化的3种常用方法
近期有些网友想要了解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());//当前日期的年2022 console.log(date.getMonth()+1);//月份+1由于月份是0-11计算所以需要+1 console.log(date.getDate());//日 console.log(date.getDay());//星期几注意:星期日返回的是0 console.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:35 console.log(timer.toLocaleDateString())//日期2023/5/28 console.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'))//年2023 console.log((time.getMonth()+1).toString().padStart(2,'0'))//月05 console.log(time.getDate().toString().padStart(2,'0'))//日29 console.log('星期'+(time.getDay()===0?7:time.getDay()))//周星期1 console.log(time.getHours().toString().padStart(2,'0'))//时01 console.log(time.getMinutes().toString().padStart(2,'0'))//分19 console.log(time.getSeconds().toString().padStart(2,'0'))//秒55
2) 格式化函数封装
lettime=newDate() //定义格式化封装函数 functionformaData(timer){ constyear=timer.getFullYear() constmonth=timer.getMonth()+1//由于月份从0开始,因此需加1 constday=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+0800 console.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年刚好为100 before_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) ---------------------------------------------------------------------------------------- //设置setxxx setDate()//设置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)以及自定义格式化函数。每种方法都有其独特的优势和适用场景,开发者可以根据具体需求选择合适的方法。掌握这些技巧,将有助于我们在日常开发中更加高效地处理日期和时间,提升用户体验和代码质量。希望本文的内容能对广大前端开发者有所帮助,使大家在实际工作中更加得心应手。
推荐阅读
-
Notepad++ 插件推荐:代码折叠、语法高亮增强工具合集
-
Emacs Evil 模式:Vim 用户快速上手 Emacs 的过渡方案
-
Vim 寄存器深度解析:多缓冲区操作与复杂文本处理
-
Atom 主题切换:Material Design 与扁平化风格对比推荐
-
Lightly IDE 快捷键:Python 开发者必学的效率提升操作
-
Xcode 模拟器调试:多设备同步与性能监控技巧
-
PyCharm 代码格式化:黑魔法工具 Black 与自动规范配置
-
IntelliJ IDEA Docker 集成:微服务本地调试与镜像构建
-
VS Code Remote SSH:远程服务器开发环境搭建全流程
-
Retool 数据库连接:支持 MySQL、PostgreSQL 等多数据源配置