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

Question

How do I convert strings with underscores into spaces and converting it to proper case?

CODE

 const string = sample_orders

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

Expected Output

Sample Orders

Answer 1

This function should do the job :

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

Answer 2

.replace replace only the first occurrence of the target input. In order to replace all the occurrences, use .replaceAll .

 var string = 'sample_orders'

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

Further converting it to the proper case could be accomplished through regEx

string = string.replace(/(^\w|\s\w)/g, firstCharOfWord => firstCharOfWord.toUpperCase());

Where:

: First char of the string

: or

: First char after whitespace

: global scope(Match all occurrences)

The second argument is a function that accepts the first character of each word computed using the regular expression and converts it to an upper case. Binding the above logic into a function:

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

: You might encounter an error saying .replaceAll is not a function if you are running on an older browser or runtime environment. The .replaceAll method was added in ES2021/ES12. The best workaround to run such functionalities on older versions of JS is to provide native support to older versions that do not support newly added methods or features ( .replaceAll ) in this case.

 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

Note that we're using the replace method with regular expressions on a global scope. This could also be used at instances where the strings might not contain underscores.