How do I make the first letter of a string uppercase in JavaScript?

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.
 

You are not assigning your changes to the array again, so all your efforts are in vain. Try this:

function titleCase(str) {
   var splitStr = str.toLowerCase().split(' ');
   for (var i = 0; i < splitStr.length; i++) {
       // You do not need to check if i is larger than splitStr length, as your for does that for you
       // Assign it back to the array
       splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
   }
   // Directly return the joined string
   return splitStr.join(' '); 
}

document.write(titleCase("I'm a little tea pot"));

In Javascript, you have a built-in data type called strings. This is used to handle a sequence of characters. This post will attempt to explain one small use case where you wish to change the first letter in a word to upper case.

Setup

We have a string that is comprised of two words, the classic hello World!, but someone forgot to capitalize the "h"!

let string = "hello World!";

let capitalizedString = string[0].toUpperCase() + string.slice(1);

// capitalizedString => Hello World!

Okay so in the first line we declare a variable called string and assign the value "hello World!" to it. In the second line, we declare a second variable called capitalizedString. The value for that variable is the result of two operations we perform on a string.

Description

Javascript ⇒ String.prototype.toUpperCase()

"The toUpperCase() method returns the value of the string converted to uppercase. This method does not affect the value of the string itself since JavaScript strings are immutable." - MDN

This method is used to convert all the characters from their initial state to upper case.

Javascript ⇒ String.prototype.slice()

"slice() extracts the text from one string and returns a new string. Changes to the text in one string do not affect the other string." - MDN

This method is used to return the rest of the word after the first letter. These to are then combined and returned from the operation. We combine these methods because just using .toUpperCase alone returns only the first letter after the operation.

Hopefully this tip can be useful!

MDN Docs

GeeksforGeeks

Happy coding!

Okay, so that first one was easy and things are about to get significantly more complex really quickly.

Because there isn’t a built-in method on the String prototype to the upper case just the first letter of the string, we have to get a bit creative.

The gist of things is that we are going to need to grab the very first letter of the string, capitalize it, then grab the rest of the string, and re-assemble things.

Fortunately, we don’t have to walk through each of those steps and can just use a regular expression to grab the first letter and capitalize it, returning the modified string:

myString = 'the quick green alligator...';
myString.replace(/^\w/, (c) => c.toUpperCase());

This will result in the string becoming The quick green alligator....

This is great as long as your string doesn’t have any spaces padding the front of it.

If you aren’t sure if you are going to encounter said padding, like when you’re dealing with the inconsistencies of user-generated content, you can include the .trim() method to clean things up before capitalizing:

myString = '    the quick green alligator...';
myString.trim().replace(/^\w/, (c) => c.toUpperCase());