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

admin管理员组

文章数量:1125348

How do I make the first character of a string uppercase if it's a letter, 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"

How do I make the first character of a string uppercase if it's a letter, 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"

• javascript
• string

Share Improve this question Follow edited Feb 7, 2023 at 19:45 miken32 42.7k1616 gold badges121121 silver badges171171 bronze badges asked Jun 22, 2009 at 8:25 Robert WillsRobert Wills 54.2k33 gold badges1919 silver badges66 bronze badges 4

• 21 Underscore has a plugin called underscore.string that includes this and a bunch of other great tools. – Aaron Commented Apr 15, 2013 at 19:16
• 6 For those using angular, there is a titlecase pipe: angular.io/api/common/TitleCasePipe – ecstrema Commented Jan 27, 2021 at 20:54
• 3 For those who don't know how Stack Overflow is designed to work: Resolving advice is posted to the page as an "answer". Any non-resolving advice, requests for clarity, and lone/relevant hyperlinks can be posted as comments under the question. – mickmackusa Commented Jun 16, 2021 at 23:17
• I’m voting to close this question because it doesn't show any effort at a solution. – Lance Pollard Commented Nov 1, 2024 at 3:00

Add a comment  | 

106 Answers 106

Sorted by: Reset to default 1 2 3 4 Next 8094 +50

function capitalizeFirstLetter(val) {
    return String(val).charAt(0).toUpperCase() + String(val).slice(1);
}

Some other answers modify String.prototype (this answer used to as well), but I would advise against this now due to maintainability (hard to find out where the function is being added to the prototype and could cause conflicts if other code uses the same name/a browser adds a native function with that same name in future).

Edited to add this DISCLAIMER: please read the comments to understand the risks of editing JS basic types.

---

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

Using just CSS and its text-transform property:

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

Here is a shortened version of the popular answer that gets the first letter by treating the string as an array:

function capitalize(s)
{
    return String(s[0]).toUpperCase() + String(s).slice(1);
}

Update

According to the comments below this doesn't work in IE 7 or below.

Update 2:

To avoid undefined for empty strings (see @njzk2's comment below), you can check for an empty string:

function capitalize(s)
{
    return s && String(s[0]).toUpperCase() + String(s).slice(1);
}

ES6 version

const capitalize = s => s && String(s[0]).toUpperCase() + String(s).slice(1)

// to always return type string event when s may be falsy other than empty-string
const capitalize = s => (s && String(s[0]).toUpperCase() + String(s).slice(1)) || ""

I didn’t see any mention in the existing answers of issues related to astral plane code points or internationalization. “Uppercase” doesn’t mean the same thing in every language using a given script.

Initially I didn’t see any answers addressing issues related to astral plane code points. There is one, but it’s a bit buried (like this one will be, I guess!)

Overview of the hidden problem and various approaches to it

Most of the proposed functions look like this:

function capitalizeFirstLetter(str) {
  return str[0].toUpperCase() + str.slice(1);
}

However, some cased characters fall outside the BMP (basic multilingual plane, code points U+0 to U+FFFF). For example take this Deseret text:

capitalizeFirstLetter("

                本文标签：
                How do I make the first letter of a string uppercase in JavaScriptStack Overflow

                        版权声明：本文标题：How do I make the first letter of a string uppercase in JavaScript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，
                        转载请联系作者并注明出处：http://www.betaflare.com/web/1736659316a1946337.html，
                        本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。