How to Capitalize first letter in Javascript

Javascript capitalize first letter

In this tutorial, we will see how to Capitalize first letter in Javascript.

Capitalize first letter of String in Javascript

There are multiple ways to Capitalize first letter of String in Javascript. Let’s go through each of them.

Using charAt(), toUpperCase() and slice()

We will combination of charAt(), toUpperCase() and slice() functions to capitalize first letter in Javascript.

Output:

Java2blog

Let’s see how it works by going through each method used to capitalize first letter in Javascript.

charAt()

charAt() method returns character at given index in String.
Syntax

Since we have to capitalize first letter here, we will use str.charAt(0) to extract first letter from the String.

Output:

J

toUpperCase()

toUpperCase() function returns all input character in uppercase.
Syntax

Since we have to convert first letter to upper case here, we will use str.toUpperCase().

Output:

JAVA2BLOG

slice()

slice() function returns substring from provided start index until the provided end index.
Syntax

If you don’t provide end index, then it will by default returns substring upto end of the String.

Output:

ava2blog

So we have used str.charAt(0) to extract first letter of String, str.toUpperCase() to capitalize first letter of String and str.slice(1) to concatenate remaining string to the result.

Capitalize each word of String in Javascript

We will now capitalize each word of sentence in Javascript. To do this, we will first split the string into multiple words and store it in array. Iterate over array to apply above capitalize first letter concept to each word and then join them back to form result String.

Output:

How Are You Doing

That’s all about how to Capitalize first letter in Javascript.

Related Posts

  • In this post, we will see how to generate random number between 1 to 10 in javascript. How to generate random number between 1 and 10 in javascript We can simply Math.random() method to generate random number between 1 and 10 in javascript. `Math.random()` returns a random number between 0(inclusive), and 1(exclusive). That means `Math.random()` returns always number lower than 1. We can use `Math.random()` with `Math.floor()` to generate random integer. Here is generic formula to generate random number in the range. Math.floor(Math.random() * (maximum - minimum + 1)) + minimum In our case, minimum = 1 maximum = 10 so it will be Math.floor(Math.random() * (10 - 1 + 1)) + 1 Math.floor(Math.random() * 10) + 1 So here is the program to generate random number between 1 and 10 in javascript. var randNum = Math.floor(Math.random() * 10) + 1; console.log(randNum) When you run above program, you will get below output: 3 You can obviously get differnt outout as we are generating random number here. Generate 10 random integers in range of 1 to 10 console.log("Generating 10 random integers in range of 1 to 10") for (let i = 0; i < 10; i++) { var randNum = Math.floor(Math.random() * 10) + 1; console.log(randNum) } Generate 10 random integers in range of 1 to 10 7 5 1 10 5 9 7 7 6 2 Generate random number in a range in javascript Here is generic formula to generate random number in a range. function generateRandomInteger(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // Generate random number between 1 to 10 console.log(generateRandomInteger(1,10)) // Generate random number between 11 to 20 console.log(generateRandomInteger(11,20)) // Generate random number between 21 to 30 console.log(generateRandomInteger(21,30)) 4 17 28 In case, if you don't want to include maximum while generating random numbers, you can use below function. function generateRandomInteger(min, max) { return Math.floor(Math.random() * (max - min)) + min; } That's all about how to generate random number between 1 and 10 in javascript
    15 January

    Generate random number between 1 and 10 in javascript

    Table of ContentsHow to generate random number between 1 and 10 in javascriptGenerate 10 random integers in range of 1 to 10Generate random number in a range in javascript In this post, we will see how to generate random number between 1 to 10 in javascript. How to generate random number between 1 and 10 […]

  • Escape quotes in Javascript
    08 December

    Escape quotes in Javascript

    Table of ContentsWays to escape quotes in JavascriptUsing escape characterUsing alternate String syntaxUsing template literalsEscape quotes in Javascript in HTML context In this article, we will see how to escape quotes in Javascript. Let’s see what happens if we have singe quote in String and we also use single quotes to declare the string in […]

  • Add character to String in Javascript
    05 December

    Add character to String in Javascript

    Table of ContentsAdd character to String at start of String in JavascriptUsing + operatorUsing concat() methodAdd character to String at end of String in JavascriptUsing + operatorUsing concat() methodAdd character to String at given postionUsing substring() methodUsing slice() methodAdd character from array to String in JavascriptUsing + operatorUsing concat() method In this post, we will […]

  • 08 September

    jQuery html() method example

    In this post,  we are going to see jQuery html method. html method is used to get html content of first matched elements,  other elements will be ignored and html(‘new html content’) is used to set html content for all matched elements. Syntax for html() : [crayon-61e5045585699709598318/] Syntax for html(‘new html content’) : [crayon-61e504558569e032470901/] Let’s […]

  • 28 August

    jQuery text() method example

    In this post,  we are going to see jQuery text method example. text method is used to get text of all matched elements and text(‘new text’) is used to set text for all matched elements. Syntax for text() : [crayon-61e5045585a0a792225658/] Syntax for text(‘new text’) : [crayon-61e5045585a0f060958439/] Let’s understand with the help of example: [crayon-61e5045585a11359897483/] Live […]

  • 27 August

    jQuery prepend and prependTo example

    In this post,  we are going to see jQuery prepend and prependTo methods. Both do the same task, insert text or html before content of every selected elements, so it will put text or html to first index of selected element. Both methods add text or html as a child to selected elements .Syntax is […]

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe to our newletter

Get quality tutorials to your inbox. Subscribe now.