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

date( ) 介绍

date( ) 基本使用

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

若date()没有参数时返回当前时间
若date(timer)有参数时返回参数设置的时间
- 参数写法：'2012-2-2 08:54:32'（字符串）
- 返回值格式：sun may 28 2023 23:36:28 gmt+0800 (中国标准时间)

    // 无参数时
    let datew = new date();
    console.log('当前时间', datew); // sun may 28 2023 23:36:28 gmt+0800 (中国标准时间)
    // 有参数时
    let datey = new date('2012-2-2 08:54:32');
    console.log('指定时间', datey); // thu feb 02 2012 08:54:32 gmt+0800 (中国标准时间)

date() 常用api

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

    let date = new date();
    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)

    let timer = new date()
    console.log(timer.tolocalestring()) // 日期+时间 2023/5/28 23: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:39 am

1.2 字符串方法

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

padstart 从原字符串左侧开始填充
padend 从原字符串右侧开始填充

    let str = '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) 格式化函数封装

    let time = new date()
    // 定义格式化封装函数
    function formadata(timer) {
        const year = timer.getfullyear()
        const month = timer.getmonth() + 1 // 由于月份从0开始，因此需加1
        const day = timer.getdate()
        const hour = timer.gethours()
        const minute = timer.getminutes()
        const second = timer.getseconds()
        return `${pad(year, 4)}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}:${pad(second)}`
    }
    // 定义具体处理标准
    // timeel 传递过来具体的数值：年月日时分秒
    // total 字符串总长度 默认值为2
    // str 补充元素 默认值为"0"
    function pad(timeel, total = 2, str = '0') {
        return timeel.tostring().padstart(total, str)
    }
    // 调用函数
    console.log(formadata(time)) // 2023-05-29 00:30:19

1.3 第三方库

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

1)安装 moment.js

    npm install moment

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

    import moment from 'moment';
    vue.prototype.$moment = moment

3)格式化时间

// `this.$moment()` 输出当前时间的moment对象
console.log(this.$moment().format('yyyy-mm-dd hh:mm:ss')); // 2023-05-29 00:30:19

其他处理方法

2.1 时间戳

date 时间戳（毫秒数）：

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

获取方法：

valueof( ) 、 gettime( )
const timer = + new date() 常用
date.now( ) 低版本浏览器打不开

let date = new date();
// 写法一
console.log(date.valueof()); //现在时间距离1970.1.1的毫秒数
console.log(date.gettime());

// 写法二
let date = +new date(); 
console.log(date); //返回当前总的毫秒数

// 写法三
 console.log(date.now()); // h5新增 低版本浏览器打不开

倒计时函数封装

    function countdown(time) {
        let datenow = +new date(); // 获取当前时间的毫秒数
        let dateover = +new date(time); // 获取目标时间的毫秒数
        let gaptime = (dateover - datenow) / 1000 // 由毫秒得到秒
        let s = pad(parseint(gaptime % 60)); // 秒数
        let m = pad(parseint(gaptime / 60 % 60)); // 分钟数
        let h = pad(parseint(gaptime / 60 / 60 % 24)); // 小时数
        let d = pad(parseint(cha / 60 / 60 / 24)); // 天数
        return d + '天' + h + '小时' + m + '分钟' + s + '秒';
    }
    
    // 时间标准的处理函数
    function pad(timeel, total = 2, str = '0') {
        return timeel.tostring().padstart(total, str)
    }
    
    // 调用函数
    console.log(countdown('2122-5-19 8: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中单独调用new date();  显示这种格式  wed jul 31 2019 13:20:09 gmt+0800 (中国标准时间)
        * 但是用new date() 参与计算会自动转换为从1970.1.1开始的毫秒数
        */
        var current_date = new date(); // wed jan 24 2019 13:20:09 gmt+0800 (中国标准时间)
        var before_date = new date("1991/2/25 11:59:05"); // mon feb 25 1991 11:59:05 gmt+0800 (中国标准时间)
        var demo_date = new date(667454345000); // mon feb 25 1991 11:59:05 gmt+0800 (中国标准时间)
        // 对于输入超过取值范围的参数，实行上级进位制
        var error_date = new date(2018,13,25,13,56,08);
        var error_date1 = new date(2018,1,30,13,56,08);
        console.log(error_date); // mth(0-11) 区间位12  mon feb 25 2019 13:56:08 gmt+0800
        console.log(error_date1); // dd(闰年1-29|平年1-28) 2018区间位28 fri mar 02 2018 13:56:08 gmt+0800
        ---------------------------------------------------------------------------------------

        // getxxx获取的数值number格式:
        before_date.getyear(); //  91   1970-1999获取当前年份(2位) 
        current_date.getyear(); //  119   2000-????获取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)
     例子:(new date()).tolocaledatestring() + " " + (new date()).tolocaletimestring()
     结果: 2008年1月29日 16:13:11
// 2.普通字符串(todatestring和totimestring)
     例子: (new date()).todatestring() + " " + (new date()).totimestring()
     结果:tue jan 29 2008 16:13:11 utc+0800
// 3.格林威治标准时间(togmtstring)
     例子: (new date()).togmtstring()
     结果:tue, 29 jan 2008 08:13:11 utc
// 4.全球标准时间(toutcstring)
     例子: (new date()).toutcstring()
     结果:tue, 29 jan 2008 08:13:11 utc
// 5.date对象字符串(tostring)
     例子: (new date()).tostring()
     结果:tue jan 29 16:13:11 utc+0800 2008
// ————————————————————————————————–————————————————————————————————–