Hurry! Try our new Interactive Courses for FREE. 🥳   🚀
Written By:
iamabhishek
5 minute read
JavascriptWeb DevelopmentHowTo

Make First Letter of String Uppercase in Javascript

Posted in Programming   JULY 23, 2021

There is no dedicated function in Javascript to change the first letter of any string to uppercase, but there is a simple one-line code that can be used to do so.

We will be using three different Javascript functions to do this. The first one is charAt(), the second one is toUpperCase() function and the third one is slice() function. If you are a smart Javascript coder, you already know what we are about to do.

So let's jump to the code quickly.

Use charAt(), toUpperCase() and slice() functions:

Here is the code that would work for you:

let someString = 'foo';
// capitalize the first letter
someString = someString.charAt(0).toUpperCase() + someString.slice(1);

What we have done in the code above is that, we picked the character at index 0, which is the first character, converted it into uppercase, and then concatenated the remaining string back to it.

How charAt() function works?

Well the charAt() function in JavaScript is used to return the character at the given index. The index starts from 0, just like an array, which means, charAt(0) will return the first character of the given string.

Here is how we use the charAt() function:

string.charAt(index);

Let's take a quick example,

const str1 = 'studytonight';
const str2 = str.charAt(0);
console.log(str2);


s

How toUpperCase() function works?

As the name suggests, this function is used to convert characters to upper case. You provide a string to this function and it will convert it to uppercase. This function expects no parameter and its very straightforward to use.

Here is the syntax for toUpperCase() function,

string.toUpperCase();

Let's take a quick example,

let str1 = "studytonight";
console.log(srt1.toUpperCase());


STUDYTONIGHT

How slice() function works?

The slice function is used to slice or cut any string from a starting index to and ending index. If you just provide the starting index, then the slice function will slice out the substring starting from the given index till the end.

Here is the syntax for slice() function:

string.slice(start, end)

Let's take a quick example,

let str1 = 'studytonight';
let str2 = str1.slice(1);
console.log(str2);


tudytonight

Now that you have all this knowledge, it should be easier for you to understand, the code we provided at the top to make the first letter of the string uppercase.

How to make first letter uppercase in String?

We extract the first character using the charAt() funciton, then use the toUpperCase() function to convert it to upper case, and then append the remaining string to it using the slice() function.

let someString = 'foo';
// capitalize the first letter
someString = someString.charAt(0).toUpperCase() + someString.slice(1);

#SimplerWay - Using toUpperCase() and substring() function:

If you do not want to use so many function, there is a simpler way too, to do this:

let someString = 'foo';
// capitalize the first letter
someString = someString[0].toUpperCase() + someString.substring(1);

We do not have to use the charAt() function to get the character at the first index, we can directly use the index with the string variable.

The above solution will work for a string which has a single word. If you provide a string with multiple word, the above solution will change the first character of only the first word to uppercase. So how will you change first character to uppercase for all the words?

Capitalize the first character of every word in a String:

We can use for loop in JavaScript to iterate on each word of the string and then convert the first character to uppercase for each word.

let str = 'i love using studytonight';

// split above sentence into array of words, breaking at spaces
let arr = str.split(" ");

// iterate over the array, change the first character to uppercase for each word

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

// join the words to form the string again
str = arr.join(" ");

console.log(str);


I Love Using Studytonight

Conclusion:

So many new things covered in this article. You learned 4 new JavaScript functions and an interesting use case where we have to use all of them together like the Avengers to solve a bigger problem.

If you know a better solution, do share with us in the comments below.


IF YOU LIKE IT, THEN SHARE IT

RELATED POSTS