在ES6/React中如何将下划线小写字符串转为空格分隔的首字母大写格式

实现方案 #

你可以直接在替换下划线的逻辑后追加首字母大写的处理，两种常用实现方式如下：

方案1：正则链式调用（代码简洁）

const string = 'sample_orders'
// 先替换下划线为空格，再匹配所有单词首字母转为大写
const formattedStr = string.replace(/_/g, ' ').replace(/(^|\s)\w/g, match => match.toUpperCase())
console.log(formattedStr) // 输出：Sample Orders

正则说明：/(^|\s)\w/g 会匹配字符串开头、或者空格后跟随的第一个英文字符，回调函数将匹配到的字符统一转为大写。

方案2：拆分数组处理（可读性高，方便扩展自定义逻辑）

const string = 'sample_orders'
const formattedStr = string.split('_')
  // 遍历每个单词，首字母大写后拼接剩余字符
  .map(word => word.charAt(0).toUpperCase() + word.slice(1))
  .join(' ') // 用空格拼接所有单词
console.log(formattedStr) // 输出：Sample Orders

React场景使用示例 #

如果是在React组件中直接使用，直接把处理后的值插入渲染逻辑即可：

function OrderLabel() {
  const rawStr = 'sample_orders'
  const formattedStr = rawStr.replace(/_/g, ' ').replace(/(^|\s)\w/g, m => m.toUpperCase())
  return <span className="order-label">{formattedStr}</span>
}

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