To make the first letter of a string into a capital letter in JavaScript, the basic idea is to get the first character in the string and then make it a capital letter using the toUpperCase() string method and then by appending the remaining string except for the first letter.
TL;DR
// a simple string with all letters in lowercase
const str = "hello world!";
// 1. make the first letter a capital letter
// using the `toUpperCase()` string method
// 2. appending the remaining string except
// first letter using the `slice()` string method
const firstLetterCapitalized = str[0].toUpperCase() + str.slice(1);
// log the output
console.log(firstLetterCapitalized); // "Hello world!"
For example, let's say we have a string called hello world! where all the characters are in lowercase like this,
// a simple string with all letters in lowercase
const str = "hello world!";
Now to capitalize the first letter of the string, let's take the first character using the 0 index position in the str variable which gives us the first letter in the string.
It can be done like this,
// a simple string with all letters in lowercase
const str = "hello world!";
// get the first letter
const firstLetterCapitalized = str[0];
To capitalize the first letter we can use the toUpperCase() string method on the first letter of the string like this,
// a simple string with all letters in lowercase
const str = "hello world!";
// 1. make the first letter a capital letter
// using the `toUpperCase()` string method
const firstLetterCapitalized = str[0].toUpperCase();
We have made the first letter in the string a capital letter. Now we have to append the remaining string to the first capital letter.
First, To get the remaining string we can use the slice() string method and pass the number 1 as an argument to the method to indicate that we need to start cutting the string from the 1st index till the end of the string.
It can be done like this,
// a simple string with all letters in lowercase
const str = "hello world!";
// 1. make the first letter a capital letter
// using the `toUpperCase()` string method
// 2. appending the remaining string except
// first letter using the `slice()` string method
const firstLetterCapitalized = str[0].toUpperCase() + str.slice(1);
Note that we have used the + (addition) operator to append the first letter and the remaining string together.
Now if we log the output of the firstLetterCapitalized variable to the console, we can see that the first letter of the string is capitalized.
It may look like this,
// a simple string with all letters in lowercase
const str = "hello world!";
// 1. make the first letter a capital letter
// using the `toUpperCase()` string method
// 2. appending the remaining string except
// first letter using the `slice()` string method
const firstLetterCapitalized = str[0].toUpperCase() + str.slice(1);
// log the output
console.log(firstLetterCapitalized); // "Hello world!"
See the above code live in JSBin
If you need this as a utility function, you can use this snippet of code,
/*
Capitalize the first letter in the string
*/
function capitalizeFirstLetter(str) {
// check if string is empty
if (!str) {
return str;
}
return str[0].toUpperCase() + str.slice(1);
}
The above utility function also includes a check to see if the string is empty to avoid errors.
That's all 😃!