Categories
capitalize javascript letter string

How do I make the first letter of a string uppercase in JavaScript?

4723

How do I make the first letter of a string uppercase, but not change the case of any of the other letters?

For example:

  • "this is a test""This is a test"
  • "the Eiffel Tower""The Eiffel Tower"
  • "/index.html""/index.html"

10

  • 18

    Underscore has a plugin called underscore.string that includes this and a bunch of other great tools.

    – Aaron

    Apr 15, 2013 at 19:16


  • 259

    Simpler: string[0].toUpperCase() + string.substring(1)

    Nov 25, 2015 at 4:00

  • 59

    `${s[0].toUpperCase()}${s.slice(1)}`

    – eaorak

    Nov 2, 2019 at 20:20


  • 11

    ([initial, ...rest]) => [initial.toUpperCase(), ...rest].join("")

    Jan 6, 2020 at 6:49

  • 2

    str.toLowerCase().replace(/\b(\w)/g, s => s.toUpperCase())

    Mar 4, 2020 at 11:17

1577

Here’s a more object-oriented approach:

Object.defineProperty(String.prototype, 'capitalize', {
  value: function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
  },
  enumerable: false
});

You’d call the function, like this:

"hello, world!".capitalize();

With the expected output being:

"Hello, world!"

5

  • @aggregate1166877 can you explain why? almost 1500 upvotes for this answer. So without an explanation, people will just ignore you. Like me, cause I am gonna do this.

    Jun 30, 2021 at 14:36

  • 37

    @NielsLucas Fair enough. It has the potential to break future additions to JS. If it’s code that only you will use, then it’s not so bad – you just update your code and move on. The real issue here is when you start publishing libraries with code like this: your code modifies the built-in behavior for every library using your code. The consequence is that if you and another library author both override the same built-ins with your own implementations, you create bugs in the other library’s code (or whichever is loaded last) leaving the user with debugging hell of unreproducible bug reports.

    Jul 1, 2021 at 3:52

  • 3

    @aggregate1166877 Thank you for the explanation. I totally agree with you that this way is NOT gonna be a good practice for creating a library and I also agree that this way is fine for a project. Hope people will read this, cause I think this is a good attention to the original answer.

    Jul 1, 2021 at 13:59

  • sorry but no, just don’t add any functions to basic types. extend them ? const ExtendedString = class extends String { capitalize () { return this[0].toUpperCase() + this.slice(1) } } const s = new ExtendedString(‘hello’) console.log(s.capitalize())

    Oct 26, 2021 at 14:01


  • 1

    It would be great to see the author include some of this disclaimer and detail about extending built-in types in the post. Hard for people to notice the comments.

    Dec 13, 2021 at 16:50

880

In CSS:

p::first-letter {
    text-transform:capitalize;
}

4

  • 166

    $(‘#mystring_id’).text(string).css(‘text-transform’,’capitalize’);

    – DonMB

    Sep 24, 2015 at 17:34

  • 41

    Additionally, this only affects the display of the string – not the actual value. If it’s in a form, e.g., the value will still be submitted as-is.

    Jun 7, 2016 at 13:26

  • 6

    It’s not JS, but I bet this is the best answer for 99% of the people reading this. I’m certainly glad I scrolled this far 🙃

    Dec 5, 2021 at 13:10

  • 6

    Also ::first-letter works ONLY on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect.

    Dec 8, 2021 at 13:11