如何将 ES6/React 中的小写字母和下划线转换为正确的大小写和空格

How do I convert lowercase and underscores to proper case and spaces in ES6/React

如何将带有下划线的字符串转换为空格并将其转换为正确的大小写?

代码

 const string = sample_orders

 console.log(string.replace(/_/g, ' '))

预期输出

Sample Orders

这个函数应该可以完成工作:

function humanize(str) {
  var i, frags = str.split('_');
  for (i=0; i<frags.length; i++) {
    frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].slice(1);
  }
  return frags.join(' ');
}


humanize('sample_orders');
// > Sample Orders

JSFiddle

.replace 仅替换第一次出现的目标输入。为了替换所有出现的地方,请使用 .replaceAll.

 var string = 'sample_orders'

 string = string.replaceAll('_', ' ')

可以通过 regEx

将其进一步转换为正确的大小写
string = string.replace(/(^\w|\s\w)/g, firstCharOfWord => firstCharOfWord.toUpperCase());

其中:

  • ^\w : 字符串的第一个字符
  • | : 或
  • \s\w :空格后的第一个字符
  • g : 全局范围(匹配所有出现的地方)
  • 第二个参数是一个函数,它接受使用正则表达式计算的每个单词的第一个字符并将其转换为大写。 将上述逻辑绑定到一个函数中:
    function formatString(string){
     
     return string.replaceAll('_', ' ').replaceAll(/(^\w|\s\w)/g, firstCharOfWord => firstCharOfWord.toUpperCase());
    
    }
    
    let formattedString = formatString('sample_orders')
    console.log(formattedString) //Sample Orders
    

    警告:如果您在较旧的浏览器上 运行ning 或 运行时间环境。 在 ES2021/ES12 中添加了 .replaceAll 方法。在这种情况下,运行 旧版本 JS 上此类功能的最佳解决方法是为不支持新添加的方法或功能 (.replaceAll) 的旧版本提供本机支持。

    function formatString(string){
    
     return string.replace(/_/g, ' ').replace(/(^\w|\s\w)/g, firstCharOfWord => firstCharOfWord.toUpperCase());
    
    }
    let formattedString = formatString('sample_orders')
    console.log(formattedString) //Sample Orders
    

    请注意,我们在全局范围内使用带有正则表达式的 replace 方法。这也可以用于字符串可能不包含下划线的情况。