Capitalize First Letter of a String in JavaScript

📋 Table Of Content
In this article, we will learn how to convert the first letter of a string to uppercase in JavaScript.
In JavaScript, we have to use the combination of few methods like charAt(), slice() and toUpperCase() to make the first letter of a string to uppercase.
Capitalize the First Letter of a String
To capitalize the first letter of a given string we will use three functions: charAt(), toUpperCase() and slice().
chartAt()
The charAt()
method return the character at a specific index in the string. To get the first letter from a string, we use charAt(0).
var str = "hello"
str.charAt(0)
//Output - h
toUpperCase()
The toUpperCase()
is an inbuilt method that converts the characters of a string to uppercase letters in JavaScript.
var str = "hello"
str.toUpperCase()
// HELLO
slice()
The slice()
method is use to extract parts from a string and returns the rest of the string as a new string.
var str = "Hello world!";
str.slice(3); // Extract first 3 characters from the string
// lo world!
Using these three methods, we can create a function that will take a string as an argument, convert its first letter to uppercase and return back the string.
function capitalize( str ){
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
}
console.log(capitalize('hello')) // Hello
Code Explanation:
str.charAt(0) - Extract the first letter of the string i.e 'h' from the word 'hello'.
str.charAt(0).toUpperCase() - Converts h to capital H.
str.slice(1) : extract the first letter and returns the rest of the string. Here it gives us ello
from the word 'hello'.
toLowerCase() : to convert the string to lower case.
The + to concat the two values together.
Using Bracket Notion to convert letter to uppercase
Instead of charAt(), we can also use the bracket notion to extract the first letter from a string.
function capitalize(str) {
return str[0].toUpperCase() + str.slice(1).toLowerCase();
}
console.log(capitalize('hello')) // Hello
Using Regex to Convert First Letter to UpperCase
This is a very simple way, here we replace the first character of the string after converting the first letter to uppercase using regex.
function capitalize(str) {
return str.replace(/^./, str.charAt(0).toUpperCase());
}
console.log(capitalize('hello')) // Hello
Code Explanation:
replace() - search for the regular expression and returns a new string with replaced value.
The regex expression /^./
matches the beginning of input i.e the first character of the string.
charAt(0) - extract the first letter from the given string.
toUpperCase() - convert the letter to uppercase.
Related Topics:
Truncate A String In JavaScript With Example