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

ID : 76

viewed : 236

Tags : javascriptstringlettercapitalizejavascript

Top 5 Answer for How do I make the first letter of a string uppercase in JavaScript?

vote vote

98

The basic solution is:

function capitalizeFirstLetter(string) {   return string.charAt(0).toUpperCase() + string.slice(1); }  console.log(capitalizeFirstLetter('foo')); // Foo

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).

...and then, there is so much more to this question when you consider internationalisation, as this astonishingly good answer (buried below) shows.

If you want to work with Unicode code points instead of code units (for example to handle Unicode characters outside of the Basic Multilingual Plane) you can leverage the fact that String#[@iterator] works with code points, and you can use toLocaleUpperCase to get locale-correct uppercasing:

const capitalizeFirstLetter = ([ first, ...rest ], locale = navigator.language) =>   first.toLocaleUpperCase(locale) + rest.join('')  console.log(   capitalizeFirstLetter('foo'), // Foo   capitalizeFirstLetter("πΆπ²π‘ŒπΌπ²π‘‰"), // "πŽπ²π‘ŒπΌπ²π‘‰" (correct!)   capitalizeFirstLetter("italya", 'tr') // Δ°talya" (correct in Turkish Latin!) )

For even more internationalization options, please see the original answer below.

vote vote

89

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

77

In CSS:

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

64

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 s[0].toUpperCase() + 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 && s[0].toUpperCase() + s.slice(1); } 

ES version

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

60

If you're interested in the performance of a few different methods posted:

Here are the fastest methods based on this jsperf test (ordered from fastest to slowest).

As you can see, the first two methods are essentially comparable in terms of performance, whereas altering the String.prototype is by far the slowest in terms of performance.

// 10,889,187 operations/sec function capitalizeFirstLetter(string) {     return string[0].toUpperCase() + string.slice(1); }  // 10,875,535 operations/sec function capitalizeFirstLetter(string) {     return string.charAt(0).toUpperCase() + string.slice(1); }  // 4,632,536 operations/sec function capitalizeFirstLetter(string) {     return string.replace(/^./, string[0].toUpperCase()); }  // 1,977,828 operations/sec String.prototype.capitalizeFirstLetter = function() {     return this.charAt(0).toUpperCase() + this.slice(1); } 

enter image description here

Top 3 video Explaining How do I make the first letter of a string uppercase in JavaScript?

Related QUESTION?