使用DayJS获取时区列表及其偏移量

在现代Web开发中，处理时区是一个常见但复杂的任务。本文将介绍如何使用JavaScript原生方法和DayJS库来获取完整的时区列表及其对应的GMT偏移量，这对于构建时区选择器等功能非常有用。

原生JavaScript实现方法

JavaScript提供了Intl.supportedValuesOf('timeZone')方法，可以获取浏览器支持的所有时区名称。结合日期处理方法，我们可以计算每个时区当前的偏移量：

// 获取指定时区相对于UTC的分钟偏移量
function getTodaysOffset(timeZone = 'UTC') {
  const today = new Date();
  const utcDate = new Date(today.toLocaleString('en-US', { timeZone: 'UTC' }));
  const tzDate = new Date(today.toLocaleString('en-US', { timeZone }));
  return (tzDate.getTime() - utcDate.getTime()) / (60 * 1000);
}

// 将分钟偏移量转换为GMT格式字符串
function convertOffsetToGMT(offset) {
  const sign = offset >= 0 ? "+" : "-";
  const absOffset = Math.abs(offset);
  const hours = Math.floor(absOffset / 60);
  const minutes = absOffset % 60;
  
  return `GMT${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
}

// 获取所有时区及其偏移量信息
const timeZonesWithOffset = Intl.supportedValuesOf('timeZone').map((tz) => {
  const offsetInMinutes = getTodaysOffset(tz);
  return {
    name: tz,
    offset: offsetInMinutes,
    gmt: convertOffsetToGMT(offsetInMinutes)
  }
});

使用DayJS的实现

虽然DayJS本身不直接提供获取所有时区列表的功能，但我们可以结合上述原生方法与DayJS的时区处理能力来构建更强大的解决方案：

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

// 获取时区列表及其DayJS处理后的信息
function getTimeZoneInfo() {
  return Intl.supportedValuesOf('timeZone').map(tz => {
    const now = dayjs().tz(tz);
    const offset = now.utcOffset();
    const gmtString = `GMT${offset >= 0 ? '+' : ''}${offset / 60}`;
    
    return {
      name: tz,
      offset,
      gmt: gmtString,
      currentTime: now.format('YYYY-MM-DD HH:mm:ss')
    };
  });
}

实际应用建议

1. 性能优化：时区列表可能很长，考虑在前端实现懒加载或分页显示
2. 排序方式：可以按偏移量或字母顺序对时区进行排序
3. 用户友好显示：除了技术名称，还可以添加更友好的显示名称
4. 缓存策略：时区数据变化不频繁，适合本地缓存

注意事项

• 时区偏移量可能会因夏令时而变化
• 不同浏览器对Intl.supportedValuesOf的支持可能不同
• 服务器端渲染时需要考虑服务器所在时区

通过上述方法，开发者可以轻松构建出专业的时区选择器组件，为用户提供更好的国际化体验。