How to capitalize strings in JavaScript

To capitalize a string in Javascript so the first character is in uppercase, we don't need to add another NPM dependency. We can use plain JavaScript or even CSS if it is solely for presentational purposes.

TLDR;

js
const chars = 'hello'
chars[0].toUpperCase() + chars.slice(1) // 'Hello'

Walk through all steps

Let's see how we can approach this through a couple of common JavaScript functions. First, you have to keep in mind that strings are characters. So another way to write a string, is to create an array of characters that we join together.

js
const chars = ['h', 'e', 'l', 'l', 'o'].join('') // 'hello'

Uppercase the first letter

You can access any character within this array through its index. So if we need the letter e from this array, we can use square brackets to access it at index 1 (as arrays always start counting their index at 0).

But since the introduction of ECMAScript 5, we can treat strings as an array-like object. And thus access any character from a string in a similar fashion.

js
// We get the first letter by accessing the character at index zero.
const chars = ['h', 'e', 'l', 'l', 'o']
chars[0] // 'h'
// We get the first letter by using the `charAt()` method with index zero.
const chars = 'hello'
chars[0] // 'h'

Now we have the first letter isolated from the rest of the string, we can utilize the String.prototype.toUpperCase() method to convert it to uppercase. This method does not convert the string itself, but returns a new string with all of its characters in uppercase. You can read more about the method at the MDN docs.

js
const chars = 'hello'
chars[0].toUpperCase() // 'H'

Slice the rest of the letters

Next we need to get the rest of string after the first character. As we gonna uppercase the first character and append the rest as is. To get a portion or a slice of an array, we can use the Array.prototype.slice method. This method gives us a slice between a start and end index. Read more about it at the MDN docs.

We already know that we do not want the first character (at index 0), so our slice starts at 1. Our word has 5 characters and as an array starts at 0, our slice ends at 4.

js
const chars = ['h', 'e', 'l', 'l', 'o']
chars.slice(1, 4) // ['e', 'l', 'l', 'o']

But this will not work if we do not know our string length upfront. So let's use the Array.prototype.length property to pass the length of our string to the slice method.

js
const chars = ['h', 'e', 'l', 'l', 'o']
chars.slice(1, chars.length) // ['e', 'l', 'l', 'o']

And as it is common to slice arrays till the end, we can even skip passing the length.

js
const chars = ['h', 'e', 'l', 'l', 'o']
chars.slice(1) // ['e', 'l', 'l', 'o']

Now to slice a string, we can use String.prototype.slice. Which is identical to the array's slice method. You can read more about it in the MDN docs as well.

js
const chars = 'hello'
chars.slice(1) // 'ello'

So let's now combine both the first uppercase character and the rest of the string.

js
const chars = 'hello'
chars.charAt(0).toUpperCase() + chars.slice(1) // 'Hello'

And that will gives us a capitalized string in JavaScript.

Just use CSS

Please remember though, that if its just for displaying a capitalized text on a web page, you can just use a CSS selector.

html
<style>
    .capitalize {
        text-transform: capitalize;
    }
</style>
<span class="capitalize"> hello </span>