本文旨在解决在前端应用中获取标准时区名称列表的需求。针对从 moment.js 迁移到 day.js 后，发现 day.js 缺乏直接获取时区列表方法的问题，本教程将介绍如何利用原生 javascript 的 `intl.supportedvaluesof('timezone')` api，高效、准确地获取符合 iana 规范的时区标识符列表，无需依赖特定日期库插件，并解释其优势及应用。
在前端开发中，处理日期和时间，尤其是涉及到不同时区时，是一个常见的需求。开发者经常会使用像 Moment.js 或 Day.js 这样的流行日期处理库。Moment.js 及其配套的 Moment-Timezone 插件提供了一个便捷的方法 moment.tz().names() 来获取所有支持的时区名称列表。然而，当项目迁移到更轻量级的 Day.js 时，可能会发现 Day.js 核心库或其常用插件并未直接提供类似的功能来获取一个标准化的时区名称列表。
尽管 Day.js 拥有强大的插件生态系统（例如 dayjs-timezone 用于时区转换），但获取一个 所有可用时区名称 的列表，实际上并不需要依赖特定的日期处理库。现代浏览器提供了一个强大的原生 JavaScript API，即 Intl 对象，它专门用于国际化相关的操作，其中就包括了获取支持的时区列表。
利用 Intl.supportedValuesOf('timeZone') 获取时区列表
Intl.supportedValuesOf() 方法是 Intl 对象的静态方法，它返回一个包含给定类别所有支持值的数组。当传入 'timeZone' 作为参数时，它将返回一个由浏览器支持的所有 IANA（Internet Assigned Numbers Authority）时区标识符组成的数组。这些标识符是全球公认的标准，例如 "America/New_York"、"Europe/London"、"Asia/Shanghai" 等。
示例代码：
立即学习“Java免费学习笔记（深入）”；
您可以在浏览器的开发者控制台或任何 JavaScript 环境中执行以下代码，立即获取支持的时区列表：
const timezoneNames = Intl.supportedValuesOf('timeZone');
console.log("当前环境支持的 IANA 时区列表（共 " + timezoneNames.length + " 个）：");
timezoneNames.forEach(zone => {
console.log(zone);
});
// 如果您需要将列表用于下拉菜单或其他UI组件，可以直接使用这个数组
// console.log(timezoneNames);执行上述代码后，控制台将输出一个包含数百个时区标识符的列表。
为什么选择 Intl.supportedValuesOf('timeZone')？
- 原生支持，无需额外依赖： 这是 JavaScript 语言的内置功能，无需引入任何第三方库或插件，即可实现时区列表的获取，从而减少项目体积和依赖管理复杂度。
- 标准化与准确性： 返回的都是标准的 IANA 时区标识符。这些标识符是全球通用的，并且能够正确处理夏令时（Daylight Saving Time, DST）的切换，因为它们代表的是一个地理区域的完整时区规则，而非简单的固定偏移量。
- 广泛的浏览器兼容性： 现代主流浏览器（包括 Chrome, Firefox, Safari, Edge 等）都广泛支持 Intl 对象及其相关方法，因此在大多数前端项目中可以放心使用。
- 涵盖冬/夏令时变化： IANA 时区标识符（如 "America/New_York"）本身就包含了该地区所有历史和未来的时区规则，包括夏令时的调整。因此，通过此方法获取的列表，其每个条目都隐式地考虑了冬/夏令时的变化。
关于“更短、更紧凑的列表”的考量
用户可能希望获取一个“更短、更紧凑”的时区列表，而不是完整的数百个 IANA 标识符。Intl.supportedValuesOf('timeZone') 提供的是一个全面的标准列表。如果您的应用需要一个精简版列表（例如，只显示主要城市、用户所在国家/地区的时区，或最常用的时区），您需要在获取完整列表后进行二次过滤和处理。
例如，您可以：
- 按区域过滤： 筛选出特定大洲（如 "Europe/" 开头）或国家（通过解析标识符）的时区。
- 使用流行度排序： 根据用户数据或常见需求，只展示最常用的时区。
- 提供搜索功能： 让用户通过搜索快速找到所需时区。
- 结合用户位置： 利用地理位置 API 获取用户的当前时区，并将其置于列表顶部。
结合 Day.js 的应用
虽然 Intl.supportedValuesOf('timeZone') 解决了获取时区列表的问题，但 Day.js 在处理这些时区方面依然非常有用。一旦您获取了时区名称列表，您可以将这些名称与 Day.js 的 dayjs-timezone 插件结合使用，以实现更复杂的日期时间操作：
// 假设您已经安装并导入了 Day.js 和 dayjs-timezone 插件
// import dayjs from 'dayjs';
// import utc from 'dayjs/plugin/utc';
// import timezone from 'dayjs/plugin/timezone';
// dayjs.extend(utc);
// dayjs.extend(timezone);
// 从 Intl API 获取的时区名称
const selectedTimeZone = 'America/New_York';
// 使用 Day.js 在特定时区显示时间
const nowInNewYork = dayjs().tz(selectedTimeZone);
console.log(`当前纽约时间：${nowInNewYork.format('YYYY-MM-DD HH:mm:ss')}`);
// 将一个特定时间字符串解析为纽约时间
const specificTime = '2023-10-27 10:00:00';
const parsedTimeInNewYork = dayjs.tz(specificTime, selectedTimeZone);
console.log(`指定时间在纽约：${parsedTimeInNewYork.format('YYYY-MM-DD HH:mm:ss')}`);通过这种方式，Intl.supportedValuesOf('timeZone') 负责提供标准的时区数据源，而 Day.js 则专注于日期时间的解析、格式化和转换，两者各司其职，共同构建强大的日期时间处理能力。
总结
在前端开发中获取标准时区名称列表，最佳实践是利用原生 JavaScript 的 Intl.supportedValuesOf('timeZone') API。它提供了一个无需额外依赖、标准化且涵盖冬/夏令时变化的 IANA 时区标识符列表。虽然该方法返回的是一个全面的列表，但您可以根据应用需求进行进一步的过滤和处理，以生成更精简的选项。结合 Day.js 等日期处理库，您可以高效地管理和显示不同时区下的日期和时间信息。
