如何仅显示小时、分钟或秒？

介绍

时间显示通常需要仅显示特定的组件。例如，时钟小部件可能只显示小时和分钟而不显示秒数。倒计时计时器可能只显示秒数。日程安排界面可能只显示预约的小时。

当您使用诸如 timeStyle: "short" 之类的预设样式格式化时间时，您会获得由语言环境选择的一组组件。您无法移除单个部分或添加特定部分。如果短格式包括秒数，但您只需要小时和分钟，则预设无法满足您的需求。

JavaScript 的 Intl.DateTimeFormat 提供了针对每个时间组件的单独选项。您可以精确指定要包含的部分以及如何格式化每个部分。本课程将解释如何分别或以特定组合显示小时、分钟和秒数。

了解时间组件

时间包含三个主要组件，您可以独立格式化它们。

hour 表示一天中的小时。minute 表示小时中的分钟。second 表示分钟中的秒数。

每个组件都接受控制其显示方式的格式化值。您只需在选项对象中包含所需的组件。

仅格式化小时

hour 选项用于显示小时组件。它接受两个值。

const time = new Date('2025-03-15T14:05:00');

const numeric = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});
console.log(numeric.format(time)); // "下午2点"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit'
});
console.log(twoDigit.format(time)); // "下午02点"

numeric 值显示小时而不带前导零。2-digit 值在需要时以前导零显示小时。

对于美式英语，格式化器使用带有 AM/PM 指示符的 12 小时制。其他语言环境使用不同的约定，本课程将在后面介绍。

仅格式化分钟

minute 选项显示分钟部分。它接受两个值。

const time = new Date('2025-03-15T14:05:00');

const numeric = new Intl.DateTimeFormat('en-US', {
  minute: 'numeric'
});
console.log(numeric.format(time)); // "5"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  minute: '2-digit'
});
console.log(twoDigit.format(time)); // "05"

numeric 值显示没有前导零的分钟。2-digit 值显示带有前导零的分钟。

仅显示分钟的情况比单独显示小时或秒的情况更少见。大多数时间显示会将分钟与小时结合起来。

仅格式化秒

second 选项显示秒部分。它接受两个值。

const time = new Date('2025-03-15T14:05:08');

const numeric = new Intl.DateTimeFormat('en-US', {
  second: 'numeric'
});
console.log(numeric.format(time)); // "8"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});
console.log(twoDigit.format(time)); // "08"

numeric 值显示没有前导零的秒。2-digit 值显示带有前导零的秒。

这非常适合在计时器中显示经过的秒数或显示时间戳中的秒部分。

结合小时和分钟

大多数时间显示会同时显示小时和分钟。您可以在一个格式化器中结合这些选项。

const time = new Date('2025-03-15T14:05:00');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(formatter.format(time)); // "2:05 PM"

格式化器会根据语言环境自动添加适当的分隔符和格式。对于美式英语，这会生成带有 AM/PM 指示符的冒号分隔符。

您无需指定分隔符或顺序。这些细节由语言环境决定。

结合小时、分钟和秒

当您需要完整的时间精度时，可以包含所有三个时间组件。

const time = new Date('2025-03-15T14:05:08');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
});
console.log(formatter.format(time)); // "2:05:08 PM"

这将生成包含小时、分钟和秒的完整时间。格式化器会处理所有分隔符和格式约定。

组合小时和秒而不包括分钟

您还可以组合小时和秒而不包括分钟，尽管这种情况不常见。

const time = new Date('2025-03-15T14:05:08');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  second: '2-digit'
});
console.log(formatter.format(time)); // "2:08 PM"

即使是非典型的组件组合，格式化器仍然会生成合理的输出。

在数字格式和两位数格式之间选择

numeric 和 2-digit 的区别在单数字值时最为明显。

const earlyTime = new Date('2025-03-15T08:05:03');
const lateTime = new Date('2025-03-15T14:35:48');

const numericFormatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});

const digitFormatter = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
});

console.log('Numeric:');
console.log(numericFormatter.format(earlyTime)); // "8:5:3 AM"
console.log(numericFormatter.format(lateTime)); // "2:35:48 PM"

console.log('2-digit:');
console.log(digitFormatter.format(earlyTime)); // "08:05:03 AM"
console.log(digitFormatter.format(lateTime)); // "02:35:48 PM"

numeric 格式省略了前导零，生成类似 "8:5:3 AM" 的值。而 2-digit 格式包含前导零，生成 "08:05:03 AM"。

在大多数情况下，建议对分钟和秒使用 2-digit 格式。这可以确保表格、列表或数字时钟显示中的宽度和对齐一致。如果没有前导零，像 "8:5 AM" 这样的时间看起来不规则。

对于小时的选择取决于您的设计。数字时钟通常使用 2-digit 格式以保持一致性。文本显示通常使用 numeric 格式以获得更自然的外观。

不同语言环境中的小时格式差异

不同的语言环境在显示小时时使用不同的约定。美式英语使用带有 AM/PM 指示符的 12 小时制。许多其他语言环境使用 24 小时制。

const time = new Date('2025-03-15T14:05:00');

const en = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(en.format(time)); // "2:05 PM"

const de = new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(de.format(time)); // "14:05"

const fr = new Intl.DateTimeFormat('fr-FR', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(fr.format(time)); // "14:05"

const ja = new Intl.DateTimeFormat('ja-JP', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(ja.format(time)); // "14:05"

美式英语将 24 小时制的值转换为 12 小时制并添加 "PM"。德语、法语和日语都使用 24 小时制且不带 AM/PM 指示符。

您为所有语言环境指定相同的选项。格式化器会根据语言环境的约定自动应用适当的小时格式。

不同语言环境中的分隔符差异

时间组件之间的分隔符也因语言环境而异。

const time = new Date('2025-03-15T14:05:08');
const options = {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(time)); // "2:05:08 PM"

const fi = new Intl.DateTimeFormat('fi-FI', options);
console.log(fi.format(time)); // "14.05.08"

美式英语在组件之间使用冒号。芬兰语使用句点。您无需指定分隔符。格式化器会为每种语言环境选择适当的分隔符。

何时使用单独的时间组件

当预设的时间样式不符合您的需求时，请使用单独的时间组件。

如果您需要小时和分钟但不需要秒，而目标语言环境的 timeStyle: "short" 预设包括秒，请单独指定 hour 和 minute。

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});

如果您需要仅显示小时以用于简化的时钟或日程安排，请仅使用 hour 选项。

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});

如果您需要在计时器或计数器中显示经过的秒数，请仅使用 second 选项。

const formatter = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});

何时改用时间样式

如果您需要完整的时间显示，并且预设样式适合您的语言环境，请使用 timeStyle。预设样式更简单，并确保在不同语言环境中格式一致。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'short'
});

这会自动选择适当的组件和格式，而无需您指定单独的选项。

当您需要精确控制显示的部分时，请使用单独的时间组件。当您需要标准的、适合语言环境的格式而无需自定义时，请使用时间样式。

特定时间部分的常见用例

仅显示小时，用于日程安排界面，其中精确到分钟的重要性较低或单独处理。

const time = new Date('2025-03-15T14:00:00');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});

console.log(`Meeting at ${formatter.format(time)}`);
// "Meeting at 2 PM"

显示小时和分钟，用于大多数时钟小部件和时间显示，其中秒的精确度不必要。

const time = new Date('2025-03-15T14:05:00');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});

console.log(formatter.format(time));
// "2:05 PM"

仅显示秒，用于显示已过秒数的倒计时计时器。

const time = new Date('2025-03-15T00:00:45');
const formatter = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});

console.log(`${formatter.format(time)} seconds remaining`);
// "45 seconds remaining"

显示小时、分钟和秒，用于日志或审计记录中的精确时间戳。

const time = new Date('2025-03-15T14:05:08');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
});

console.log(`Event logged at ${formatter.format(time)}`);
// "Event logged at 2:05:08 PM"

使用单独组件时的限制

您不能将单独的时间组件选项（如 hour、minute 或 second）与 timeStyle 选项结合使用。timeStyle 预设已经决定了哪些组件会显示以及它们的格式。

以下代码将无法运行：

const formatter = new Intl.DateTimeFormat('en-US', {
  timeStyle: 'short',
  second: '2-digit'  // 错误：不能组合使用
});

请在使用时间样式和配置单独组件之间进行选择，不能同时使用两者。

您可以将时间组件选项与日期组件选项结合使用。这使您可以同时显示特定的日期部分和时间部分。

const formatter = new Intl.DateTimeFormat('en-US', {
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: '2-digit'
});

const datetime = new Date('2025-03-15T14:05:00');
console.log(formatter.format(datetime));
// "Mar 15, 2:05 PM"

您还可以将时间组件与 timeZone、calendar 或 numberingSystem 等选项结合使用。

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  timeZone: 'America/New_York'
});

const time = new Date('2025-03-15T14:05:00Z');
console.log(formatter.format(time));
// 显示转换为纽约时区的时间

根据用户的语言环境格式化时间

使用浏览器的语言偏好设置，根据每个用户的期望格式化时间。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: '2-digit'
});

const time = new Date('2025-03-15T14:05:00');
console.log(formatter.format(time));
// 输出因用户的语言环境而异
// 对于 en-US: "2:05 PM"
// 对于 de-DE: "14:05"
// 对于 ja-JP: "14:05"

这会根据每个用户的语言环境自动应用适当的小时格式、分隔符和 AM/PM 指示符。

重用格式化器以提高性能

创建 Intl.DateTimeFormat 实例需要处理语言环境数据和选项。当使用相同设置格式化多个时间时，请创建一次格式化器并重复使用。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: '2-digit'
});

const times = [
  new Date('2025-03-15T09:00:00'),
  new Date('2025-03-15T14:30:00'),
  new Date('2025-03-15T18:45:00')
];

times.forEach(time => {
  console.log(formatter.format(time));
});
// 对于 en-US 的输出：
// "9:00 AM"
// "2:30 PM"
// "6:45 PM"

这种模式在格式化时间数组或在用户界面中显示许多时间戳时可以提高性能。

需要记住的事项

hour、minute 和 second 选项允许您显示特定的时间组件，而不是完整的时间。每个选项接受 numeric 或 2-digit 值。numeric 值省略前导零，2-digit 值包含前导零。

您可以组合多个选项以精确显示所需的组件。格式化器会根据语言环境自动处理分隔符、顺序和格式。

小时格式因语言环境而异。一些语言环境使用带有 AM/PM 指示符的 12 小时制，其他语言环境使用不带指示符的 24 小时制。您为所有语言环境指定相同的选项，格式化器会应用适当的约定。

当您需要精确控制显示的部分时，请使用单独的时间组件。当您需要标准格式时，请使用时间样式。您不能将单独的组件选项与时间样式选项结合使用。

使用来自 navigator.language 的用户语言环境格式化时间，以根据每个用户的期望显示时间。在格式化多个时间时，重用格式化器实例以获得更好的性能。