How to Capitalize First Letter of String in JavaScript

Capitalizing the first letter of a string or the first letter of each word in a string is a common task in while working with Javascript. We have various options for achieving this, and this article will show you some of these options.

Using toUpperCase(), slice() and charAt() JavaScript Methods Together

Javascript has a built-in method called toUpperCase() to capitalize all words in a string. However, you can use this function with combination of the slice() and charAt() string methods for only capitalizing the first letter of a string.

Here is an example:

const str = "this is a string";
const capitalizedStr = str.charAt(0).toUpperCase() + str.slice(1);
console.log(capitalizedStr); 
// "This is a string"

In this example,

• charAt() string method is used to get the first character of the string and then the toUpperCase() method is used to convert that character to uppercase.
• Then, uppercase character is combined with the rest of the string, which we obtain using the slice() method.

The slice(1) method slices the string or array at index 1 and returns the remaining part of the string or array after that index.

Using replace() and a regular expression

Regular expressions in javascript are mostly used to find some patterns in a string so, we can find the first letter of a string and capitalize it with the help of the replace() method.

Here is an example:

const str = "this is a string";
const capitalizedStr = str.replace(/^\w/, c => c.toUpperCase());
console.log(capitalizedStr); 
"This is a string"

In this example,

• The regular expression (/^\w/) is used to match the first character in the string.
• Then the replace() method is used to replace that character with its uppercase letter.

Using charCodeAt() and fromCharCode() Javascript String Methods

In programming languages each character has a unique code for their capitilazed and normal versions, so you can use the charCodeAt() and fromCharCode() methods for capitalizing the first letter of a string based on its code.

const str = "this is a string";
const capitalizedStr = String.fromCharCode(str.charCodeAt(0) - 32) + str.slice(1);
console.log(capitalizedStr); 
// This is a string

In this example,

• The charCodeAt() method is used to get the Unicode value of the first character in the string. Then subtract 32 from that value to get the Unicode value of the uppercase equivalent.
• The fromCharCode() method is used to convert that Unicode value to the capitalized character.
• Lastly, that character is merged with the rest of the string, which we obtain using the slice() method as in example above.

Capitalizing the First Letter of Each Word in a String with JavaScript

In addition to capitalizing the first letter of a string, you may also want to capitalize the first letter of each word in a string. This is often used in formatting titles or headings.

Here are a few methods for achieving this task in JavaScript.

Using split(), map() and slice() Javascript String And Array Methods

One way to capitalize the first letter of each word in a string is to use the split() method to split the string into an array of words and iterate on them for capitiilazing the first letter in each word:

const str = "hello world";
const capitalizedStr = str.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
console.log(capitalizedStr); 
// Hello World

In this example,

• The split() method is used to split the string into an array of words.
• Then the map() method is used to iterate over each word in the array to capitalize the first letter of each word.
• Lastly, the join() method is used to merge the words back into a string with spaces between each word.

Split method accepts a separator to split string to parts and populate them to an array, In this case, the separator is a space character (" ") for seperating each word.

Using replace() and regular expression

You can also find the first letters of the words in a string with the help of a regular expression and replace these character with their capitalized versions:

const str = "hello world";
const capitalizedStr = str.replace(/\b\w/g, c => c.toUpperCase());
console.log(capitalizedStr); 
// Hello World

In this example,

• The regular expression (/\b\w/g) is used to match the first letter of each word in the string.
• Then the replace() method is used to replace each matched character with its uppercase version

Conclusion

In this article, we have showed various ways to capitalize both the first letter of a string and also the first letter of each word in a string with JavaScript. It is up to you to choose the method that best suits your needs.

Thank you for reading.