In this article, we will learn how to convert the first letter of a string to uppercase in JavaScript.
Capitalizing the first letter of a word is used to format text and make the website paragraph more visually appealing and readable. It is a very common operation in web development.
In JavaScript, we have different methods to capitalize the first letter of a string.
In this article, we will use the combination of few methods like charAt(), replace(), slice() and toUpperCase() to make the first letter of a string to uppercase.
Using Basic Method (charAt() method)
This most common and easy method is to concatenate the uppercase of the first letter with the rest of the letters of the word using JavaScript methods like charAt()
, toUpperCase()
and slice()
method.
Example:
function capitalizeString(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
console.log(capitalizeString("hello world")); // "Hello world"
Using charAt()
we get the first character of the string. Next using the toUpperCase()
function we convert the first character to uppercase. At the end, we concatenate it with the rest of the string using the slice()
method.
Using replace() method
We can also use the replace method along with regular expression to capitalize the first letter of a string. Here, is an example:
function capitalizeString(str) {
return str.replace(/^w/, (c) => c.toUpperCase());
}
console.log(capitalizeString("hello world")); // "Hello world"
Here, we pass the string as an argument to capitalizeString()
function. Then using replace()
with the regular expression /^w/
we extracted the first letter of the string. Next, we pass a callback function to the replace()
method that takes the matching character, converts it to uppercase and returns us the result.
Using slice() method
Another method that we can use to Capitalize the first letter in a word is by using the slice() and toUpperCase() method together.
Example:
function capitalizeString(str) {
return str.slice(0,1).toUpperCase() + str.slice(1);
}
console.log(capitalizeString("hello world")); // "Hello world"
In the above code, we have used the slice(0,1)
method to get the first character of the string and then converted it to uppercase using toUpperCase()
method. After that, we have concatenated it with the rest of the string using the str.slice(1)
method.
Using substr() method
We can also use the substr()
method to capitalize the first character in a string. Here, is a example:
function capitalizeString(str) {
return str.substr(0, 1).toUpperCase() + str.substr(1);
}
console.log(capitalizeString("hello world")); // "Hello world"
In the above code, we have used substr(0,1)
to get the first character of the given string and covert it to uppercase using the toUpperCase()
method. At last, we concatenate it with the rest of the string using the + sign and str.substr(1)
method.
Using Regular Expressions
We can also use regex to capitalize the first character of a string. Here is an example:
function capitalizeString(str) {
return str.replace(/(^|s)S/g, (c) => c.toUpperCase());
}
console.log(capitalizeString("hello world")); // "Hello world"
In the above code, we have used the regular expression /(^|s)S/g
that matches the first non-space character (first character) of the string. Next, we pass a callback function to the replace()
method that takes the matched character as an argument and returns its uppercase version.
Conclusion:
Here, we have learned different methods to uppercase the first letter of a string using a few JavaScript methods.
You can use any of the given methods to transform the string in Capitalize case.
Related Topics:
How To Remove Last Character From A String In Javascript
Get the 10 characters from a string using JavaScript
Generate random string/characters in JavaScript
JavaScript – How to Remove Character From A String.
Replace all occurrences of a string in JavaScript
Split a String into chunks of N character into an array in JavaScript