How to capitalize the first letter of a string in JavaScript

1charAt(0).toUpperCase() + slice(1)Recommended

charAt(0) returns the first character, toUpperCase() uppercases it, and slice(1) returns everything from index 1 onward. Wrap it in a small function and you have capitalize(). Characters with no uppercase form, such as digits and punctuation, come back unchanged, so you don't need to check the first character first.

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

console.log(capitalize("hello world"));
console.log(capitalize("javaScript"));
console.log(capitalize("42 apples"));
console.log(JSON.stringify(capitalize("")));

// Only the first character changes. To force the rest to lowercase:
const capitalizeOnly = (str) =>
  str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();

console.log(capitalizeOnly("hELLO wORLD"));

Output: Hello world, JavaScript, 42 apples, "", Hello world. Only the first character changes, so the capital S in javaScript survives. The empty string works because "".charAt(0) and "".slice(1) both return "". If you also want the rest lowercased, add .toLowerCase() to the slice, as capitalizeOnly does, but that also turns acronyms like NASA into Nasa. str.substring(1) works the same as str.slice(1) here. Avoid substr(): it is a legacy method that the spec only keeps for old code.

2str[0], a regex, or destructuring

You will also see three other versions. Bracket indexing str[0] is the most common one, and it gives the same result on any non-empty string. replace(/^./, …) uppercases whatever the regex matched at the start. Destructuring pulls the first character off the front. They differ on the empty string, which shows up whenever the input comes from a form field, a CSV cell or a split().

const word = "compile";

// Bracket indexing: the same result on a non-empty string
console.log(word[0].toUpperCase() + word.slice(1));

// A regex that replaces the first character
console.log(word.replace(/^./, (c) => c.toUpperCase()));

// Destructuring, with a default for the empty string
const [first = "", ...rest] = word;
console.log(first.toUpperCase() + rest.join(""));

// The empty-string trap: "" has no index 0
const empty = "";
console.log(JSON.stringify(empty.charAt(0)), empty[0], empty.at(0));

try {
  empty[0].toUpperCase();
} catch (err) {
  console.log(`${err.name}: ${err.message}`);
}

console.log(JSON.stringify(empty.replace(/^./, (c) => c.toUpperCase())));

The first three lines print Compile. The fourth prints "" undefined undefined: on an empty string charAt(0) returns "", but str[0] and str.at(0) return undefined, so calling .toUpperCase() on them fails with TypeError: Cannot read properties of undefined (reading 'toUpperCase'). The regex version prints "" because ^. has nothing to match, and the destructuring version is safe only because of the = "" default. If you prefer str[0], guard it: str && str[0].toUpperCase() + str.slice(1).

3Letters outside the BMP, emoji and surrogate pairs

A JavaScript string is a sequence of UTF-16 code units. Characters above U+FFFF, which include emoji and the letters of scripts such as Deseret, Osage and Adlam, take two code units each (a surrogate pair). charAt(), str[0], slice() and length all count code units, so charAt(0) returns half a character. Spreading the string ([...str]), codePointAt() and a regex with the u flag all work in whole code points instead.

// Starts with U+10428 DESERET SMALL LETTER LONG I, a letter outside the BMP
const s = "\u{10428}ello";

console.log(s, s.length, [...s].length);

// charAt(0) returns half of a surrogate pair, which has no uppercase
console.log(JSON.stringify(s.charAt(0)));
console.log(s.charAt(0).toUpperCase() + s.slice(1));

// Fix 1: spread the string into code points
const capitalize = ([first = "", ...rest]) => first.toUpperCase() + rest.join("");
console.log(capitalize(s));

// Fix 2: read the whole code point with codePointAt
const firstChar = String.fromCodePoint(s.codePointAt(0));
console.log(firstChar.toUpperCase() + s.slice(firstChar.length));

// Fix 3: a regex with the u flag matches a full code point
console.log(s.replace(/^./u, (c) => c.toUpperCase()));

// Emoji have no case, so they pass through every version untouched
console.log(capitalize("🚀 launch"), JSON.stringify("🚀 launch".charAt(0)));

The first line prints 𐐨ello 6 5: five characters, six code units. charAt(0) is "\ud801", a lone high surrogate with no uppercase form, so the charAt version prints 𐐨ello unchanged. It doesn't corrupt anything, because the two halves are joined again, but it silently skips the capital. All three fixes print 𐐀ello. Emoji have no case, so 🚀 launch comes back intact from every version. The real risk with emoji is using the first character on its own, for an avatar initial say: charAt(0) gives you "\ud83d", half a rocket.

4Locale-aware: toLocaleUpperCase()

toUpperCase() applies Unicode's default case mapping, which is the same in every language. A few languages disagree with it. Turkish and Azerbaijani have a dotted i / İ pair and a dotless ı / I pair, so the capital of i is İ, not I. toLocaleUpperCase(locale) applies those rules when you pass it the language tag.

const city = "istanbul";

// toUpperCase() uses the language-neutral Unicode mapping
console.log(city.charAt(0).toUpperCase() + city.slice(1));

// Turkish maps a dotted i to a dotted capital İ
console.log(city.charAt(0).toLocaleUpperCase("tr-TR") + city.slice(1));

const capitalizeIn = (str, locale) =>
  str.charAt(0).toLocaleUpperCase(locale) + str.slice(1);

console.log(capitalizeIn("izmir", "tr"), capitalizeIn("izmir", "en"));

// The reverse trap when lowercasing the rest
console.log("IRMAK".toLowerCase(), "IRMAK".toLocaleLowerCase("tr"));

// Uppercasing can change a string's length
console.log("ß".toUpperCase(), "ß".length, "ß".toUpperCase().length);

Output: Istanbul, then İstanbul with the Turkish rules, then İzmir Izmir for the same word in Turkish and English. Lowercasing has the mirror problem: IRMAK becomes irmak by default but ırmak in Turkish. Always pass the locale explicitly. With no argument, toLocaleUpperCase() uses the runtime's default locale, which differs between machines, servers and browsers. The last line, SS 1 2, is a reminder that uppercasing can change a string's length: German ß has no single-character capital in the default mapping, so it becomes SS.

5Which should you use?

6Common variation: capitalize every word

To capitalize each word, apply the same function to every word. split(" ") plus map() plus join(" ") is the clearest version. A regex that uppercases the first non-space character after the start or after any whitespace handles tabs and newlines as well. The regex you will find most often, /\b\w/g, looks similar but breaks on real text.

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

// Split on spaces, capitalize each word, join back
const titleCase = (str) => str.split(" ").map(capitalize).join(" ");

console.log(titleCase("the quick brown fox"));
console.log(titleCase("keep   the  spacing"));

// A regex: the first non-space character after the start or any whitespace
const titleCaseRe = (str) => str.replace(/(^|\s)\S/gu, (m) => m.toUpperCase());

console.log(JSON.stringify(titleCaseRe("tabs\tand\nnewlines too")));

// The popular \b\w one-liner breaks on apostrophes and accents
const naive = (str) => str.replace(/\b\w/g, (c) => c.toUpperCase());

console.log(naive("don't lose your élan"));
console.log(titleCaseRe("don't lose your élan"));

// Lowercase first for strict Title Case
console.log(titleCase("HELLO WORLD".toLowerCase()));

Output: The Quick Brown Fox, then Keep The Spacing with the extra spaces kept. split(" ") produces empty strings between repeated spaces, and charAt(0) handles them where str[0] would throw. The regex version prints "Tabs\tAnd\nNewlines Too". The \b\w version prints Don'T Lose Your éLan: \w only matches ASCII letters, digits and underscores, so there is a word boundary after the apostrophe and another between é and l. The whitespace regex gets it right: Don't Lose Your Élan. Lowercase the input first if it might arrive in capitals. Headline-style title case, which leaves words like "the" and "of" in lowercase, needs a list of those words on top of this.