如何只显示小时、分钟或秒？
使用 hour、minute 和 second 选项，在 Intl.DateTimeFormat 中显示单独的时间组件
介绍
时间显示通常只需展示特定的组成部分。例如，时钟小部件可能只显示小时和分钟，不显示秒。倒计时器可能只显示秒。排班界面可能只显示预约的小时。
当你使用 timeStyle: "short" 这样的预设样式格式化时间时，显示的组件由本地化规则决定。你无法单独移除或添加某些部分。如果短样式包含秒，但你只想要小时和分钟，那么预设样式就无法满足你的需求。
JavaScript 的 Intl.DateTimeFormat 为每个时间组件都提供了独立的选项。你可以精确指定要包含哪些部分，以及每一部分的格式。本教程将讲解如何分别或组合显示小时、分钟和秒。
理解时间组件
一个时间包含三个主要组件，可以分别进行格式化。
hour 表示一天中的小时。minute 表示小时中的分钟。second 表示分钟中的秒。
每个组件都可以设置格式化参数来控制其显示方式。你只需在 options 对象中包含所需的组件即可。
只格式化小时
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 PM"
const twoDigit = new Intl.DateTimeFormat('en-US', {
hour: '2-digit'
});
console.log(twoDigit.format(time)); // "02 PM"
numeric 值会显示不带前导零的小时。2-digit 值会在需要时显示带前导零的小时。
对于美式英语，格式化程序使用 12 小时制并带有 AM/PM 标识。其他语言环境采用不同的时间格式，本课程将在后续内容中介绍。
仅格式化分钟
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' // Error: cannot combine
});
请选择使用时间样式或配置单独组件，二者不可同时使用。
可以将时间组件选项与日期组件选项组合使用。这样可以同时显示特定的日期部分和时间部分。
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));
// Displays time converted to New York timezone
按用户语言环境格式化时间
请使用浏览器的语言偏好设置，根据每位用户的期望格式化时间。
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));
// Output varies by user's locale
// For en-US: "2:05 PM"
// For de-DE: "14:05"
// For 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));
});
// Output for 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 获取用户的本地设置来格式化时间，以便根据每位用户的期望显示时间。多次格式化时复用格式化器实例可提升性能。