如何更优雅实现根据tier返回对应徽章图片文件名的函数？

嘿，这个场景确实有不少更简洁的实现方式，完全可以摆脱冗长的if-else链！我给你推荐两个常用的优雅方案，按需选择：

方案1：对象映射表（最易维护） #

这种方式用键值对的形式把段位和徽章文件名做映射，结构清晰，后续修改或新增段位时只需要更新映射表，不用动函数逻辑，可读性和扩展性都拉满：

// 定义全局的段位-徽章映射表（可以放在组件的data或者单独的常量文件里）
const tierEmblemMap = {
  IRON: 'Emblem_Iron',
  BRONZE: 'Emblem_Bronze',
  SILVER: 'Emblem_Silver',
  GOLD: 'Emblem_Gold',
  PLATINUM: 'Emblem_Platinum',
  DIAMOND: 'Emblem_Diamond',
  MASTER: 'Emblem_Master',
  GRANDMASTER: 'Emblem_Grandmaster',
  CHALLENGER: 'Emblem_Challenger'
};

function rankedEmblem(tier) {
  // 可选：添加默认值，防止传入未知段位时返回undefined导致图片加载失败
  return tierEmblemMap[tier] || 'Emblem_Default';
}

方案2：字符串格式化（最简洁） #

观察你的文件名规律：Emblem_ + 首字母大写、其余小写的段位名（比如IRON → Iron），完全可以通过字符串处理直接生成文件名，不需要维护映射表：

function rankedEmblem(tier) {
  // 处理空值或无效输入
  if (!tier) return 'Emblem_Default';
  
  // 将段位字符串转换为首字母大写、其余小写的格式
  const formattedTier = tier.charAt(0).toUpperCase() + tier.slice(1).toLowerCase();
  return `Emblem_${formattedTier}`;
}

注意：这个方案的前提是段位和文件名的转换规则永远保持一致，如果以后某个段位的文件名打破了这个规律（比如GRANDMASTER要改成Emblem_GrandMaster），那还是方案1更灵活。

额外优化：Vue模板里的简化 #

如果用的是Vue，你甚至可以把逻辑直接写在模板里（用字符串转换的话），省去函数定义：

<img 
  class='ranked-emblem' 
  :src="`../emblems/Emblem_${league.tier?.charAt(0).toUpperCase() + league.tier?.slice(1).toLowerCase() || 'Default'}.png`" 
  alt=""
>

不过还是推荐把逻辑封装成函数，方便在多个地方复用~

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