Capitalizing the first letter of a string or the first letter of each word in a string can be a necessary task in JavaScript. We have many options for achieving this, and this article will show you some of these options.
Use toUpperCase(), slice() and charAt() JavaScript Methods Together
Javascript has a built-in method called toUpperCase() to capitalize all words in a string. However, we can use this function with combination of the slice() and charAt() string methods for only capitalizing the first letter of a string:
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 gets the first character of the string and then use thetoUpperCase()method 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.
Use replace() and a regular expression
Regular expressions 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 replace() method in javascript.
const str = "this is a string";
const capitalizedStr = str.replace(/^\w/, c => c.toUpperCase());
console.log(capitalizedStr);
"This is a string"
In this example, we use a regular expression (/^\w/) to match the first character in the string. We then use the replace() method to replace that character with its uppercase letter. c character in the arrow function represents the first character in the string we found.
Use charCodeAt() and fromCharCode() Javascript String Methods
In programming languages including javascript, each character has a unique code for it capitilazied and normal versions so we can use the charCodeAt() and fromCharCode() methods for capitalizing the first letter of a string:
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, we first use:
- The charCodeAt() method 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.
- We use the fromCharCode() method to convert that Unicode value to a character,
- Then merge that character 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.
Use 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,
- We first use the split() method to split the string into an array of words.
- We then use the map() method to iterate over each word in the array
- And then, we capitalize the first letter of each word.
- Lastly, we use the join() method 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.
Use replace() and regular expression
We 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,
- We use a regular expression (/\b\w/g) to match the first letter of each word in the string.
- We then use the replace() method to replace each matched character with its uppercase version
Conclusion
In this article, we have showed some ways to capitalize 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.