Convert first character of a string to uppercase in JavaScript

This post will discuss how to convert the first character of a string to uppercase in JavaScript.

There are several ways to convert the first character of a string to uppercase in JavaScript. Here are some of the most common functions, along with some examples and explanations:

1. Using `charAt()` and `toUpperCase()` function

A simple and widely used function is to use the charAt() function with the toUpperCase() function of the string object. The charAt() function returns the character at a given index in the string, and the toUpperCase() function converts a character to uppercase. We can use these functions to access the first character of the string, make it to uppercase, and then concatenate it with the rest of the string using the slice() function and the + operator. For example, we can convert the first character to uppercase using a custom function like this:

function capitalizeFirstLetter(string) {

// check for empty string

if (str.length == 0) {

return "";

}

// return capitalized string

return string.charAt(0).toUpperCase() + string.slice(1);

}

let str = "hello world";

let newStr = capitalizeFirstLetter(str);

// newStr is "Hello world"

console.log(newStr);

Download Run Code

2. Using `replace()` function

Another way is to use the replace() function, which is a built-in function of the string object. It takes a regular expression and a replacement string as arguments, and replaces the matches of the regular expression with the replacement string. We can use a regular expression that matches the first character of the string, such as /^./ or /^\w/, and pass a callback function that returns the uppercase version. Here’s an example:

function capitalizeFirstLetter(string) {

// check for empty string

if (str.length == 0) {

return "";

}

// return capitalized string

return string.replace(/^./, (c) => c.toUpperCase());

}

let str = "hello world";

let newStr = capitalizeFirstLetter(str);

// newStr is "Hello world"

console.log(newStr);

Download Run Code

3. Using ES6 features

This is a modern and functional way of writing JavaScript code that leverages the latest syntax. We can use some of the new features of ES6, such as destructuring, template literals, and arrow functions, to capitalize the first character of a string. For example, we can convert the first character to uppercase using ES6 features like this:

const capitalizeFirstLetter = ([first, ...rest]) =>

first.toUpperCase() + rest.join("");

let str = "hello world";

let newStr = capitalizeFirstLetter(str);

// newStr is "Hello world"

console.log(newStr);

Download Run Code

4. Using `split()`, `map()`, and `join()` functions

We can use the split(), map(), and join() functions to split a string into an array of characters, map each character to a function that capitalizes the first character and returns the rest unchanged, and join them back into a string. Here’s an example of how we can achieve this:

function capitalizeFirstLetter(string) {

let result = str.split("") // split the string into an array of characters

// map each character to a function that capitalizes the first character

.map((char, index) => index === 0 ? char.toUpperCase() : char)

// join the array back into a string

.join("");

return result;

}

let str = "hello world";

let newStr = capitalizeFirstLetter(str);

// newStr is "Hello world"

console.log(newStr);

Download Run Code

That’s all about converting the first character of a string to uppercase in JavaScript.

Convert first character of a string to uppercase in JavaScript

1. Using charAt() and toUpperCase() function

2. Using replace() function

3. Using ES6 features

4. Using split(), map(), and join() functions

Share this:

1. Using `charAt()` and `toUpperCase()` function

2. Using `replace()` function

4. Using `split()`, `map()`, and `join()` functions