React时区数组排序失效：无法按GMT-、GMT、GMT+顺序排列

安全阿岳

2026-8-6

解决React时区数组排序问题

要实现先GMT-时区、再GMT时区、最后GMT+时区的排序，核心是提取每个时区字符串里的偏移数值，用数值大小来排序，而非直接做字符串比较（直接字符串排序会因字符顺序问题导致结果不符合预期）。

具体实现步骤

编写排序函数，提取时区偏移量：

const sortTimezones = (a, b) => {
  // 提取时区偏移值的工具函数
  const getOffsetValue = (timezoneStr) => {
    // 匹配GMT后的偏移部分，比如GMT-01:00或GMT+02:00，无偏移则匹配GMT本身
    const offsetMatch = timezoneStr.match(/GMT([+-]\d{2}:\d{2})?/);
    if (!offsetMatch[1]) {
      // 无偏移的GMT时区，返回0
      return 0;
    }
    // 把偏移字符串（如+01:00）去掉冒号转成整数，比如+0100转成100，-0100转成-100
    const offsetNum = parseInt(offsetMatch[1].replace(':', ''), 10);
    return offsetNum;
  };

  const offsetA = getOffsetValue(a);
  const offsetB = getOffsetValue(b);
  // 用偏移数值差排序，负数在前，0在中间，正数在后
  return offsetA - offsetB;
};

在React组件中使用这个排序函数：

import React from 'react';

const TimezoneList = () => {
  // 原始时区数组
  const originalTimezones = [
    "(GMT) Monrovia, Reykjavik",
    "(GMT-01:00) Cape Verde Islands",
    "(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna"
  ];

  // 排序时先复制原数组（避免原地修改原数组），再执行排序
  const sortedTimezones = [...originalTimezones].sort(sortTimezones);

  return (
    <div>
      <h3>排序后的时区列表</h3>
      <ul>
        {sortedTimezones.map((tz, idx) => (
          <li key={idx}>{tz}</li>
        ))}
      </ul>
    </div>
  );
};

export default TimezoneList;