前端筹码渲染：压缩大数值、保留1-100区间较小值的映射函数实现

核心规则 #

• 基础渲染逻辑：1枚筹码对应1个div，2枚对应2个div，3枚对应3个div，4枚对应3个div
• 映射要求：实际筹码数1-100区间，以超指数压缩方式映射到1-20的显示div数量；小额筹码显示数不做明显缩减，大额筹码压缩显示数量，避免多玩家不同颜色筹码场景下DOM节点数过高
• 边界规则：实际筹码数超过100时统一按最大20个div渲染，小于1时返回0

完整实现代码 #

// Map range 1-100 to 1-20 in a super exponential fashion so smaller chips don't get any smaller, but big numbers get trimmed down.
function m_n_chips(actual_chips: number): number {
  if (actual_chips < 1) return 0;
  // 小于4枚按实际数量渲染
  if (actual_chips < 4) return actual_chips;
  // 4枚按原有规则渲染3个
  if (actual_chips === 4) return 3;
  // 100枚及以上统一渲染20个
  if (actual_chips >= 100) return 20;

  // 对数形式超指数压缩：保证低区间增长接近线性，高区间增长快速放缓
  const k = 17 / Math.log(25);
  const c = 3 - k * Math.log(4);
  const display_count = k * Math.log(actual_chips) + c;

  // 取整后做区间截断，保证返回值在合法范围内
  return Math.min(20, Math.max(3, Math.round(display_count)));
}

映射效果参考 #

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