How to make first letter of a string uppercase in JavaScript ?

In this article, we will convert the first letter of a string to uppercase in Javascript. There are a number of ways to capitalize the first letter of the string in JavaScript. 

Here are some common approaches to make the first letter of a string uppercase in javascript.

• Using toUpperCase() method
• Using slice() method
• Using charAt() method
• Using replace() method
• Using the split() , map() and join() methods
• Using ES6 spread syntax and join() method
• Using ES6 arrow functions and template literals

Approach 1:JavaScript toUpperCase() Function:

This function applies on a string and changes all letters to uppercase. 

Syntax:

string.toUpperCase()

Approach 2 : JavaScript slice() Function:

This function applies to a string and slices it according to the passed parameter. 

Syntax:

string.slice(start, end)

Example: This example uses the slice() method to convert the first letter to uppercase.

Javascript

function capitalizeFLetter() {
    let string = 'geeksforgeeks';
    console.log(string[0].toUpperCase() +
        string.slice(1));
}
capitalizeFLetter()

Output

Geeksforgeeks

Approach 3 : JavaScript charAt() Function:

This charAt() function returns the character at a given position in the string. 

Syntax:

string.charAt(index)

Example: This example uses charAT() method to make the first letter of a string uppercase.

Javascript

function capitalizeFLetter() {
    let string = 'geeksforgeeks';
    console.log(string.charAt(0).toUpperCase() +
        string.slice(1));
}
capitalizeFLetter()

Output

Geeksforgeeks

Approach 4 : JavaScript replace() Function:

This is a built-in function in JavaScript that is used to replace a slice of a string with another string or a regular expression. The original string will not be affected. 

Syntax:

str.replace(A, B)

The below examples show the conversion to uppercase using the above-described methods.

Example: This example uses string.replace() method to make the first letter of a string uppercase.

Javascript

function capitalizeFLetter() {
    let string = 'geeksforgeeks';
    console.log(string.replace(/^./, string[0].toUpperCase()));
}
capitalizeFLetter()

Output

Geeksforgeeks

Approach 5 : Using the split() , map() and join() methods:

The split() method divides the string into an array of characters, map() converts the first character to uppercase, and join() merges the modified array into a string.

Example: In this example, w are using the above-explained approach.

Javascript

let str = "geeksforgeeks";
let result = str.split('').map((char, index) =>
    index === 0 ? char.toUpperCase() : char).join('');
console.log(result);

Output

Geeksforgeeks

Approach 6 : Using ES6 spread syntax and join() method:

The spread syntax converts the string into an array, the map() method transforms the first character to uppercase, and join() merges the modified array into a string.

Syntax:

let result = [...str][0].toUpperCase() + [...str].slice(1).join('');

Example: In this example, we are using the above-explained approach.

Javascript

let str = "geeksforgeeks";
let result = [...str].map((char, index) =>
    index === 0 ? char.toUpperCase() : char).join('');
console.log(result);

Output

Geeksforgeeks

Approach 7: Using ES6 arrow functions and template literals:

In this approach we are using an immediately-invoked arrow function to capitalize the first letter of the string “geeksforgeeks” and concatenate it with the remaining characters, resulting in the string “Geeksforgeeks”.

Syntax:

const result = (() => {
    const firstChar = str.charAt(0).toUpperCase();
    const remainingChars = str.slice(1);
    return `${firstChar}${remainingChars}`;
})();

Example: In this example, ES6 arrow functions and template literals to succinctly transform the first letter of the string to uppercase using the replace() method.

Javascript

const str = "geeksforgeeks";
const result = (() => {
    const firstChar = str.charAt(0).toUpperCase();
    const remainingChars = str.slice(1);
    return `${firstChar}${remainingChars}`;
})();

console.log(result);

Output

Geeksforgeeks