How to capitalize the first letter of a word in JavaScript?
Let's say you have to display a list of strings, but you accidentally inserted some capital or small letters at the start or mid of a string. This must be eliminated before being displayed.
When working with strings in Javascript, replacing a lowerCase into an upper case in a given String is one of the common needs.
Javascript has a variety of built-in methods which helps in converting the first letter of a string into UpperCase or vice versa. We will look at some Javascript programs to perform this task using these methods-
charAt()
The charAt() method in JavaScript is used to get the character at a specified position in a string. It takes an index as a parameter and returns the character at that index.
let text = "Hello, World!";
let firstChar = text.charAt(0); // Gets the character at index 0
let fifthChar = text.charAt(4); // Gets the character at index 4
console.log("First Character:", firstChar);
console.log("Fifth Character:", fifthChar);
You can also try this code with Online Javascript Compiler
It returns the character at a given index in a string.
Output
First Character: H
Fifth Character: o
toUpperCase()
The toUpperCase() method converts all the characters in a string to uppercase.
Example Code
let str = "hello, world!";
let upperStr = str.toUpperCase();
console.log("Original String:", str);
console.log("Uppercase String:", upperStr);
You can also try this code with Online Javascript Compiler
Output
Original String: hello, world!
Uppercase String: HELLO, WORLD!
slice()
The slice() method extracts a section of a string and returns it as a new string, without modifying the original string. It takes two parameters: the starting index and the ending index (non-inclusive).
Example Code
let str = "Hello, World!";
let slicedStr = str.slice(7, 12); // Slices from index 7 to 11
console.log("Original String:", str);
console.log("Sliced String:", slicedStr);
You can also try this code with Online Javascript Compiler
Output
Original String: Hello, World!
Sliced String: World
substring()
The substring() method extracts characters between two specified indices (positions) in a string and returns the substring. If the first index is greater than the second, the method swaps them.
Example Code
let str = "Hello, World!";
let subStr = str.substring(0, 5); // Extracts from index 0 to 4
console.log("Original String:", str);
console.log("Substring:", subStr);
You can also try this code with Online Javascript Compiler
Output
Original String: Hello, World!
Substring: Hello
replace()
The replace() method searches for a specified value in a string and replaces it with another value. It can take a string or a regular expression as the first parameter and returns a new string with the replacement.
Example Code
let str = "Hello, World!";
let newStr = str.replace("World", "JavaScript"); // Replaces "World" with "JavaScript"
console.log("Original String:", str);
console.log("Replaced String:", newStr);
You can also try this code with Online Javascript Compiler
Output
Original String: Hello, World!
Replaced String: Hello, JavaScript!
Using charAt(), toUpperCase() and slice() Method
Algorithm
- First, we will declare a string with the variable name str.
- Then, we will initialize the string with some value.
- Use the chart() method to extract the string's first character. Here, str.charAt(0); gives ‘c’.
- Convert the extracted character to uppercase using "toUpperCase()" method. Here, str.charAt(0).toUpperCase(); gives ‘C’.
- With the help of the slice() method, return the rest of the string and concatenate the string to the capitalized letter using the '+' operator.
The implementation of the above algorithm is given below.
function capitalizeLetter(str) {
// Convert first letter to uppercase
const capitalizedString = str.charAt(0).toUpperCase() + str.slice(1);
return capitalizedString;
}
const str = "coding Ninja";
print(capitalizeLetter(str));
You can also try this code with Online Javascript Compiler
Output
Coding Ninja
Using Regex or replace() Method
In this method, the regular expression (regex) is used to convert the first letter of a string to uppercase.
Algorithm
- First, we will declare a string with the variable name str and initialize the string with some value.
- With the help of the regex pattern, which is /^./ match the first character of a string and replace it with the capitalized letter using replace() and "toUpperCase()" methods.
- Finally, we will print the string with the capitalized first letter.
The implementation of the above algorithm is given below.
function capitalizeLetter(str) {
// Convert first letter to uppercase
const capitalizedString = str.replace(/^./, str[0].toUpperCase());
return capitalizedString;
}
const str = "coding Ninja";
print(capitalizeLetter(str));
You can also try this code with Online Javascript Compiler
Output
Coding Ninja
Using Bracket Notation
Algorithm
- First, we will declare a string with the variable name str and initialize the string with some value.
- This time we will directly use the bracket notation to target the first index of the string, and then we will convert the first element into UpperCase.
- Finally, we will print the required string.
The implementation of the above algorithm is given below.
function capitalizeLetter(str) {
//Capitalizing the first letter of a string.
return str[0].toUpperCase() + str.slice(1).toLowerCase();
}
const str = "coding is so easy!";
print(capitalizeLetter(str));
You can also try this code with Online Javascript Compiler
Output
Coding is so easy!
Using substring
Algorithm
- First, we will declare a string with the variable name str and initialize the string with some value.
- This time we will directly use the substring method instead of slice() method to target the rest of the string, and then we will concatenate it to the first element of the string.
- Finally, we will print the required string.
function capitalizeLetter(str) {
// Capitalize first letter of a string to uppercase.
return str[0].toUpperCase() + str.substring(1).toLowerCase();
}
const str = "coding is so easy!";
print(capitalizeLetter(str));
You can also try this code with Online Javascript Compiler
Output
Coding is so easy!
Problem
Capitalize the first letter of each word in a string
To understand the problem, let's first see an example:
Input
String str = "'i love coding ninja";
Expected Output
I Love Coding Ninja
Explanation
The example above demonstrates that the str variable contains a string in which the first character of all the words are in small letters. To achieve the capital letter of each word, we will split the words from the string and store them in a newly formed array, and then use some methods to print the required string.
Implementation in Javascript
Algorithm
- First, we will declare two strings with the variable name str1 and str2
- Initialize the string str1 with some value.
- Using split() method, we will split the string into an array of strings whenever a blank space is encountered.
- Using for loop, iterate over each element of the array and capiltalize the first letter of each array using charAt() and toUpperCase() methods.
- Finally, we will print the string with the capitalized first letter.
const str1 = 'i love coding!';
//split the above string into arrays
const array = str1.split(" ");
//loop through each element of the array and capitalize the first letter.
for (var i = 0; i < array.length; i++) {
array[i] = array[i].charAt(0).toUpperCase() + array[i].slice(1);
}
//Now join all the elements of the array back into a string
//using a blank space as a separator
const str2 = array.join(" ");
print(str2);
You can also try this code with Online Javascript Compiler
Output
I Love Coding!
Frequently Asked Questions
Does JavaScript have a built-in function for capitalizing the first letter of a string?
JavaScript does not have a built-in function specifically for capitalizing the first letter of a string. However, you can achieve this by combining the charAt() and toUpperCase() methods along with string slicing.
Is capitalization of letters case-sensitive in JavaScript?
Yes, capitalization of letters is case-sensitive in JavaScript. This means that uppercase and lowercase letters are treated as distinct characters. For example, "A" and "a" are considered different values, affecting comparisons and string manipulations.
Can capitalizing the first letter affect special characters or numbers in JavaScript?
Capitalizing the first letter does not affect special characters or numbers in a string. If the first character is a special character or digit, it remains unchanged. Only alphabetic characters are impacted by the capitalization process in JavaScript.
Conclusion
This article learned how to capitalize letters in a string using JavaScript. We started by defining what it means to capitalize in JavaScript. Then, we looked at different methods to change lowercase letters to uppercase. Each method included simple code examples. You can also check out other articles on JavaScript for more learning.
Recommended problems -
84+ registered