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! 👍