Capitalize the first letter of a string in JavaScript

Capitalizing the first letter of a string is a common task, often employed to enhance the visual presentation of text or to adhere to specific formatting conventions. JavaScript provides several approaches to achieve this, ranging from basic techniques to more advanced methods involving functions or regular expressions.

1. Using the toUpperCase() method and the slice() method

This is the simplest and most popular way to capitalize the first letter of a string. You can use the charAt() method or the bracket notation to access the first character of the string, then use the toUpperCase() method to make it uppercase. Then you can use the slice() method to get the rest of the string and concatenate it with the first character.

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

// or

function capitalizeFirstLetter(string) {
  return string[0].toUpperCase() + string.slice(1);
}

console.log(capitalizeFirstLetter("hello world")); // "Hello world"

2. Using the replace() method and a regular expression

You can also use the replace() method to replace the first character of the string with its uppercase version. You need to use a regular expression to match the first character and pass a callback function to the replace() method that returns the uppercase version of the matched character.

function capitalizeFirstLetter(string) {
  return string.replace(/^./, function (match) {
    return match.toUpperCase();
  });
}

console.log(capitalizeFirstLetter("hello world")); // "Hello world"

Capitalize the first letter of every word

1. Using the split(), map() and join() methods

This is a more complex way to capitalize the first letter of a string, but it can be useful if you want to capitalize the first letter of every word in a sentence. You can use the split() method to split the string into an array of words, then use the map() method to iterate over the array and apply the same logic as the first approach to each word. Then you can use the join() method to join the array back into a string.

function capitalizeFirstLetter(string) {
  return string
    .split(" ")
    .map(function (word) {
      return word.charAt(0).toUpperCase() + word.slice(1);
    })
    .join(" ");
}

console.log(capitalizeFirstLetter("hello world")); // "Hello World"

2. Using text-transform CSS property

The text-transform property specifies how to capitalize an element’s text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. To capitalize the first letter of each word, you can use the value capitalize for the text-transform property.

div {
  text-transform: capitalize;
}

This will make the text inside the div element look like this:

This Is An Example Of Capitalized Text

Note that the text-transform property only changes the appearance of the text, not the actual content. The original case of the text is preserved in the HTML source code.

Also, the text-transform property follows language-specific rules for capitalization, such as ignoring punctuation marks or symbols at the beginning of a word, or applying different rules for certain languages.