Capitalize First Letter of a String - JavaScript

In this article, we will learn how to convert the first letter of a string to uppercase in JavaScript.

Capitalizing the first letter of a word is used to format text and make the website paragraph more visually appealing and readable. It is a very common operation in web development.
In JavaScript, we have different methods to capitalize the first letter of a string.

In this article, we will use the combination of few methods like charAt(), replace(), slice() and toUpperCase() to make the first letter of a string to uppercase.

Using Basic Method (charAt() method)

This most common and easy method is to concatenate the uppercase of the first letter with the rest of the letters of the word using JavaScript methods like charAt(), toUpperCase() and slice() method.

Example:

function capitalizeString(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

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

Using charAt() we get the first character of the string. Next using the toUpperCase() function we convert the first character to uppercase. At the end, we concatenate it with the rest of the string using the slice() method.

Using replace() method

We can also use the replace method along with regular expression to capitalize the first letter of a string. Here, is an example:

function capitalizeString(str) {
  return str.replace(/^w/, (c) => c.toUpperCase());
}

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

Here, we pass the string as an argument to capitalizeString() function. Then using replace() with the regular expression /^w/ we extracted the first letter of the string. Next, we pass a callback function to the replace() method that takes the matching character, converts it to uppercase and returns us the result.

Using slice() method

Another method that we can use to Capitalize the first letter in a word is by using the slice() and toUpperCase() method together.

Example:

function capitalizeString(str) {
  return str.slice(0,1).toUpperCase() + str.slice(1);
}

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

In the above code, we have used the slice(0,1) method to get the first character of the string and then converted it to uppercase using toUpperCase() method. After that, we have concatenated it with the rest of the string using the str.slice(1) method.

Using substr() method

We can also use the substr() method to capitalize the first character in a string. Here, is a example:

function capitalizeString(str) {
  return str.substr(0, 1).toUpperCase() + str.substr(1);
}

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

In the above code, we have used substr(0,1) to get the first character of the given string and covert it to uppercase using the toUpperCase() method. At last, we concatenate it with the rest of the string using the + sign and str.substr(1) method.

Using Regular Expressions

We can also use regex to capitalize the first character of a string. Here is an example:

function capitalizeString(str) {
  return str.replace(/(^|s)S/g, (c) => c.toUpperCase());
}

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

In the above code, we have used the regular expression /(^|s)S/g that matches the first non-space character (first character) of the string. Next, we pass a callback function to the replace() method that takes the matched character as an argument and returns its uppercase version.