DEV Community

Cover image for How to uppercase the first letter of a string in JavaScript
Alexis Guzman
Alexis Guzman

Posted on

How to uppercase the first letter of a string in JavaScript

JavaScript offers many ways to capitalize a string to make the first character uppercase. Learn the various ways, and also find out which one you should use, using plain JavaScript.

1. chartAt + slice

The first way to do this is through a combination of cartAt() and slice(). With chartAt() uppercases the first letter, and with slice() slices the string and returns it starting from the second character:

const name = 'codax';
const nameCapitalized = name.charAt(0).toUpperCase() + name.slice(1);
// expected output: "Codax" 
Enter fullscreen mode Exit fullscreen mode

You can create a function to do that:

const capitalize = (s) => {
  return s.charAt(0).toUpperCase() + s.slice(1)
}

capitalize('codax'); // "Codax"
Enter fullscreen mode Exit fullscreen mode

2. Replace function

My favorite is with replace() because I love regex (even if I'm not an expert) and regex is more customizable in general.

const name = 'codax';
const nameCapitalized = name.replace(/^\w/, (c) => c.toUpperCase()));
// expected output: "Codax"
Enter fullscreen mode Exit fullscreen mode

You can also make it a function:

const capitalize = (s) =>
  return s.replace(/^\w/, (c) => c.toUpperCase()));
}

capitalize('codax'); // "Codax"
Enter fullscreen mode Exit fullscreen mode

Conclusion

For readability, I recommend the first option (chartAt + slice), and for speed, I recommend the second option (replace).
If you know other/better ways please leave below in the comments, or how to improve on the ones mentioned here.
Thanks.

Top comments (2)

Collapse
 
grahamthedev profile image
GrahamTheDev •

Pretty much nailed it on the ways to do it!

With a tiny rework you can make it so that it works on the prototype as well! (also I might rename it to "capitaliseFirst" just in case you ever want a function to capitalise the whole sentence!)

Collapse
 
codingcodax profile image
Alexis Guzman •

Awesome. Thanks for the feedback! πŸ‘