JS与React中如何将下划线分隔字符串转为各单词首字母大写格式

核心处理逻辑 #

需求对应的处理步骤可拆分为3步：

• 以下划线为分隔符，将原字符串拆分为独立单词数组
• 遍历数组，把每个单词的首字母转为大写，剩余字符统一转小写做兼容，避免接口返回异常大小写格式时展示错乱
• 将处理完成的单词用空格拼接为最终展示的字符串

代码实现 #

你可以先抽一个通用的格式化工具函数，后续其他同格式的接口字段也能复用：

const formatSnakeToTitle = (str) => {
  // 空值兜底，避免接口返回空值/非字符串类型时渲染报错
  if (typeof str !== 'string' || !str) return '';
  return str
    .split('_')
    .filter(Boolean) // 过滤连续下划线、首尾下划线产生的空字符串，兼容异常格式
    .map(word => `${word.charAt(0).toUpperCase()}${word.slice(1).toLowerCase()}`)
    .join(' ');
};

在组件渲染时调用该函数处理字段值，替换原有直接渲染字段的代码即可：

<BadgeComponentFirst>
  <Typography color="red" fontSize="0.6em">
    {formatSnakeToTitle(job.contract_time)}
  </Typography>
</BadgeComponentFirst>

效果说明 #

传入示例值full_time时，函数最终返回Full Time，符合预期格式；其他同类型枚举值比如part_time、remote也会被正确处理为Part Time、Remote。

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