How to Capitalize the First Letter in a String in JavaScript

I’m still kind of spoiled by the built-in functions in PHP (as well as Ruby and Python for this particular task). Something like capitalizing the first letter of a string is a trivial task in most languages:

<?php
// Capitalize first letter with PHP
ucfirst('some string that needs the first character capitalized');

# Capitalize first letter with Python
"some lower case string".capitalize()

# Capitalize first letter with Ruby
"some lower case string".capitalize

JavaScript on the other hand, assuming you’re not using php.js, the act of capitalizing the first letter of a string is a bit more involved.

At the most basic level, the steps involved to capitalize the first character of a string are:

1. Isolating the first character from the rest of the string.
2. Capitalizing the character.
3. Concatenating the now capitalized letter with the rest of the string.

And that doesn’t even take into consideration if you want to force the rest of the string to be lower cased or not!

Based on the steps above, you can capitalize the first character of a string quite a few different ways, some involving regular expressions and some not.

const lower = 'this is an entirely lowercase string';
const upper = lower.charAt(0).toUpperCase() + lower.substring(1);

Or to save a few key strokes, you can use slice() instead of substring to achieve the same results:

const lower = 'this is an entirely lowercase string';
const upper = lower.charAt(0).toUpperCase() + lower.slice(1);

If you are comfortable with regular expressions, you can leverage the replace() method and do things this way:

const lower = 'this is an entirely lowercase string';
const upper = lower.replace(/^\w/, function (chr) {
  return chr.toUpperCase();
});

You can even take it one step further by using more modern (and shorter) syntax like ES6 arrow functions and shorthand return:

const lower = 'this is an entirely lowercase string';
const upper = lower.replace(/^\w/, chr => chr.toUpperCase());

A bit more code than PHP but it gets the job done! It works in [modern] web browsers as well as Node.js!

These examples all assume your string is already lowercased. If it’s not and your concerned with ensuring only the first letter is capitalized, simply apply .toLowerCase() to your string before processing it.

Wrapping up the aforementioned code into a reusable method is extremely easy as well, and we can build in support to force the string to be lowercased or not:

const upperCaseFirst = (str, forceLower = false) => {
  if (typeof str === 'string') {
    if (forceLower) {
      str = str.toLowerCase();
    }

    return str.replace(/^\w/, chr => chr.toUpperCase());
  }

  // You could error here, or return the original variable, your call:
  return '';
};

Of course, if you’re into TypeScript, you can properly type the function and omit the sanity checks if you can guarantee the types at runtime:

const upperCaseFirst = (str: string, forceLower?: boolean): string => {
  if (forceLower) {
    str = str.toLowerCase();
  }

  return str.replace(/^\w/, chr => chr.toUpperCase());
};

If you happen to have an array of strings that need to be capitalized, you can feed our upperCaseFirst function in via Array.map():

const lowers = ['first', 'second', 'third'];
const uppers = lowers.map(upperCaseFirst);

If you want to force the strings to be lowercased:

const mixed = ['FiRsT', 'sEcOnD', 'tHiRd'];
const uppers = lowers.map((lower) => upperCaseFirst(lower, true));

Also, if you’re okay with adding a new dependency to your project, you can also use my string lib called “Luthier” which has an upperCaseFirst() method and many other string utilities. Check it out on GitHub