JavaScript: Capitalize the first letter

In this tutorial, we shall look at capitalizing the first letter of a string in JavaScript followed by learning how we can capitalize the first letter of each word in a string.

Table of Contents

  • Capitalize the first letter of a string
  • Capitalize the first letter of each word in a string
  • Other Related Concepts

Capitalize the first letter of a string

To achieve the capitalization of the first letter of a given string in JavaScript, we would use three functions.
  • charAt()
  • toUpperCase()
  • slice()

charAt():

The charAt() function returns the character at a given position in a string.
Syntax: 
string.charAt(index)
Example: 
const str = 'flexiple';
const str2 = str.charAt(0);
console.log(str2);

//Output: f

toUpperCase()

The toUpperCase() function converts all the characters of an input string to uppercase
Syntax:
string.toUpperCase()
Example 
const str = 'flexiple';
const str2 = str.toUpperCase();
console.log(str2);

//Output: FLEXIPLE
In the above example, we see that using the toUpperCase() function on the string converted all the characters of the input string to capital letters.

But this is not what we desire to achieve. To capitalize the first character of a string, We can use the charAt() to separate the first character and then use the toUpperCase() function to capitalize it. Now, we would get the remaining characters of the string using the slice() function.


slice

This function slices a given string from a specified “start” position until the specified “end” position.

Syntax:
string.slice(start, end)
Example: 
const str = 'flexiple';
const str2 = str.slice(1);
console.log(str2);

//Output: lexiple
Now let us use all the three functions together to capitalize the first word of an input string.

const str = 'flexiple';
const str2 = str.charAt(0).toUpperCase() + str.slice(1);
console.log(str2);

//Output: Flexiple

const str = 'abc efg';
const str2 = str.charAt(0).toUpperCase() + str.slice(1);
console.log(str2);

//Output: Abc efg
As you can see from the above outputs that we have capitalized the first letter of the input string. Now what if we want to capitalize the first letters of all the words in a string? Let’s see how we can achieve this as well.

Capitalize the first letter of each word in a string

To achieve this, we split the words from the string and store them in an array, and then use the above concept on each element of the array and join all the array elements together to get the string back. Let us take a look at this using an example 

const str = 'i have learned something new today';

//split the above string into an array of strings 
//whenever a blank space is encountered

const arr = str.split(" ");

//loop through each element of the array and capitalize the first letter.


for (var i = 0; i < arr.length; i++) {
    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);

}

//Join all the elements of the array back into a string 
//using a blankspace as a separator 
const str2 = arr.join(" ");
console.log(str2);

//Outptut: I Have Learned Something New Today