如何将后端返回的驼峰格式参数映射为自定义名称用于前端错误提示

你可以通过以下两种方案实现需求，可根据业务场景选择：

方案1：自动转换驼峰为空格分隔文本（无特殊自定义需求时使用） #

通过正则匹配驼峰命名中的大写字母，替换为空格+小写字母的格式，实现自动转换。
转换函数代码：

// 驼峰转空格分隔的可读文本
function camelToReadable(camelStr) {
  return camelStr.replace(/([A-Z])/g, ' $1').toLowerCase();
}

修改后的业务代码：

Array.isArray(errors) 
  ? `输入字段 ${errors.map(item => camelToReadable(item.param)).join(', ')} 不符合要求`
  : ''

如果需要保留英文原提示，仅修改字段显示格式，业务代码可以写为：

Array.isArray(errors) 
  ? `The input field(s) for ${errors.map(item => camelToReadable(item.param)).join(', ')} are unacceptable`
  : ''

方案2：自定义字段映射表（推荐，适配特殊命名需求） #

如果部分字段不希望按驼峰规则自动转换，或者需要显示为中文名称，可以提前定义字段映射表，同时兜底自动转换逻辑，兼容未配置的字段。
完整实现代码：

// 自定义字段映射表，按需添加字段即可
const paramDisplayMap = {
  email: '邮箱',
  favoriteSport: '喜欢的运动',
  gpaScore: 'GPA分数',
  userId: '用户ID'
}

// 转换函数：优先取自定义映射，不存在则走自动驼峰转换兜底
function getParamDisplayName(param) {
  return paramDisplayMap[param] || param.replace(/([A-Z])/g, ' $1').toLowerCase();
}

// 业务代码
Array.isArray(errors) 
  ? `输入字段 ${errors.map(item => getParamDisplayName(item.param)).join(', ')} 不符合要求`
  : ''

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