极客笔记JavaScript日期格式化
在前端开发中，经常会涉及到日期的处理和展示。JavaScript提供了丰富的日期对象和方法，可以方便地对日期进行格式化。本文将详细介绍如何使用JavaScript对日期进行格式化，包括日期对象的创建、格式化方法的使用以及常见的日期格式化示例。
创建日期对象
在JavaScript中，可以使用Date对象来表示日期和时间。可以通过new Date()来创建一个当前时间的日期对象，也可以传入特定的日期字符串或时间戳来创建一个指定时间的日期对象。
示例代码：
// 创建当前时间的日期对象
const now = new Date();
console.log(now);
// 创建指定时间的日期对象
const specificDate = new Date('2022-01-01T00:00:00');
console.log(specificDate);
// 创建指定时间戳的日期对象
const timestampDate = new Date(1640995200000);
console.log(timestampDate);
Output:
日期格式化方法
JavaScript提供了一些方法来对日期进行格式化，常用的方法包括toLocaleString()、toLocaleDateString()、toLocaleTimeString()和toISOString()等。这些方法可以根据不同的地区和语言环境来格式化日期。
示例代码：
const date = new Date('2022-01-01T00:00:00');
// 格式化为本地日期时间字符串
console.log(date.toLocaleString());
// 格式化为本地日期字符串
console.log(date.toLocaleDateString());
// 格式化为本地时间字符串
console.log(date.toLocaleTimeString());
// 格式化为ISO格式字符串
console.log(date.toISOString());
Output:
自定义日期格式化
除了使用内置的日期格式化方法外，还可以自定义日期格式化函数来满足特定的需求。可以使用Date对象的方法来获取年、月、日、时、分、秒等信息，然后根据需要进行格式化。
示例代码：
const date = new Date('2022-01-01T00:00:00');
// 自定义日期格式化函数
function formatDate(date) {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
return `{year}-{month}-{day}{hours}:{minutes}:{seconds}`;
}
console.log(formatDate(date));
Output:
常见日期格式化示例
下面列举一些常见的日期格式化示例，包括年月日、时分秒、星期几等格式化方式。
格式化为年月日
示例代码：
const date = new Date('2022-01-01T00:00:00');
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
console.log(`{year}-{month}-${day}`);
Output:
格式化为时分秒
示例代码：
const date = new Date('2022-01-01T00:00:00');
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
console.log(`{hours}:{minutes}:${seconds}`);
Output:
格式化为星期几
示例代码：
const date = new Date('2022-01-01T00:00:00');
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const dayOfWeek = days[date.getDay()];
console.log(dayOfWeek);
Output:
格式化为中文日期
示例代码：
const date = new Date('2022-01-01T00:00:00');
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
console.log(`{year}年{month}月${day}日`);
Output:
格式化为12小时制时间
示例代码：
const date = new Date('2022-01-01T13:30:00');
let hours = date.getHours();
const minutes = date.getMinutes();
const ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12 || 12;
console.log(`{hours}:{minutes} ${ampm}`);
Output:
格式化为相对时间
示例代码：
const date = new Date('2022-01-01T00:00:00');
const now = new Date();
const diff = now - date;
const seconds = Math.floor(diff / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
let relativeTime = '';
if (days > 0) {
relativeTime = `{days} days ago`;
} else if (hours>0) {
relativeTime = `{hours} hours ago`;
} else if (minutes > 0) {
relativeTime = `{minutes} minutes ago`;
} else {
relativeTime = `{seconds} seconds ago`;
}
console.log(relativeTime);
Output:
格式化为倒计时
示例代码：
const endDate = new Date('2022-12-31T23:59:59');
const now = new Date();
const diff = endDate - now;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
console.log(`{days} days{hours} hours {minutes} minutes{seconds} seconds left`);
Output:
格式化为友好时间
示例代码：
const date = new Date('2022-01-01T00:00:00');
const now = new Date();
const diff = now - date;
const seconds = Math.floor(diff / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
let friendlyTime = '';
if (days > 7) {
friendlyTime = date.toLocaleDateString();
} else if (days > 1) {
friendlyTime = `{days} days ago`;
} else if (days === 1) {
friendlyTime = 'Yesterday';
} else if (hours>1) {
friendlyTime = `{hours} hours ago`;
} else if (hours === 1) {
friendlyTime = 'An hour ago';
} else if (minutes > 1) {
friendlyTime = `${minutes} minutes ago`;
} else if (minutes === 1) {
friendlyTime = 'A minute ago';
} else {
friendlyTime = 'Just now';
}
console.log(friendlyTime);
Output:
格式化为倒计时时钟
示例代码：
const endDate = new Date('2022-12-31T23:59:59');
const now = new Date();
const diff = endDate - now;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60);
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
function formatTime(time) {
return time < 10 ? `0{time}` : time;
}
console.log(`{formatTime(days)}:{formatTime(hours)}:{formatTime(minutes)}:${formatTime(seconds)}`);
格式化为时间戳
示例代码：
const date = new Date('2022-01-01T00:00:00');
const timestamp = date.getTime();
console.log(timestamp);
Output:
结语
本文介绍了如何使用JavaScript对日期进行格式化，包括创建日期对象、使用内置的日期格式化方法、自定义日期格式化函数以及常见的日期格式化示例。通过灵活运用这些方法，可以轻松地处理各种日期格式化需求，提升前端开发效率。