JavaScript 如何以 12 小时 AM/PM 格式显示日期时间？

用 JavaScript 显示 12 小时 AM/PM 格式的日期时间

简介

在许多应用中，以易于理解的格式显示日期和时间至关重要。JavaScript 提供了几种方法，可以将日期时间对象转换为 12 小时 AM/PM 格式的字符串。本文将探讨这些方法，指导你根据需要轻松格式化你的日期时间。

使用 toLocaleTimeString() 方法

最简单的方法是使用 toLocaleTimeString() 方法。此方法将日期时间对象转换为本地时间字符串，其中包括小时、分钟、秒和可选的 AM/PM 指示符。要以 12 小时 AM/PM 格式显示时间，请使用以下语法：

const date = new Date();
const timeString = date.toLocaleTimeString('en-US', { hour12: true });

使用 getHours() 和 getMinutes() 方法

如果你需要更多控制 over 格式化字符串，可以使用 getHours() 和 getMinutes() 方法。这些方法分别获取日期时间对象的时和小分。你可以手动创建 12 小时 AM/PM 格式的时间字符串：

const date = new Date();
const hours = date.getHours() % 12 || 12; // 获取 12 小时制小时数
const minutes = date.getMinutes();
const ampm = date.getHours() >= 12 ? 'PM' : 'AM';
const timeString = `${hours}:${minutes} ${ampm}`;

使用 Intl.DateTimeFormat() 构造函数

Intl.DateTimeFormat() 构造函数允许你创建格式化日期和时间值的格式化程序。要以 12 小时 AM/PM 格式显示时间，可以使用以下语法：

const date = new Date();
const formatter = new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
const timeString = formatter.format(date);

自定义格式化字符串

如果你需要对格式化字符串有更多控制，可以使用 Intl.DateTimeFormat() 构造函数的 pattern 选项。以下示例显示如何使用自定义格式化字符串以 12 小时 AM/PM 格式显示时间：

const date = new Date();
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hour12: true,
  pattern: 'h:mm a'
});
const timeString = formatter.format(date);

结论

使用 JavaScript 以 12 小时 AM/PM 格式显示日期时间非常简单。根据你的特定需求，你可以选择最合适的方法。通过本文中提供的示例，你可以轻松地将日期时间对象转换为可读且有意义的时间字符串。

常见问题解答

1. 如何将日期时间显示为 24 小时制？

   • 省略 hour12 选项即可将日期时间显示为 24 小时制。

2. 我可以更改 AM/PM 指示符吗？

   • 是的，你可以通过在 pattern 选项中使用不同的字母来更改 AM/PM 指示符。例如，使用 'a' 表示小写 AM/PM，使用 'A' 表示大写 AM/PM。

3. 如何显示秒？

   • 要显示秒，请在 pattern 选项中添加 's'。例如，'h:mm:ss a' 将显示小时、分钟和秒。

4. 如何显示时区？

   • 要显示时区，请使用 toLocaleTimeString() 方法并传递时区选项。例如，'toLocaleTimeString('en-US', { timeZone: 'America/New_York' })' 将显示美国纽约时区的日期时间。

5. 如何格式化国际日期时间？

   • 使用 Intl.DateTimeFormat() 构造函数时，你可以指定语言和区域选项以格式化国际日期时间。例如，'new Intl.DateTimeFormat('de-DE', { ... })' 将格式化德语日期时间。