DEV Community

Jerry Nwosu
Jerry Nwosu

Posted on

2

How to Capitalize the First Letter in JavaScript

When programming, it's often necessary to capitalize the first letter of a string. This can be important for formatting names or titles correctly, or for converting user input to a proper format. Luckily, JavaScript offers various approaches for capitalizing the first letter of a string.

The easiest way to capitalize the first letter of a string is to use the toUpperCase() method. This method converts a string to uppercase and returns the result. Here's how you can capitalize the first letter of a string using this method:

let str = "hello world"
let capitalizedStr = str.charAt(0).toUpperCase() + str.slice(1)

console.log(capitalizedStr) // "Hello world"
Enter fullscreen mode Exit fullscreen mode

We declare a variable str with the original string value. Then, we use the charAt() method to select the first letter of the string at index 0 and capitalize it with the toUpperCase() method. Next, we concatenate this uppercase character with the rest of the string, which we extract using slice() method starting at index 1.
Lastly we assign the resulting value to a new variable called capitalizedStr and log it to the console.

Another way to capitalize the first letter of a string in JavaScript is to use the slice() and toUpperCase() methods together. Here's an example of how to use this method:

let str = "hello world"
let capitalizeStr = str.slice(0, 1).toUpperCase() + str.slice(1)

console.log(capitalizedStr) // "Hello world"
Enter fullscreen mode Exit fullscreen mode

This method is similar to the previous one, except we use the slice() method to extract the first character of the string and convert it to uppercase.

Capitalize Function

To streamline the code, we can create a utitlity function for the capitalize method and utitlize it whereever needed.

Here's an example:

function capitalize(str) {
  if (typeof str !== "string") {
    return ""
  }

  return str.charAt(0).toUpperCase() + str.slice(1)
}

// Using the function
capitalize("hello world") // "Hello world" ✅
capitalize(12345) // "" ❌
Enter fullscreen mode Exit fullscreen mode

Similarly to the previous code examples, the above code capitalizes the first letter of a string. However, it differs by introducing a reusable capitalize function that can be called from anywhere in the application. Additionally, it includes error handling to check the type of the input value using the typeof keyword.

Originally published at https://geekreflex.netlify.app

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, cherished by the supportive DEV Community. Coders of every background are encouraged to bring their perspectives and bolster our collective wisdom.

A sincere “thank you” often brightens someone’s day—share yours in the comments below!

On DEV, the act of sharing knowledge eases our journey and forges stronger community ties. Found value in this? A quick thank-you to the author can make a world of difference.

Okay