How To Capitalize First Letter In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this article we will show you the solution of how to capitalize first letter in JavaScript, in JavaScript, to capitalize the letter we used toUpperCase() function. toUpperCase(): We can convert the string into uppercase letters by using this function.
This function used the duplicate of the original string. Now to capitalize the first letter, we will set the index position to 0.
Then add the rest of the letter to form the final string we are going to use the slice() function. We are going to see two different examples in this tutorial.
Step By Step Guide On How To Capitalize First Letter In JavaScript :-
Example 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> how to capitalize first letter in javascript </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> how to capitalize first letter in javascript </h3>
</center>
<script>
let string = "this is a string" ;
let capital = string.charAt(0).toUpperCase() + string.slice(1) ;
console.log(capital) ;
</script>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- Attach an external CSS file using <link> tag to give style to the page
- <h1> tag used to add heading here and also adding the inline CSS here.
- Create a <Script> tag to write JavaScript within it.
- First use let to create a string.
- Then create another variable capital with the chatAt() method that returns the first character of the above string with the toUpperCase() function to convert the first character of the string to upper case.
- Now use slice() method with index position 1 to join the rest of the characters on the string
- Using console.log() to display the string by capitalizing the first letter.
Example 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> how to capitalize first letter in javascript </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> how to capitalize first letter in javascript </h3>
</center>
<script>
const capitalized = function(sentence) {
let str = sentence.split(" ") ;
for (let i=0 ; i<str.length ; i++) {
str[i] = str[i][0].toUpperCase() + str[i].substring(1) ;
}
return str.join(" ") ;
}
console.log(capitalized("this is a string")) ;
</script>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- Attach an external CSS file using <link> tag to give style to the page
- <h1> tag used to add heading here and also adding the inline CSS here.
- Create a <Script> tag to write JavaScript within
- Now use const to create a constant that is equal to a function with a formal parameter.
- Using the split() function to convert string to an array first
- Then using a for loop to capitalize the first letter of every word using the toUpperCase() function and join the rest of the letters in the array
- Using console.log() with the function with the string we want to capitalize the first letter of each word.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know how to capitalize the first letter in JavaScript.
I hope this article on how to capitalize first letter in JavaScript helps you and the steps and method mentioned above are easy to follow and implement
About Riya
