Do you want to make the first letter of a String Uppercase and all other letters remain as it is? In this article, you will learn to make the first letter of a given string as uppercase with code examples in JavaScript.
In JavaScript there are inbuilt functions present in String class such as toUpperCase()[1] and toLowerCase(). You can use these two functions and set any letter in the given string to either uppercase or lowercase.
I will be showing the fastest code that can be used to get a solution to this problem. Basically, you will be required to write your own function and get the desired output string.
1. Using toUpperCase() and slice() Method to Make The First Letter Of A String Uppercase
To make the first letter of the string uppercase I will be using the first index of the string to access the first letter and call the toUpperCase() function on the first index element and then I will be using the slice method from the second letter of the string till the end and concatenate it to get the desired result.
Let us see in the below example code the usage of the toUpperCase and slice method from string class using JavaScript.
//JavaScript Code Example
//Initializing An String
var firstCap = "this string.";
//Function to Test Empty Object That
//Supports ECMAScript
function getFirstLetterCapital(inputStr){
return inputStr[0].toUpperCase() + inputStr.slice(1);
}
//Setting the First Letter Capital
firstCap = getFirstLetterCapital(firstCap);
//Printing the Result
console.log(firstCap)
Output:
This string.As you can see in the above code, I was able to get the first letter from the String set as uppercase. And this method upon testing with lots of other methods was confirmed to be one of the fastest methods in terms of performance.
2. Using toUpperCase(), toLowerCase(), and slice()
Alternatively, you can use the same method as described above but to make sure apart from the first letter all the other letters in the string are lowercase you can use the toLowerCase method as well with the sliced string.
Let us see in the below example code the usage of toLowerCase(), toUpperCase(), and slice() to get the first letter as uppercase in JavaScript.
//JavaScript Code Example
//Initializing An String
var firstCap = "thiS sTring.";
//Function to Test Empty Object That
//Supports ECMAScript
function getFirstLetterCapital(inputStr){
return inputStr[0].toUpperCase() + inputStr.slice(1).toLowerCase();
}
//Setting the First Letter Capital
firstCap = getFirstLetterCapital(firstCap);
//Printing the Result
console.log(firstCap)
Output:
This string.As you can see from the above code, I was able to set the only first letter in uppercase and I made sure that all other letters in the string are in lowercase.
3. Using replace() Method From the String Class
You can use the replace() method from the String class. This method takes two input arguments one is the character or letter you want to replace and the second is to what you want to replace it with.
Let us see in the below example code the usage of replace method in JavaScript to set the first letter in uppercase.
//JavaScript Code Example //Initializing An String var firstCap = "this string."; //Setting the First Letter Capital firstCap = firstCap.replace(firstCap[0], firstCap[0].toUpperCase()) //Printing the Result console.log(firstCap)
Output:
This string.As you can see from the above code I was able to replace the first lowercase letter of the string with the uppercase letter and in this case, we were not required to write any additional functionality and can be done within the same code lines.
Wrap Up
I hope you were able to fix your issues related to how to make the first letter of a string in uppercase in JavaScript. I have listed down three methods that you can use to resolve this problem. And the first method listed is the fastest among all the methods.
If you have any questions or a better solution than the one discussed above please let me know in the comment section I will be happy to add it here.
If you liked the above tutorial then please follow us on Facebook and Twitter. Let us know the questions and answer you want to cover in this blog.
Further Read:
