在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 (中国标准时间)
// 无参数时
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 AM1.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')) // 秒 552) 格式化函数封装
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:191.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日过了多少毫秒数。获取方法：
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新增 低版本浏览器打不开
valueof( ) 、 getTime( )
const timer = + new Date() 常用
Date.now( ) 低版本浏览器打不开
倒计时函数封装
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 // ————————————————————————————————–————————————————————————————————–
总结
通过本文的介绍，我们学习了三种常用的JavaScript日期格式化方法：使用原生的Date对象方法、借助第三方库(如moment.js)以及自定义格式化函数。每种方法都有其独特的优势和适用场景，开发者可以根据具体需求选择合适的方法。掌握这些技巧，将有助于我们在日常开发中更加高效地处理日期和时间，提升用户体验和代码质量。希望本文的内容能对广大前端开发者有所帮助，使大家在实际工作中更加得心应手。
本文来源于#Seven_正在敲打键盘，由@蜜芽 整理发布。如若内容造成侵权/违法违规/事实不符，请联系本站客服处理!
该文章观点仅代表作者本人，不代表本站立场。本站不承担相关法律责任。
如若转载，请注明出处：https://www.zhanid.com/biancheng/2787.html
