JavaScript doesn't have any specific string method to capitalize the first letter of a string. But we can combine a few methods and use them to convert the first character to uppercase.
There are many ways to achieve this. You can use the built-in methods or Regex (Regular Expression). You might think it's complex but the process is quite simple.
In this article, we'll cover the basics of how to capitalize the initial letter of a string in JavaScript, as well as some advanced techniques.
Capitalize the First Letter of a String Using JavaScript
To capitalize the first letter or character of a string, you can call the charAt() method to get the initial character and apply the toUpperCase() method to convert it to uppercase.
You also need to extract the rest of the string using the slice() method and join it with the uppercase character. Now you have your complete string with a capitalized first letter.
You can divide the whole capitalization process into 3 steps:
- Step 1: Separate the first character from the string.
- Step 2: Convert the first character to uppercase.
- Step 3: Join the capitalized letter with the remaining string.
By following these 3 simple steps, you can capitalize any string using JavaScript.
Also Read: How to Capitalize the First Letter of Each Word in JavaScript
Step 1: Separating the First Letter Fron the String
JavaScript has a specific method called charAt() for getting a single character by its index from a string. This method only accepts one argument which is the index of a letter.
const str = 'hello world!'
const firstChar = str.charAt(0)
console.log(firstChar)
// h
To get the first letter from a string, you have to call this method on that string and pass 0 as the index. Then it will return the first character from that string.
But this is not the only way to get any letter from a string. You can also use the "Square brackets [index]" syntax.
const str = 'hello world!'
const firstChar = str[0]
console.log(firstChar)
// h
As you can see, I am getting the same result by putting the index in between the square brackets after the string. It returns any single character from a string based on the index.
You can choose any of these techniques to get the first letter of a string. Both work in the same way.
Also Read: 3 Proven Methods to Create Multi-Line Strings in JavaScript
Step 2: Converting the First Letter to UpperCase
After getting the first letter, it's time to convert it to uppercase. Call the toUpperCase() string method on your letter. This method converts the string to uppercase and returns it.
const str = 'hello world!'
const firstChar = str.charAt(0)
const uppercase = firstChar.toUpperCase()
console.log(uppercase)
// H
Here, I am getting the capitalized first character. Now it's time to join it with the rest of the string.
Also Read: How to Get Values of Custom Data Attributes in JavaScript
Step 3: Joining the Capitalized Letter With the Remaining String
There are 2 methods in JavaScript that you can use to get a section of a string. These are:
- slice()
- substring()
These methods accept 2 arguments: start index and end index (optional). If you only provide the start index, it will return all the characters from the starting index to the end of the string.
Using slice() Method:
const str = 'hello world!'
const remaining = str.slice(1)
console.log(remaining)
// ello world!
Using substring() Method:
const str = 'hello world!'
const remaining = str.substring(1)
console.log(remaining)
// ello world!
As you can see, both methods give the same result. Here, I am passing "1" as the starting index. Therefore, they will return all the characters except the first character.
Now you can join the capitalized first character with these remaining characters to get the complete string.
const str = 'hello world!'
const firstChar = str.charAt(0)
const uppercase = firstChar.toUpperCase()
const remaining = str.slice(1)
const capitalized = uppercase + remaining
console.log(capitalized)
// Hello world!
I am getting the capitalized string by joining the uppercase letter and the remaining characters. I am using these 3 methods in separate lines. But you can chain them together to write it in a single line.
const str = 'hello world!'
const capitalized = str.charAt(0).toUpperCase() + str.slice(1)
console.log(capitalized)
// Hello world!
Here I am doing everything in a single line and converting the first letter of my string to uppercase.
Also Read: How to Get The Text Input Value Using JavaScript Events
Use Regex to Convert the First Letter of a Word to UpperCase
You can use regular expressions (Regex) to capitalize the first character of a word. For that, JavaScript has the replace() method. It can accept a Regex pattern and if there is a match, it will replace it.
const str = 'hello world!'
const capitalized = str.replace(/^./, (char) => {
return char.toUpperCase()
})
console.log(capitalized)
// Hello world!
Here, I am calling the replace() method with a regular expression /^./ to match the first character of the string. This method also takes a callback function as its second argument.
Inside this callback function, you have access to the matched character, which is the "h" in "hello world!" string. Call the toUpperCase() method on this matched character and return it from the callback function.
Now the replace() method will replace the first character with that uppercase character from the string and return it.
Also Read: How to Capitalize the First Letter of Each Sentence in JavaScript
Conclusion
Capitalizing the first letter of a word is a common task to make our text more readable. JavaScript provides several built-in methods to help with this task.
We have covered methods like charAt(), toUpperCase(), slice(), etc. You can use all these methods together to capitalize your strings in JavaScript.
It is also possible to combine the replace() method and regular expressions (Regex) to convert the first character of a string to uppercase. Now you choose any one of these techniques in your project.
