AntD Table数值千分位格式化与排序及localeCompare使用问题

方案1（最优解：直接在渲染层格式化，不改动原始数据与排序逻辑） #

AntD Table 的 <Column> 原生支持 render 属性，专门用于自定义单元格渲染内容，完全不会影响原始数据结构和排序逻辑，正好匹配你「state存整数、仅渲染时转千分位」的需求。

你只需要在原有列配置上新增render字段即可，示例代码如下：

<Column
  title="Population"
  dataIndex="population"
  key="population"
  sorter={(a, b) => a.population - b.population}
  // 新增这一行即可完成千分位格式化，原始值仍为整数不影响排序
  render={(val) => val.toLocaleString()}
/>

如果是带$的金额场景，直接调整toLocaleString的参数即可：

// 渲染为 $1,000.00 格式
render={(val) => val.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}

方案2（如果必须使用格式化后的字符串做数据源） #

如果因为特殊情况必须把数值存为带逗号/$的字符串，可以在排序逻辑里先清洗字符串再比较，正则清洗的性能在常规表格数据量下完全可感知不到差异，实现非常简单：

<Column
  title="Population"
  dataIndex="population"
  key="population"
  sorter={(a, b) => {
    // 移除所有非数字、负号、小数点的字符后转数值比较
    const numA = Number(a.population.replace(/[^0-9.-]/g, ''))
    const numB = Number(b.population.replace(/[^0-9.-]/g, ''))
    return numA - numB
  }}
/>

这个逻辑同时兼容带千分位逗号、带$符号的金额字符串排序需求。

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