JavaScript为我们提供了多种日期格式的选择，从基础的本地化格式一直到复杂的定制选项。无论您是在构建动态Web应用程序、管理时效敏感数据还是仅仅以用户友好的方式显示日期，理解不同的日期格式都是Web开发的一个基本而重要的方面。
在这里，我们将覆盖JavaScript的不同日期格式，并通过一些例子来更好地理解它们。下面的表格解释了JavaScript中使用的各种日期格式。
日期格式表
| 格式 |
示例 |
描述 |
| ISO 格式 (UTC) |
2024-01-29T12:34:56.789Z |
包含年、月、日和时间组件的标准格式。'Z' 表示时间是UTC（协调世界时）。 |
| 本地日期时间 |
1/29/2024, 12:34:56 PM |
基于用户的系统或浏览器设置的本地化日期时间表示形式，符号依据地区而变化。 |
| 自定义日期格式 |
Jan 29, 2024, 12:34:56 PM PST |
自定义格式允许开发者指定哪些日期组件（年、月、日、小时、分钟、秒）应包含在内以及格式。 |
| 简短日期格式 |
01/29/24 |
日期的简短表示形式，包含月份、日期和年份。顺序可能因地区而异。 |
| 长日期格式 |
January 29, 2024 |
包含完整月份名称、日期和年份的长日期表示形式。 |
| 简短时间格式 |
12:34 PM |
包含小时和分钟的时间简短表示形式。 |
| 长时间格式 |
12:34:56 PM |
包含小时、分钟和秒的时间长表示形式。 |
| UTC 日期格式 |
Tue, 29 Jan 2024 12:34:56 GMT |
包含一周中的哪一天和时区缩写（GMT）的UTC格式日期和时间字符串。 |
| 时间戳 |
1643450096789 |
自1970年1月1日00:00:00 UTC以来的毫秒数。也称为Unix时间戳。适用于处理和比较日期。 |
| 相对时间 |
2 hours ago, 3 days ago |
以人类可读的方式表达时间差，例如对于过去的日期使用 "ago"。 |
示例
示例 1：以不同格式显示当前日期
此示例中JavaScript动态生成并在页面上显示了多种日期格式：ISO格式、本地日期时间、自定义日期格式；简短和长日期格式；简短和长时间格式；UTC日期格式，甚至时间戳。此外，它计算了两个给定日期之间的相对时间——当前日期与指定的前一日期进行比较，并以人类可读的形式展示这些结果。这段代码展示了在HTML上下文中使用JavaScript进行日期格式化的实用技术。
<!DOCTYPE html>
<html>
<body>
<h2>所有类型的日期格式</h2>
<script>
const currentDate = new Date();
function appendFormattedDate(type, formatFunction) {
const formattedDate = formatFunction(currentDate);
const paragraph = document.createElement('p');
paragraph.innerText = `${type}: ${formattedDate}`;
document.body.appendChild(paragraph);
}
appendFormattedDate('ISO 格式 (UTC)', date => date.toISOString());
appendFormattedDate('本地日期时间', date => date.toLocaleString());
const options = {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
timeZoneName: 'short'
};
appendFormattedDate('自定义日期格式', date => date.toLocaleString('en-US', options));
appendFormattedDate('简短日期格式', date => date.toLocaleDateString());
appendFormattedDate('长日期格式', date => date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }));
appendFormattedDate('简短时间格式', date => date.toLocaleTimeString());
appendFormattedDate('长时间格式', date => date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit' }));
appendFormattedDate('UTC 日期格式', date => date.toUTCString());
appendFormattedDate('时间戳', date => date.getTime());
const previousDate = new Date('2024-01-29T00:00:00Z');
const relativeTime = formatRelativeTime(previousDate, currentDate);
appendFormattedDate('相对时间', () => relativeTime);
function formatRelativeTime(previousDate, currentDate) {
const elapsedMilliseconds = currentDate - previousDate;
const seconds = Math.floor(elapsedMilliseconds / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
if (seconds < 60) {
return `${seconds} 秒${seconds !== 1 ? 's' : ''} ago`;
} else if (minutes < 60) {
return `${minutes} 分钟${minutes !== 1 ? 's' : ''} ago`;
} else if (hours < 24) {
return `${hours} 小时${hours !== 1 ? 's' : ''} ago`;
} else {
return '超过一天之前';
}
}
</script>
</body>
</html>
示例 2：自定义日期格式
此示例让我们更深入地了解没有固定格式前缀而是由开发者选择的自定义日期格式。我们使用Intl.DateTimeFormat对象来创建我们自己的格式（weekday, month, day, year）。有了这个选项，自定义日期格式不仅可以选择要显示的日期部分，还可以选择它们的顺序。网站在某些国家可能更适合显示日期为dd/mm/yyyy，而在其他国家则更适合显示mm-dd-yyyy。
<!DOCTYPE html>
<html>
<body>
<h2>自定义日期格式示例</h2>
<script>
const currentDate = new Date();
function customDateFormat(date) {
const options = { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' };
return new Intl.DateTimeFormat('en-US', options).format(date);
}
function appendFormattedDate(type, formatFunction) {
const formattedDate = formatFunction(currentDate);
document.body.innerHTML += `<p>${type}: ${formattedDate}</p>`;
}
appendFormattedDate('自定义日期格式', customDateFormat);
</script>
</body>
</html>
示例 3：生成未来五天的日期
在此示例中，JavaScript基于当前日期生成未来的日期，具体来说是未来五天的日期。随后，它以三种不同的方式格式化并显示这些日期：ISO格式；本地特定排列，以及自定义布局。无需任何用户输入，JavaScript处理日期的能力通过动态生成来自generateFutureDates函数的日期得到了实际的演示。
<!DOCTYPE html>
<html>
<body>
<h2>未来日期生成器</h2>
<div id="futureDates"></div>
<script>
function generateFutureDates() {
const today = new Date();
const futureDatesDiv = document.getElementById('futureDates');
for (let i = 1; i <= 5; i++) {
const futureDate = new Date(today.getTime() + i * 24 * 60 * 60 * 1000);
const isoFormat = futureDate.toISOString();
const localeFormat = futureDate.toLocaleString();
const customFormatOptions = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', timeZoneName: 'short' };
const customFormat = futureDate.toLocaleString('en-US', customFormatOptions);
futureDatesDiv.innerHTML += `
<p><strong>第 ${i} 天:</strong></p>
<p>ISO 格式 (UTC): ${isoFormat}</p>
<p>本地日期时间: ${localeFormat}</p>
<p>自定义格式: ${customFormat}</p>
<hr>
`;
}
}
generateFutureDates();
</script>
</body>
</html>