如何显示时区名称，例如 PST 或 Pacific Standard Time

介绍

当您向用户显示时间时，显示时区可以帮助他们理解时间是处于他们的本地时区还是其他时区。一个安排在 下午3:00 PST 的会议告诉用户需要从太平洋时间进行转换。如果没有 PST 标签，用户必须猜测适用哪个时区。

时区可以以多种格式显示。您可以显示缩写名称，例如 PST，完整名称，例如 Pacific Standard Time，或基于偏移的格式，例如 GMT-8。不同的格式适用于不同的目的。缩写节省空间但可能会引起歧义。完整名称清晰但占用更多空间。当具体的时区名称不如小时差异重要时，偏移格式更为适用。

JavaScript 提供了 Intl.DateTimeFormat API 来自动显示时区名称。本课程将解释什么是时区名称，它们如何在标准时间和夏令时之间变化，以及如何以不同格式显示它们。

理解时区名称格式

时区名称以几种不同的格式出现，每种格式具有不同的特点。

短名称使用缩写，例如 PST、EST 或 JST。这些缩写节省空间但可能会引起歧义。例如，CST 可能表示北美的中央标准时间、中国标准时间或古巴标准时间。

长名称拼写出完整的时区名称，例如 Pacific Standard Time、Eastern Standard Time 或 Japan Standard Time。这些名称避免了歧义，但占用更多空间。

通用名称指的是时区，但不具体说明当前是标准时间还是夏令时。例如，PT 表示太平洋时间，这可能是 PST 或 PDT，具体取决于日期。

偏移格式显示与 UTC 的小时差。例如，GMT-8 表示比格林尼治标准时间晚8小时。GMT-05:00 表示晚5小时，小时和分钟之间用冒号分隔。

您选择的格式取决于您的使用场景。当空间有限且可以接受歧义时，请使用短名称。当清晰度比空间更重要时，请使用长名称。当需要显示与 UTC 的数字关系时，请使用偏移格式。

使用 Intl.DateTimeFormat 显示时区名称

Intl.DateTimeFormat 构造函数接受一个 timeZoneName 选项，用于控制格式化日期和时间时如何显示时区名称。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 输出: "1/15/2025, 7:30 AM PST"

这会创建一个用于美式英语的格式化器，显示 America/Los_Angeles 时区的时间。timeZoneName: 'short' 选项会在输出中添加缩写的时区名称。结果中包含 PST。

timeZone 选项设置格式化时使用的时区，而 timeZoneName 选项控制是否以及如何显示时区名称。这两个选项协同工作。timeZone 决定时间转换，而 timeZoneName 决定标签的显示。

显示缩写的时区名称

timeZoneName: 'short' 选项会显示缩写的时区名称。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 输出: "1/15/2025, 10:30 AM EST"

简短格式会生成 EST，表示东部标准时间。这种格式紧凑，适合在表格、列表或其他空间受限的布局中使用。

不同的时区会生成不同的缩写。

const date = new Date('2025-01-15T15:30:00Z');

const formatters = [
  { timeZone: 'America/Los_Angeles', name: 'Pacific' },
  { timeZone: 'America/Chicago', name: 'Central' },
  { timeZone: 'America/New_York', name: 'Eastern' },
  { timeZone: 'Europe/London', name: 'London' },
  { timeZone: 'Asia/Tokyo', name: 'Tokyo' }
];

formatters.forEach(({ timeZone, name }) => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timeZone,
    timeZoneName: 'short',
    hour: 'numeric',
    minute: 'numeric'
  });
  console.log(`${name}: ${formatter.format(date)}`);
});
// 输出:
// Pacific: 7:30 AM PST
// Central: 9:30 AM CST
// Eastern: 10:30 AM EST
// London: 3:30 PM GMT
// Tokyo: 12:30 AM JST

每个时区都会生成其标准缩写。Pacific 使用 PST，Central 使用 CST，Eastern 使用 EST，London 使用 GMT，Tokyo 使用 JST。

显示完整的时区名称

timeZoneName: 'long' 选项会显示完整的时区名称。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 输出: "1/15/2025, 7:30 AM Pacific Standard Time"

长格式会显示 Pacific Standard Time 而不是 PST。这种格式消除了歧义，但占用的空间显著增加。

当需要清晰表达且空间允许时，长名称是一个很好的选择。

const date = new Date('2025-01-15T15:30:00Z');

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

console.log(formatter.format(date));
// 输出: "10:30 AM Eastern Standard Time"

完整的名称清楚地表明了适用的时区，而无需用户解读缩写。

显示时区偏移量

timeZoneName: 'shortOffset' 选项以紧凑格式显示 UTC 偏移量。

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

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 输出: "7:30 AM GMT-8"

这会显示 GMT-8，表示该时区比 UTC 晚 8 小时。当具体的时区名称不如与 UTC 的数字关系重要时，偏移量格式是一个不错的选择。

timeZoneName: 'longOffset' 选项会以小时和分钟显示偏移量。

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

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 输出: "7:30 AM GMT-08:00"

这会显示 GMT-08:00，小时和分钟之间有一个冒号。这种格式更精确，并遵循 ISO 8601 标准。

具有半小时或 45 分钟偏移量的时区会在长格式中显示完整的偏移量。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'Asia/Kolkata',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 输出: "9:00 PM GMT+05:30"

印度标准时间与 UTC 有 5 小时 30 分钟的偏移量。长偏移量格式会将其显示为 GMT+05:30。

显示通用时区名称

timeZoneName: 'shortGeneric' 选项显示一个通用的缩写，无论是否启用夏令时都适用。

const winterFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const summerFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(winterFormatter.format(winterDate));
// 输出: "7:30 AM PT"

console.log(summerFormatter.format(summerDate));
// 输出: "8:30 AM PT"

冬季和夏季日期都显示 PT，表示太平洋时间。通用格式不会区分太平洋标准时间和太平洋夏令时间。当您希望无论季节如何都使用一致的标签时，这种方式非常适用。

timeZoneName: 'longGeneric' 选项提供完整的通用名称。

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

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 输出: "7:30 AM Pacific Time"

这会显示 Pacific Time 而不是 Pacific Standard Time。通用的长格式提供了清晰的描述，而不具体说明是标准时间还是夏令时间。

夏令时如何影响时区名称

时区名称会在标准时间和夏令时间之间发生变化。timeZoneName 选项会自动反映这种变化。

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

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// 输出: "7:30 AM PST"

console.log(formatter.format(summerDate));
// 输出: "8:30 AM PDT"

在一月份，格式化器显示 PST，表示太平洋标准时间。在七月份，它显示 PDT，表示太平洋夏令时间。格式化器会根据日期自动选择正确的名称。

时区偏移量也会在标准时间和夏令时间之间发生变化。

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

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// 输出: "7:30 AM GMT-8"

console.log(formatter.format(summerDate));
// 输出: "8:30 AM GMT-7"

在冬季，太平洋时间为 GMT-8。在夏季，它为 GMT-7。当夏令时开始时，偏移量会改变一个小时。

长名称也会反映这种变化。

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

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// 输出: "7:30 AM Pacific Standard Time"

console.log(formatter.format(summerDate));
// 输出: "8:30 AM Pacific Daylight Time"

长格式会从 Pacific Standard Time 变为 Pacific Daylight Time。格式化器会根据日期和时区自动处理这些转换。

在不同语言中显示时区名称

时区名称在不同语言中显示方式不同。区域标识符决定了格式化器使用哪种语言来显示时区名称。

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const esFormatter = new Intl.DateTimeFormat('es-ES', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const frFormatter = new Intl.DateTimeFormat('fr-FR', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// 输出: "7:30 AM Pacific Standard Time"

console.log(esFormatter.format(date));
// 输出: "7:30 hora estándar del Pacífico"

console.log(frFormatter.format(date));
// 输出: "07:30 heure normale du Pacifique"

英语显示 Pacific Standard Time。西班牙语显示 hora estándar del Pacífico。法语显示 heure normale du Pacifique。每种语言都使用其自己的时区名称翻译。

缩写名称通常在不同语言中保持一致，因为它们是简写形式。

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

const esFormatter = new Intl.DateTimeFormat('es-ES', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// 输出: "7:30 AM PST"

console.log(esFormatter.format(date));
// 输出: "7:30 PST"

英语和西班牙语都使用 PST 作为缩写。然而，在此示例中，西班牙语省略了 AM 指示符，因为西班牙语的格式化习惯与英语不同。

偏移量在所有语言中保持数字形式。

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const jaFormatter = new Intl.DateTimeFormat('ja-JP', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// 输出: "7:30 AM GMT-08:00"

console.log(jaFormatter.format(date));
// 输出: "7:30 GMT-08:00"

英语和日语都显示 GMT-08:00 作为偏移量。数字偏移量不需要翻译。

仅显示时区名称

您可以通过省略其他日期和时间组件，仅显示时区名称。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 输出: "Pacific Standard Time"

当您仅指定 timeZoneName 而不包含其他选项时，格式化器将仅输出时区名称。这在您需要将时区与日期和时间分开显示时非常有用。

您可以使用此方法创建标签或图例。

const timeZones = [
  'America/Los_Angeles',
  'America/Chicago',
  'America/New_York',
  'Europe/London',
  'Asia/Tokyo'
];

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

const date = new Date();

timeZones.forEach(timeZone => {
  formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timeZone,
    timeZoneName: 'long'
  });
  console.log(formatter.format(date));
});
// 输出:
// Pacific Standard Time (或根据日期为 Pacific Daylight Time)
// Central Standard Time (或根据日期为 Central Daylight Time)
// Eastern Standard Time (或根据日期为 Eastern Daylight Time)
// Greenwich Mean Time (或根据日期为 British Summer Time)
// Japan Standard Time

这将创建适合在下拉菜单或选择界面中显示的时区名称列表。

将时区名称与特定日期格式结合

您可以将时区名称与特定的日期和时间格式选项结合使用。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 输出: "Wednesday, January 15, 2025, 10:30 AM EST"

这将完整的日期格式与短时区名称结合。输出包括星期几、完整月份名称、日期、年份、时间和时区缩写。

您可以使用此方法创建完整的日期时间显示。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  dateStyle: 'full',
  timeStyle: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 输出: "Wednesday, January 15, 2025 at 7:30:00 AM Pacific Standard Time"

请注意，timeZoneName 选项不能与 dateStyle 或 timeStyle 一起使用。如果您需要使用样式快捷方式，时区名称已经包含在 long 和 full 时间样式中。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  dateStyle: 'full',
  timeStyle: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 输出: "Wednesday, January 15, 2025 at 7:30:00 AM PST"

long 时间样式会自动包含短时区名称。您无需单独指定 timeZoneName。

显示事件日程的时区名称

时区名称可以帮助用户了解事件在不同地区的发生时间。

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

const events = [
  { name: 'Kickoff Meeting', time: '2025-03-15T14:00:00Z', timeZone: 'America/New_York' },
  { name: 'Design Review', time: '2025-03-15T17:00:00Z', timeZone: 'America/Los_Angeles' },
  { name: 'Sprint Planning', time: '2025-03-16T01:00:00Z', timeZone: 'Asia/Tokyo' }
];

events.forEach(event => {
  const localFormatter = new Intl.DateTimeFormat('en-US', {
    timeZone: event.timeZone,
    timeZoneName: 'short',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric'
  });

  const date = new Date(event.time);
  console.log(`${event.name}: ${localFormatter.format(date)}`);
});
// 输出:
// Kickoff Meeting: Mar 15, 9:00 AM EST
// Design Review: Mar 15, 9:00 AM PST
// Sprint Planning: Mar 16, 10:00 AM JST

每个事件都以其本地时区显示。用户可以看到 Kickoff Meeting 是在东部时间上午 9:00，Design Review 是在太平洋时间上午 9:00，而 Sprint Planning 是在日本时间上午 10:00。

您还可以在多个时区显示同一事件。

const meetingTime = new Date('2025-03-15T17:00:00Z');

const timeZones = [
  { zone: 'America/Los_Angeles', label: 'Pacific' },
  { zone: 'America/Chicago', label: 'Central' },
  { zone: 'America/New_York', label: 'Eastern' },
  { zone: 'Europe/London', label: 'London' }
];

console.log('Global Team Meeting:');
timeZones.forEach(({ zone, label }) => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: zone,
    timeZoneName: 'short',
    hour: 'numeric',
    minute: 'numeric'
  });
  console.log(`${label}: ${formatter.format(meetingTime)}`);
});
// 输出:
// Global Team Meeting:
// Pacific: 9:00 AM PST
// Central: 11:00 AM CST
// Eastern: 12:00 PM EST
// London: 5:00 PM GMT

这显示了一个会议时间转换为多个时区的结果。不同地区的团队成员可以快速找到他们的本地时间。