React中Intl.supportedValuesOf的Polyfill及时区列表获取方案咨询

针对Intl.supportedValuesOf('timeZone')浏览器支持不足且无现成polyfill的问题，有几个可靠的解决方案：

• 直接引入静态IANA时区列表
  IANA维护的标准时区数据库是权威来源，你可以使用一份预定义的静态时区列表（JSON或数组形式），这种方式兼容性拉满，所有浏览器都能正常运行。示例代码：

  const timeZones = [
    'Africa/Abidjan',
    'Africa/Accra',
    'Africa/Addis_Ababa',
    // 完整列表可从IANA时区数据库导出，定期同步更新即可
  ];
  

  注意定期同步IANA的时区更新，避免出现过时的时区条目。

• 通过Intl.DateTimeFormat间接检测支持的时区
  如果你不想维护静态列表，可以利用Intl.DateTimeFormat的特性，通过测试预定义的时区条目来收集当前浏览器支持的时区：

  function getSupportedTimeZones() {
    // 预先列出常见的IANA时区条目
    const candidateTimeZones = [
      'Africa/Abidjan', 'America/New_York', 'Asia/Shanghai',
      'Europe/London', 'Australia/Sydney', // 可扩展更多条目
    ];
    const supported = [];
    for (const tz of candidateTimeZones) {
      try {
        // 尝试初始化DateTimeFormat，不报错则说明支持该时区
        new Intl.DateTimeFormat('en-US', { timeZone: tz });
        supported.push(tz);
      } catch (e) {
        // 跳过不支持的时区
      }
    }
    return supported;
  }
  

  这种方式能拿到当前浏览器实际兼容的时区，但需要预先覆盖足够多的常用时区条目。

• 借助成熟的日期处理库
  像moment-timezone、luxon这类库内置了完整且更新及时的IANA时区列表，同时封装了丰富的时区操作能力，兼容性覆盖绝大多数旧浏览器。以luxon为例：

  import { DateTime } from 'luxon';
  // 直接获取库内置的支持时区列表
  const timeZones = DateTime.supportedZones;
  

  这类库会自动处理时区数据的更新，无需手动维护列表。

内容的提问来源于stack exchange，提问作者Rodrigo