Capitalize First Letter of a String - JavaScript

📋 Table Of Content

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 concatenating 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 replace method along with regular expression to capitalize the fist letter of a string. Here, is a 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 match character, convert it to uppercase and return 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 concatenate 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 argument and returns its uppercase version.

Conclusion:

Here, we have learned different method to uppercase the first letter of a string using few JavaScript methods.

You can use any of the given methods to transform the string in Capitalize case.