DEV Community

loading...
Cover image for How to uppercase the first letter of a string in JavaScript

How to uppercase the first letter of a string in JavaScript

_codax_ profile image Alexis Guzman ・1 min read

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.

Discussion (2)

Collapse
inhuofficial profile image
InHuOfficial

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
_codax_ profile image
Alexis Guzman Author

Awesome. Thanks for the feedback! 👍

Forem Open with the Forem app