How to Capitalize the First Letter in JavaScript: 5 Ways + Secrets

Online Python Trainer for Beginners

Learn Python easily without overwhelming theory. Solve practical tasks with automatic checking, get hints in Russian, and write code directly in your browser — no installation required.

Start Course

"Why doesn't JavaScript have a built-in method for capitalization?" — you might ask

This question has been tormenting beginners for years. On Stack Overflow, it has gathered thousands of votes and millions of views. It would seem that nothing could be simpler than capitalizing the first letter? But in JavaScript, such a trivial operation turns into a small quest.

In this article, we won't just give you a ready-made answer. We'll break down five different approaches, comparing them in terms of performance, readability, and reliability. You'll learn why str[0].toUpperCase() + str.slice(1) is not always the best choice, and how to handle exotic cases like empty strings or Unicode characters.

1. The Classic: charAt + slice

The most popular answer on Stack Overflow — and for good reason. This method is used in 90% of projects.

function capitalizeFirst(str) {    return str.charAt(0).toUpperCase() + str.slice(1);}

console.log(capitalizeFirst('hello')); // 'Hello'console.log(capitalizeFirst('javaScript')); // 'JavaScript'

Why charAt and not str[0]?

In older browsers (IE 8 and below), accessing by index str[0] returned undefined for an empty string. charAt(0) always returns an empty string, which is safer. In modern code, there's almost no difference, but the habit of using charAt remains as a best practice for legacy support.

Pros: simplicity, readability, works everywhere.
Cons: does not handle empty strings (will throw a TypeError).

2. Modern Approach: Template Literals + slice

With the advent of ES6, the code can be made a bit more elegant:

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

Or even shorter with the optional chaining operator (ES2020):

const capitalize = (str) => str?.charAt(0).toUpperCase() + str.slice(1);

The ?. operator protects against null or undefined, but not against an empty string. For an empty string, str?.charAt(0) will return "", and toUpperCase() on an empty string also returns "". Result: "" + "".slice(1) → "". It works correctly!

3. Regular Expressions: For Geeks and Aesthetes

The regex method looks like magic, but it's very powerful:

function capitalizeRegex(str) {    return str.replace(/^./, char => char.toUpperCase());}

console.log(capitalizeRegex('world')); // 'World'

What's happening here? ^. means "the first character of the string." We replace it with the result of calling toUpperCase().

Pros:

No need to check for an empty string (the regex simply won't do anything)
Easy to extend: /^\\w/ — only for letters, /^[a-z]/ — only for Latin characters

Cons:

20–30% slower (tests on jsPerf confirm this)
Less readable for beginners

4. CSS Method: When JS Isn't Needed

Sometimes the best code is the code you didn't write. If you're working with displaying text on a page, capitalization via CSS can be the perfect solution:

/* CSS */.capitalize {    text-transform: capitalize;}

// HTML<p class="capitalize">this text will be capitalized</p>

But there's a nuance: text-transform: capitalize capitalizes every word, not just the first one. If you only need the first word capitalized — you can't do without JS.