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

Question

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"

Ori

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

For those using angular, there is a titlecase pipe: angular.io/api/common/TitleCasePipe – Catchings

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. – Infuriate

Answer 1

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.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).

Filmer

Here's this solution in TypeScript, where the type returned is the capitalized word, rather than string: const capitalize = <T extends string>(s: T) => (s[0].toUpperCase() + s.slice(1)) as Capitalize<typeof s>; – Countersign

This is mentioned in answers below, but worth pointing out here: this answer does not work for all Unicode text. Passing "𐐨𐑍𐑏" to this function returns the same string, but it should return "𐐀𐑍𐑏". That's because charAt splits at UTF16 code units. There are characters with case-folding definitions in the SMP that are encoded with two UTF16 code units. While simple, this shouldn't be used. – Phew

You don't even have to reach for rare languages to break this. Unicode ligature characters break this as well: "flat" is returned as "FLat". – Phew

JS you are so ugly – Yt

Wow, I didn't know about Capitalize<T> utility in TS. Awesome! – Secretin

Answer 2

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

Quadruplet

@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. – Katheryn

@Katheryn 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. – Engram

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()) – Electromotor

if I ever add custom functions like that, my approach is to add unique scope to the names of such methods. Like for example if your project name is MyProject then it would be "hello world".myProjectCapitalise() or something along those lines. So if something external changes, it won't clash with that name. Just need to make sure the scope is unique enough in your context. – Narcolepsy

@virus either use a symbol or just don't change the built in types. No reason to jump through hoops. – Whiplash

@Whiplash your choice is your choice bro. Don't like this approach - don't use it. As mentioned above, there are legit reasons to extend built in types, with a few caveats to consider. If you are 100% agains it, good for you. – Narcolepsy

@virus as I already said above - use a symbol if you really need to extend built-ins. – Whiplash

@Whiplash consider adding your own answer if you see ways to improve it. – Narcolepsy

@virus there is already plenty of information on how to extend built-ins in JS. I was just distilling and relaying it to you. There is certainly no call for posting a 166th answer to this question. Especially since it's not an answer to this question but a rather different one. – Whiplash

@Whiplash c'mon bro. I was adding to the topic of this particular question and your comment was outside of it's scope. Again, add your answer if you have an approach that is still not mentioned here (and I can't see anyone talking about Symbols) in the way that answers the original question. I'll be happy to check out it too. – Narcolepsy

@VLAZ, ok I was wrong. Your proposed solution with Symbols indeed suits. let capitalizeSym = Symbol('capitalize') String.prototype[capitalizeSym] = function (...){...} - this avoids potential collisions due to how Symbol works. However one have to keep global reference to capitalizeSym in order to access the function later on which is not ideal neither. In most cases people would be fine with the original answer above anyways, considering the caveats. I didn't know much about Symbols though but learned something new thanks to your comment. – Narcolepsy

Answer 3

Using just CSS and its text-transform property:

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

Ea

$('#mystring_id').text(string).css('text-transform','capitalize'); – Heiser

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. – Brantbrantford

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. – Suffering

^ I am immensely curious why this doesn't work for flex and grid.... – Marianamariand

Answer 4

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);
}

ES6 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)) || ""

Twofold

To always return a string, I find s ? s[0].toUpperCase() + s.slice(1) : "" more readable – Cello

If you have a string from an object, use e.g. elem.name[0].toUpperCase() + elem.name.slice(1) – Merril

Likely unrelated to your answer, but why do you offer a one-line function for the short code? Remembering string manipulation is what we should train to keep the brain busy. – Merril

Answer 5

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);
}

Vegetate

i wonder why that last method is so slow, do you attach the function to the prototype every iteration ? that would be unfair – Electromotor

Answer 6

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("𐐶𐐲𐑌𐐼𐐲𐑉"); // "𐐶𐐲𐑌𐐼𐐲𐑉"

The first character here fails to capitalize because the array-indexed properties of strings don’t access “characters” or code points*. They access UTF-16 code units. This is true also when slicing — the index values point at code units.

It happens to be that UTF-16 code units are 1:1 with USV code points within two ranges, U+0 to U+D7FF and U+E000 to U+FFFF inclusive. Most cased characters fall into those two ranges, but not all of them.

From ES2015 on, dealing with this became a bit easier. String.prototype[@@iterator] yields strings corresponding to code points**. So for example, we can do this:

function capitalizeFirstLetter([ first='', ...rest ]) {
  return [ first.toUpperCase(), ...rest ].join('');
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

For longer strings, this is probably not terribly efficient*** — we don’t really need to iterate the remainder. We could use String.prototype.codePointAt to get at that first (possible) letter, but we’d still need to determine where the slice should begin. One way to avoid iterating the remainder would be to test whether the first codepoint is outside the BMP; if it isn’t, the slice begins at 1, and if it is, the slice begins at 2.

function capitalizeFirstLetter(str) {
  if (!str) return '';

  const firstCP = str.codePointAt(0);
  const index = firstCP > 0xFFFF ? 2 : 1;

  return String.fromCodePoint(firstCP).toUpperCase() + str.slice(index);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

You could use bitwise math instead of > 0xFFFF there, but it’s probably easier to understand this way and either would achieve the same thing.

We can also make this work in ES5 and below by taking that logic a bit further if necessary. There are no intrinsic methods in ES5 for working with codepoints, so we have to manually test whether the first code unit is a surrogate****:

function capitalizeFirstLetter(str) {
  if (!str) return '';

  var firstCodeUnit = str[0];

  if (firstCodeUnit < '\uD800' || firstCodeUnit > '\uDFFF') {
    return str[0].toUpperCase() + str.slice(1);
  }

  return str.slice(0, 2).toUpperCase() + str.slice(2);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

Deeper into internationalization (whose capitalization?)

At the start I also mentioned internationalization considerations. Some of these are very difficult to account for because they require knowledge not only of what language is being used, but also may require specific knowledge of the words in the language. For example, the Irish digraph "mb" capitalizes as "mB" at the start of a word. Another example, the German eszett, never begins a word (afaik), but still helps illustrate the problem. The lowercase eszett (“ß”) capitalizes to “SS,” but “SS” could lowercase to either “ß” or “ss” — you require out-of-band knowledge of the German language to know which is correct!

The most famous example of these kinds of issues, probably, is Turkish. In Turkish Latin, the capital form of i is İ, while the lowercase form of I is ı — they’re two different letters. Fortunately we do have a way to account for this:

function capitalizeFirstLetter([ first='', ...rest ], locale) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

capitalizeFirstLetter("italy", "en") // "Italy"
capitalizeFirstLetter("italya", "tr") // "İtalya"

In a browser, the user’s most-preferred language tag is indicated by navigator.language, a list in order of preference is found at navigator.languages, and a given DOM element’s language can be obtained (usually) with Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HERE in multilanguage documents.

In agents which support Unicode property character classes in RegExp, which were introduced in ES2018, we can clean stuff up further by directly expressing what characters we’re interested in:

function capitalizeFirstLetter(str, locale=navigator.language) {
  return str.replace(/^\p{CWU}/u, char => char.toLocaleUpperCase(locale));
}

This could be tweaked a bit to also handle capitalizing multiple words in a string with fairly good accuracy for at least some languages, though outlying cases will be hard to avoid completely if doing so no matter what the primary language is.

The CWU or Changes_When_Uppercased character property matches all code points which change when uppercased in the generic case where specific locale data is absent. There are other interesting case-related Unicode character properties that you may wish to play around with. It’s a cool zone to explore but we’d go on all day if we enumerated em all here. Here’s something to get your curiosity going if you’re unfamiliar, though: \p{Lower} is a larger group than \p{LowercaseLetter} (aka \p{Ll}) — conveniently illustrated by the default character set comparison in this tool provided by Unicode. (NB: not everything you can reference there is also available in ES regular expressions, but most of the stuff you’re likely to want is).

Alternatives to case-mapping in JS (Firefox & CSS love the Dutch!)

If digraphs with unique locale/language/orthography capitalization rules happen to have a single-codepoint “composed” representation in Unicode, these might be used to make one’s capitalization expectations explicit even in the absence of locale data. For example, we could prefer the composed i-j digraph, ij / U+133, associated with Dutch, to ensure a case-mapping to uppercase IJ / U+132:

capitalizeFirstLetter('ijsselmeer'); // "IJsselmeer"

On the other hand, precomposed digraphs and similar are sometimes deprecated (like that one, it seems!) and may be undesirable in interchanged text regardless due to the potential copypaste nuisance if that’s not the normal way folks type the sequence in practice. Unfortunately, in the absence of the precomposition “hint,” an explicit locale won’t help here (at least as far as I know). If we spell ijsselmeer with an ordinary i + j, capitalizeFirstLetter will produce the wrong result even if we explicitly indicate nl as the locale:

capitalizeFirstLetter('ijsselmeer', 'nl'); // "Ijsselmeer" :(

(I’m not entirely sure whether there are some such cases where the behavior comes down to ICU data availability — perhaps someone else could say.)

If the point of the transformation is to display textual content in a web browser, though, you have an entirely different option available that will likely be your best bet: leveraging features of the web platform’s other core languages, HTML and CSS. Armed with HTML’s lang=... and CSS’s text-transform:..., you’ve got a (pseudo-)declarative solution that leaves extra room for the user agent to be “smart.” A JS API needs to have predictable outcomes across all browsers (generally) and isn’t free to experiment with heuristics. The user-agent itself is obligated only to its user, though, and heuristic solutions are fair game when the output is for a human being. If we tell it “this text is Dutch, but please display it capitalized,” the particular outcome might now vary between browsers, but it’s likely going to be the best each of them could do. Let’s see:

<!DOCTYPE html>
<dl>
<dt>Untransformed
<dd>ijsselmeer
<dt>Capitalized with CSS and <code>lang=en</code>
<dd lang="en" style="text-transform: capitalize">ijsselmeer
<dt>Capitalized with CSS and <code>lang=nl</code>
<dd lang="nl" style="text-transform: capitalize">ijsselmeer

In Chromium at the time of writing, both the English and Dutch lines come out as Ijsselmeer — so it does no better than JS. But try it in current Firefox! The element that we told the browser contains Dutch will be correctly rendered as IJsselmeer there.

This solution is purpose-specific (it’s not gonna help you in Node, anyway) but it was silly of me not to draw attention to it previously given some folks might not realize they’re googling the wrong question. Thanks @paul23 for clarifying more about the nature of the IJ digraph in practice and prompting further investigation!

---

As of January 2021, all major engines have implemented the Unicode property character class feature, but depending on your target support range you may not be able to use it safely yet. The last browser to introduce support was Firefox (78; June 30, 2020). You can check for support of this feature with the Kangax compat table. Babel can be used to compile RegExp literals with property references to equivalent patterns without them, but be aware that the resulting code can sometimes be enormous. You probably would not want to do this unless you’re certain the tradeoff is justified for your use case.

---

In all likelihood, people asking this question will not be concerned with Deseret capitalization or internationalization. But it’s good to be aware of these issues because there’s a good chance you’ll encounter them eventually even if they aren’t concerns presently. They’re not “edge” cases, or rather, they’re not by-definition edge cases — there’s a whole country where most people speak Turkish, anyway, and conflating code units with codepoints is a fairly common source of bugs (especially with regard to emoji). Both strings and language are pretty complicated!

---

* The code units of UTF-16 / UCS2 are also Unicode code points in the sense that e.g. U+D800 is technically a code point, but that’s not what it “means” here ... sort of ... though it gets pretty fuzzy. What the surrogates definitely are not, though, is USVs (Unicode scalar values).

** Though if a surrogate code unit is “orphaned” — i.e., not part of a logical pair — you could still get surrogates here, too.

*** maybe. I haven’t tested it. Unless you have determined capitalization is a meaningful bottleneck, I probably wouldn’t sweat it — choose whatever you believe is most clear and readable.

**** such a function might wish to test both the first and second code units instead of just the first, since it’s possible that the first unit is an orphaned surrogate. For example the input "\uD800x" would capitalize the X as-is, which may or may not be expected.

Manvel

I had been wondering for a while why toUpperCase didn't really do much for some languages... but didn't quite care enough to find out. Glad I finally did, this was a very interesting read! – Aerostatic

This doesn't seem to work with digraphs such as "IJ" in dutch. Using the latest version the example here is incorrectly capitalized to "Ijsselmeer" (The regex version). The code I used was: capitalizeFirstLetter('ijssel', 'nl-NL') - That's a correct localization string right? – Inness

"ij" as U+69, U+6A would capitalize as "Ij", yes - "ij" (U+133, a single code point) is what capitalizes to "IJ" (U+132). Locale-awareness here only extends as far as the case mapping rules Unicode defines that sometimes vary per language, as in Turkish; knowing whether "ij" (U+69, U+6A) should be interpreted as ij (U+133) is outside its scope and requires at minimum a dictionary for that language. – Manvel

@Inness You wrote ij (2 letters) instead of ij (1 letter). – Wallop

In netherlands dutch IJ is considered 2 letters, which are just capitalized at the same time (in contrary to the belgian version). – Inness

That’s very interesting paul23 — love that sort of concept-of-what-counts-as-a-letter-can-itself-differ twist! Though this Netherlands Dutch vs Belgian distinction seems like a pretty good illustration of how situations can arise where additional information sources & ICU data may be needed, it also suggests my use of it as an example in the answer (especially with the name of a location in the Netherlands) might be more confusing than helpful. Do you think it should be changed? – Manvel

@paul23, I went ahead and updated it. If you see this, lemme know if that’s better! – Manvel

Great answer! Quite embarrassing how many broken answers exist here. I would recommend adding a small "tl;dr" section at the very top. – Phew

Answer 7

For another case I need it to capitalize the first letter and lowercase the rest. The following cases made me change this function:

//es5
function capitalize(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
capitalize("alfredo")  // => "Alfredo"
capitalize("Alejandro")// => "Alejandro
capitalize("ALBERTO")  // => "Alberto"
capitalize("ArMaNdO")  // => "Armando"

// es6 using destructuring 
const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();

Bipartite

Answer 8

If you're already (or considering) using Lodash, the solution is easy:

_.upperFirst('fred');
// => 'Fred'

_.upperFirst('FRED');
// => 'FRED'

_.capitalize('fred') //=> 'Fred'

See their documentation: https://lodash.com/docs#capitalize

_.camelCase('Foo Bar'); //=> 'fooBar'

https://lodash.com/docs/4.15.0#camelCase

_.lowerFirst('Fred');
// => 'fred'

_.lowerFirst('FRED');
// => 'fRED'

_.snakeCase('Foo Bar');
// => 'foo_bar'

Vanilla JavaScript for first upper case:

function upperCaseFirst(str){
    return str.charAt(0).toUpperCase() + str.substring(1);
}

Involution

Answer 9

This is the 2018 ECMAScript 6+ Solution:

const str = 'the Eiffel Tower';
const newStr = `${str[0].toUpperCase()}${str.slice(1)}`;
console.log('Original String:', str); // the Eiffel Tower
console.log('New String:', newStr); // The Eiffel Tower

Pohai

Answer 10

There is a very simple way to implement it by replace. For ECMAScript 6:

'foo'.replace(/^./, str => str.toUpperCase())

Result:

'Foo'

Turcotte

Using /^[a-z]/i will be better than using . as the prior one will not try to replace any character other than alphabets – Scooter

@CodeManiac there are so many languages and letters except [a-z] – Singley

Answer 11

CSS only

If the transformation is needed only for displaying on a web page:

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

• Despite being called "::first-letter", it applies to the first character, i.e. in case of string %a, this selector would apply to % and as such a would not be capitalized.
• In IE9+ or IE5.5+ it's supported in legacy notation with only one colon (:first-letter).

ES2015 one-liner

const capitalizeFirstChar = str => str.charAt(0).toUpperCase() + str.substring(1);

Remarks

• In the benchmark I performed, there was no significant difference between string.charAt(0) and string[0]. Note however, that string[0] would be undefined for an empty string, so the function would have to be rewritten to use "string && string[0]", which is way too verbose, compared to the alternative.
• string.substring(1) is faster than string.slice(1).

Benchmark between substring() and slice()

The difference is rather minuscule nowadays (run the test yourself):

• 21,580,613.15 ops/s ±1.6% for substring(),
• 21,096,394.34 ops/s ±1.8% (2.24% slower) for slice().

Amphibole

You actually don't want to use the plus sign (+) as a concatenation method in ES6. You'll want to use template literals: eslint.org/docs/rules/prefer-template – Pohai

@SterlingBourne why are you quoting an eslint rule like it should be followed by everyone? – Nuss

Answer 12

Capitalize the first letter of all words in a string:

function ucFirstAllWords( str )
{
    var pieces = str.split(" ");
    for ( var i = 0; i < pieces.length; i++ )
    {
        var j = pieces[i].charAt(0).toUpperCase();
        pieces[i] = j + pieces[i].substr(1);
    }
    return pieces.join(" ");
}

Fluoro

Re-read question: I want to capitalize the first character of a string, but not change the case of any of the other letters. – Dori

I know I did. I'd add one thing, in case the entire string starts capitalized: pieces[i] = j + pieces[i].substr(1).toLowerCase(); – Neolith

Another solution to this case: function capitaliseFirstLetters(s) { return s.split(" ").map(function(w) { return w.charAt(0).toUpperCase() + w.substr(1) }).join(" ") } Can be a nice one-liner if it's not put into a function. – Volatilize

Would be better to first lowercase the whole string – Embay

Other than this function not answering the question, it's actually also overcomplicated. s => s.split(' ').map(x => x[0].toUpperCase() + x.slice(1)).join(' ') – Schmidt

Answer 13

It's always better to handle these kinds of stuff using CSS first, in general, if you can solve something using CSS, go for that first, then try JavaScript to solve your problems, so in this case try using :first-letter in CSS and apply text-transform:capitalize;

So try creating a class for that, so you can use it globally, for example: .first-letter-uppercase and add something like below in your CSS:

.first-letter-uppercase:first-letter {
    text-transform:capitalize;
}

Also the alternative option is JavaScript, so the best gonna be something like this:

function capitalizeTxt(txt) {
  return txt.charAt(0).toUpperCase() + txt.slice(1); //or if you want lowercase the rest txt.slice(1).toLowerCase();
}

and call it like:

capitalizeTxt('this is a test'); // return 'This is a test'
capitalizeTxt('the Eiffel Tower'); // return 'The Eiffel Tower'
capitalizeTxt('/index.html');  // return '/index.html'
capitalizeTxt('alireza');  // return 'Alireza'
capitalizeTxt('dezfoolian');  // return 'Dezfoolian'

If you want to reuse it over and over, it's better attach it to javascript native String, so something like below:

String.prototype.capitalizeTxt = String.prototype.capitalizeTxt || function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

and call it as below:

'this is a test'.capitalizeTxt(); // return 'This is a test'
'the Eiffel Tower'.capitalizeTxt(); // return 'The Eiffel Tower'
'/index.html'.capitalizeTxt();  // return '/index.html'
'alireza'.capitalizeTxt();  // return 'Alireza'

Tellford

Answer 14

String.prototype.capitalize = function(allWords) {
   return (allWords) ? // If all words
      this.split(' ').map(word => word.capitalize()).join(' ') : // Break down the phrase to words and then recursive
                                                                 // calls until capitalizing all words
      this.charAt(0).toUpperCase() + this.slice(1); // If allWords is undefined, capitalize only the first word,
                                                    // meaning the first character of the whole string
}

And then:

 "capitalize just the first word".capitalize(); ==> "Capitalize just the first word"
 "capitalize all words".capitalize(true); ==> "Capitalize All Words"

Update November 2016 (ES6), just for fun:

const capitalize = (string = '') => [...string].map(    // Convert to array with each item is a char of
                                                        // string by using spread operator (...)
    (char, index) => index ? char : char.toUpperCase()  // Index true means not equal 0, so (!index) is
                                                        // the first character which is capitalized by
                                                        // the `toUpperCase()` method
 ).join('')                                             // Return back to string

then capitalize("hello") // Hello

Tenne

I think this is a poor solution for 2 reasons: Modifying the prototype of a primitive is a bad idea. If the spec changes and they decide to pick 'capitalize' as a new proto property name, you're breaking core language functionality. Also, The method name chosen is poor. At first glance, I would think this will capitalize the entire string. Using a more descriptive name such as PHP's ucFirst or something similar might be a better idea. – Eakins

The other ES6 answer is simpler: const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();. – Gutenberg

@Eakins in css, capitalizing of first letter of a word is call 'capitalize', and if you want to capitalize all characters u use 'uppercase', hence it's not really bad choice. – Cigarillo

Answer 15

SHORTEST 3 solutions, 1 and 2 handle cases when s string is "", null and undefined:

 s&&s[0].toUpperCase()+s.slice(1)        // 32 char

 s&&s.replace(/./,s[0].toUpperCase())    // 36 char - using regexp

'foo'.replace(/./,x=>x.toUpperCase())    // 31 char - direct on string, ES6

let s='foo bar';

console.log( s&&s[0].toUpperCase()+s.slice(1) );

console.log( s&&s.replace(/./,s[0].toUpperCase()) );

console.log( 'foo bar'.replace(/./,x=>x.toUpperCase()) );

Exobiology

Answer 16

Here is a function called ucfirst()(short for "upper case first letter"):

function ucfirst(str) {
    var firstLetter = str.substr(0, 1);
    return firstLetter.toUpperCase() + str.substr(1);
}

You can capitalise a string by calling ucfirst("some string") -- for example,

ucfirst("this is a test") --> "This is a test"

It works by splitting the string into two pieces. On the first line it pulls out firstLetter and then on the second line it capitalises firstLetter by calling firstLetter.toUpperCase() and joins it with the rest of the string, which is found by calling str.substr(1).

You might think this would fail for an empty string, and indeed in a language like C you would have to cater for this. However in JavaScript, when you take a substring of an empty string, you just get an empty string back.

Ori

@999: where does it say that substr() is deprecated? It's not, even now, three years later, let alone back in 2009 when you made this comment. – Gutenberg

substr() may not be marked as deprecated by any popular ECMAScript implementation (I doubt it's not going to disappear anytime soon), but it's not part of the ECMAScript spec. The 3rd edition of the spec mentions it in the non-normative annex in order to "suggests uniform semantics for such properties without making the properties or their semantics part of this standard". – Bloodcurdling

Having 3 methods that do the same thing (substring, substr and slice) is too many, IMO. I always use slice because it supports negative indexes, it doesn't have the confusing arg-swapping behavior and its API is similar to slice in other languages. – Bloodcurdling

Answer 17

We could get the first character with one of my favorite RegExp, looks like a cute smiley: /^./

String.prototype.capitalize = function () {
  return this.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

And for all coffee-junkies:

String::capitalize = ->
  @replace /^./, (match) ->
    match.toUpperCase()

...and for all guys who think that there's a better way of doing this, without extending native prototypes:

var capitalize = function (input) {
  return input.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

Moisture

Dear lordy there's a million answers to this question! Your solution looks even nicer in es6. 'Answer'.replace(/^./, v => v.toLowerCase()) – Citral

What are you referring to by "coffee"? "CoffeeScript"? – Bangup

Answer 18

If you're ok with capitalizing the first letter of every word, and your usecase is in HTML, you can use the following CSS:

<style type="text/css">
    p.capitalize {text-transform:capitalize;}
</style>
<p class="capitalize">This is some text.</p>

This is from CSS text-transform Property (at W3Schools).

Dunford

@Simon It's not stated that the string is necessarily going to be output as part of a HTML document - CSS is only going to be of use if it is. – Bullfinch

Adam, true, but I'd guess that over 95% of the Javascript out there is used with HTML & CSS. Unfortunately, the "capitalize" statement actually capitalizes every word, so you'd still need JS to capitalize only the first letter of the string. – Spier

@Simon, the text-transform capitalizes first letter of every word and this is what Robert wants – Docilla

Incorrect, Dinesh. He said the first character of the string. – Spier

What's funny is that Ryan didn't help answer @Robert Willis's question. but he answered mine. – Parietal

This answer, despite having a ridiculous number of upvotes, is just wrong, as it will capitalize the first letter of every word. @Ryan, you'll earn a Disciplined badge if you delete it. Please do so. – Gutenberg

To capitalise the first letter you could use the first letter selector: p.capitalize :first-letter {text-transform: capitalize;} Apparently Safari struggles with this, but haven't looked into it. – Cacology

The question specifies 'JavaScript'. A CSS solution doesn't provide this. – Cracow

It's true that the question asks for JavaScript and only the first letter of the string, but the asker of the question isn't the only one here looking for an answer. It has obviously turned out to be a good answer for many people, resulting in upvotes. I certainly don't think it should be deleted. – Sclaff

It's now javascript: $('.capitalize').css('text-transform', 'capitalize') – Sclaff

The question specifies JavaScript. Anybody looking for a CSS based solution may not find this answer because they won't be searching for it. As it is, this is a useful bit of information that users might stumble across if they happen to be looking for a JavaScript solution. Regardless, this will capitalise all words, not the first letter of the string. Ryan has a good answer to a different question. He should delete this answer, create the right question, and then answer it there, if he wants to benefit the community. The points loss wouldn't be very conducive to doing this, I'll admit. :-) – Cracow

So just wrap the tag around the single world you want capitalized – Baran

This capitalizes every word's first letter. – Affliction

This answer is bad since it is not JavaScript. – Rinaldo

@Jasny-ArnoldDaniels: You're correct, but this edit changes the meaning of the post too much. Better post it as a separate answer. Or rather downvote this and upvote that existing answer – Jospeh

Answer 19

Use:

var str = "ruby java";

console.log(str.charAt(0).toUpperCase() + str.substring(1));

It will output "Ruby java" to the console.

Tangelatangelo

Answer 20

If you use Underscore.js or Lodash, the underscore.string library provides string extensions, including capitalize:

_.capitalize(string) Converts first letter of the string to uppercase.

Example:

_.capitalize("foo bar") == "Foo bar"

Janiuszck

Since, version 3.0.0, Lo-Dash has this string method available by default. Just like described in this answer: _.capitalize("foo") === "Foo". – Meuser

Also there are usefull underscore.js function called humanize. It converts an underscored, camelized, or dasherized string into a humanized one. Also removes beginning and ending whitespace, and removes the postfix '_id'. – Cumbrous

From version 4*, Lodash also lowercase() every other letter, be careful! – Convenient

Answer 21

If you are wanting to reformat all-caps text, you might want to modify the other examples as such:

function capitalize (text) {
    return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
}

This will ensure that the following text is changed:

TEST => Test
This Is A TeST => This is a test

Verenaverene

Probably worth noting that this will also convert things like acronyms to lowercase, so maybe not the best idea in most cases – Verenaverene

btw, this will break uppercasing acronyms so be careful y'all <3 – Verenaverene

Answer 22

var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1);

Kindig

Answer 23

String.prototype.capitalize = function(){
    return this.replace(/(^|\s)([a-z])/g, 
                        function(m, p1, p2) {
                            return p1 + p2.toUpperCase();
                        });
};

Usage:

capitalizedString = someString.capitalize();

This is a text string => This Is A Text String

Proudman

+1, this is what I was really looking for. There is a minor bug though, it ought to be return.this.toLocaleLowerCase().replace( ... – Rigel

+1, I found this page looking for a javascript version of phps ucfirst, which I suspect is how most people find it. – Terpsichore

@DanDascalescu I found this useful, so +1 utilitarianism, and -1 anal-retentiveness. He included an example, so its function is clear. – Attenuation

String.prototype.capitalize = function(){ return this.replace( /(^|\s)[a-z]/g , function(m){ return m.toUpperCase(); }); }; I refactor your code a bit, you need only a first match. – Proust

Firstly, it does something else than OP asked for, secondly regex is an inefficient overkill in this case, lastly don't modify prototypes of something you don't own – Amphibole

Answer 24

function capitalize(s) {
    // returns the first letter capitalized + the string from index 1 and out aka. the rest of the string
    return s[0].toUpperCase() + s.substr(1);
}


// examples
capitalize('this is a test');
=> 'This is a test'

capitalize('the Eiffel Tower');
=> 'The Eiffel Tower'

capitalize('/index.html');
=> '/index.html'

Diandre

How is this any better than the 2009 answer?. – Gutenberg

It isn't @DanDascalescu. I suppose you could argue that substr/substring is a bit more semantic as opposed to slice, but that's just a matter of preference. I did however include examples with the strings provided in the question, which is a nice touch not present in the '09 example. I honestly think it boils down to 15 year old me wanting karma on StackOverflow ;) – Diandre

Answer 25

A Solution That Works For All Unicode Characters

57 81 different answers for this question, some off-topic, and yet none of them raise the important issue that none of the solutions listed will work with Asian characters, emoji's, and other high Unicode-point-value characters in many browsers. Here is a solution that will:

const consistantCapitalizeFirstLetter = "\uD852\uDF62".length === 1 ?
    function(S) {
        "use-strict"; // Hooray! The browser uses UTF-32!
        return S.charAt(0).toUpperCase() + S.substring(1);
    } : function(S) {
        "use-strict";
        // The browser is using UCS16 to store UTF-16
        var code = S.charCodeAt(0)|0;
        return (
          code >= 0xD800 && code <= 0xDBFF ? // Detect surrogate pair
            S.slice(0,2).toUpperCase() + S.substring(2) :
            S.charAt(0).toUpperCase() + S.substring(1)
        );
    };
const prettyCapitalizeFirstLetter = "\uD852\uDF62".length === 1 ?
    function(S) {
        "use-strict"; // Hooray! The browser uses UTF-32!
        return S.charAt(0).toLocaleUpperCase() + S.substring(1);
    } : function(S) {
        "use-strict";
        // The browser is using UCS16 to store UTF-16
        var code = S.charCodeAt(0)|0;
        return (
          code >= 0xD800 && code <= 0xDBFF ? // Detect surrogate pair
            S.slice(0,2).toLocaleUpperCase() + S.substring(2) :
            S.charAt(0).toLocaleUpperCase() + S.substring(1)
        );
    };

Do note that the above solution tries to account for UTF-32. However, the specification officially states that browsers are required to do everything in UTF-16 mapped into UCS2. Nevertheless, if we all come together, do our part, and start preparing for UTF32, then there is a chance that the TC39 may allow browsers to start using UTF-32 (like how Python uses 24-bits for each character of the string). This must seem silly to an English speaker: no one who uses only latin-1 has ever had to deal with Mojibake because Latin-I is supported by all character encodings. But, users in other countries (such as China, Japan, Indonesia, etc.) are not so fortunate. They constantly struggle with encoding problems not just from the webpage, but also from the JavaScript: many Chinese/Japanese characters are treated as two letters by JavaScript and thus may be broken apart in the middle, resulting in � and � (two question-marks that make no sense to the end user). If we could start getting ready for UTF-32, then the TC39 might just allow browsers do what Python did many years ago which had made Python very popular for working with high Unicode characters: using UTF-32.

consistantCapitalizeFirstLetter works correctly in Internet Explorer 3+ (when the const is changed to var). prettyCapitalizeFirstLetter requires Internet Explorer 5.5+ (see the top of page 250 of this document). However, these fact are more of just jokes because it is very likely that the rest of the code on your webpage will not even work in Internet Explorer 8 - because of all the DOM and JScript bugs and lack of features in these older browsers. Further, no one uses Internet Explorer 3 or Internet Explorer 5.5 any more.

Decaffeinate

Glad to see an answer that brings up this concern. However, I don’t believe there are any browsers where String.fromCodePoint(65536).length === 1 will be true. That ES strings expose their UTF16ishness isn’t implementation-specific behavior — it’s a well-defined part of the spec, and it can’t be fixed due to backwards compat. – Manvel

Re: the new final notes, WHATWG and co have landed on UTF-8 as the sole ‘correct’ encoding for all text interchange on the platform. This isn’t gonna change (and it’s a good thing). The ES issue is distinct from that, though — it’s about ES having a string abstraction where the code units of the internal ‘utf-16 + lone surrogates’ encoding (it’s neither UTF-16 nor UCS2 quite) ‘break through’ when using indexed address, String.prototype.length, etc. (1/2) – Manvel

The body responsible for ES is TC39 rather than W3C (or WHATWG, etc), and they cannot change the existing functionality because it would break the web. Instead, they can introduce new functionality that behaves correctly. They already have begun doing this — the 'u' flag on RegExp, String.prototype.codePointAt, and String.prototype[@@iterator] provide safer alternatives to the old APIs. (2/2) – Manvel

Wow—almost 5 years old and lots of edits. It looks really useful, but this code has clearly never been run. S or string? – Ignatia

While you're possibly correct that no other answers (at the time of your posting) dealt with these characters correctly, the question also didn't ask for this. – Wahhabi

Answer 26

yourString.replace(/\w/, c => c.toUpperCase())

I found this arrow function easiest. Replace matches the first letter character (\w) of your string and converts it to uppercase. Nothing fancier is necessary.

Castleman

This should be the accepted answer, instead it's almost the last since SO keeps awarding outdated questions. Btw, it's better using /./ for two reason: /\w/ will skip all the previous not letter characters (so @@abc will become @@Abc), and then it doesn't work with not-latin characters – Contravallation

This is a good answer! There is a small caveat: \w Matches any alphanumeric character from the basic Latin alphabet, including the underscore. so replacing a word like _boss will yield _boss (from developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…) – Epistrophe

@ȘerbanGhiță The same would apply to 1boss. If matching an underscore is not the desired behaviour, use [A-Za-z-0-9] or [^\W_]. – Corrida

Answer 27

var str = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);

Junta

Answer 28

yourString.replace(/^[a-z]/, function(m){ return m.toUpperCase() });

EDIT: Regexp is overkill for this, prefer the simpler : str.charAt(0).toUpperCase() + str.substring(1)

Afterbrain

Even though this has quite some votes, this is by far the slowest solution posted here. I've put together a little speedtest with the most popular answers from this post, here: forwebonly.com/… – Skateboard

Regexp is overkill for this, prefer the simpler : str.charAt(0).toUpperCase() + str.slice(1) – Afterbrain

Often times, if you want to solve your problem with regex, you end up with two problems. – Amphibole

Answer 29

Check out this solution:

var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // Returns Master

Yevette

Save some keystrokes ;) stringVal.replace(/^./, stringVal[0].toUpperCase()); – Especially

Regex shouldn't be used where not necessary. It's greatly inefficient and it doesn't make code any more concise either. Moreover, stringVal[0] would be undefined for empty stringVal, and as such attempt to access property .toUpperCase() would throw an error. – Amphibole

Answer 30

There are already so many good answers, but you can also use a simple CSS transform:

text-transform: capitalize;

div.text-capitalize {
  text-transform: capitalize;
}

<h2>text-transform: capitalize:</h2>
<div class="text-capitalize">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Disaffect

this will uppercase all words in a string – Restrained

no, it only capitalize ist letter of each word in a sentence w3schools.com/cssref/tryit.asp?filename=trycss_text-transform – Disaffect

i specifically mentioned that besides javascript you can use css too...not everyone is probably looking for an interview question answer. – Disaffect

This duplicates other prior answers. – Seymourseys

Answer 31

with arrow function

let fLCapital = s => s.replace(/./, c => c.toUpperCase())
fLCapital('this is a test') // "This is a test"

with arrow function, another solution

let fLCapital = s => s = s.charAt(0).toUpperCase() + s.slice(1);
fLCapital('this is a test') // "This is a test"

with array and map()

let namesCapital = names => names.map(name => name.replace(/./, c => c.toUpperCase()))
namesCapital(['james', 'robert', 'mary']) // ["James", "Robert", "Mary"]

Aimeeaimil

Answer 32

Only because this is really a one-liner I will include this answer. It's an ES6-based interpolated string one-liner.

let setStringName = 'the Eiffel Tower';
setStringName = `${setStringName[0].toUpperCase()}${setStringName.substring(1)}`;

Jany

Answer 33

The ucfirst function works if you do it like this.

function ucfirst(str) {
    var firstLetter = str.slice(0,1);
    return firstLetter.toUpperCase() + str.substring(1);
}

Thanks J-P for the aclaration.

Peanut

nice name for the function! It's name is identical to the PHP equivalent. There is actually an entire library of PHP functions written in JS; it's called PHP.js and to be found on http://phpjs.org – Languor

One liner: string[0].toUpperCase() + string.substring(1) – Equivalency

What is "aclaration"? – Bangup

Answer 34

Here's my version. I think it's easy to understand and elegant too.

var str = "foo bar baz";

// Capitalize
str.split(' ')
    .map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
    .join(' ')
// Returns "Foo Bar Baz"

// Capitalize the first letter
str.charAt(0).toUpperCase() + str.slice(1)
// Returns "Foo bar baz"

Docent

Answer 35

You can do it in one line like this

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

Sheerlegs

This answer was already given in 2009. – Gutenberg

Answer 36

A functional approach

const capitalize = ([s, ...tring]) =>
  [s.toUpperCase(), ...tring]
    .join('');

Then you could

const titleCase = str => 
  str
    .split(' ')
    .map(capitalize)
    .join(' ')

Sitzmark

Don't forget toLowerCase() the remainder of the word. Passing a word in all caps to this current solution would keep it in all caps. – Premise

Answer 37

CoffeeScript

ucfirst = (str) -> str.charAt(0).toUpperCase() + str.slice(1)

As a String prototype method:

String::capitalize = -> @charAt(0).toUpperCase() + @slice(1)

Nuggar

Stupid question but how would you add this to the String prototype in coffeescript? – Branny

Answer 38

In CoffeeScript, add to the prototype for a string:

String::capitalize = ->
  @substr(0, 1).toUpperCase() + @substr(1)

Usage would be:

"woobie".capitalize()

Which yields:

"Woobie"

Branny

This is a JavaScript question. – Tantara

@Tantara - And this is a coffeescript answer. – Branny

I think what Cobby is trying to say that some idiots are trying to accomplish every simple JavaScript task using stupid libraries while the very same solution in vanilla is as simple as String.prototype.capitalize = function () { return this.substring(0,1).toUpperCase() + this.substring(1).toLowerrCase() } – Legitimize

Coffeescript is a preprocessor language, not a library... A library for this would be silly – Quadrinomial

Let the record state: CoffeeScript is a little language that compiles into JavaScript. Furthermore, The golden rule of CoffeeScript is: "It's just JavaScript." I think if someone truly understands those two sentences, you'll understand why I included this answer. Hopefully that cleared things up for everyone. Source: coffeescript.org – Branny

Answer 39

Posting an edit of @salim's answer to include locale letter transformation.

var str = "test string";
str = str.substring(0,1).toLocaleUpperCase() + str.substring(1);

Cogswell

I would go str = str.charAt(0).toLocaleUpperCase() + str.substr(1);, though, to make this shorter – Capua

There is currently no answer by a user with the name "salim" (user names can change at any time). What answer does it refer to? – Bangup

Answer 40

The first character of every string is capitalized.

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

console.log(capitalize("john")); //John
console.log(capitalize("BRAVO")); //Bravo
console.log(capitalize("BLAne")); //Blane

Squirm

first char of word to upper case = word[0].toUpperCase() skipe first char and lower rest = slice(1).toLowerCase(); – Squirm

This changes other characters too. The question asks "How do I make the first letter of a string uppercase, but not change the case of any of the other letters?" – Seymourseys

you can ignore the other extra step of code : +word.slice(1).toLowerCase(); – Squirm

Answer 41

Here are a few suggestions to make a universal function that can capitalize only the first letter, or the first letter of each word, including words separated by a dash or other separators (like some first names in French).

By default, the function capitalizes only the first letter of the whole string, and leave the rest untouched.

Parameters:

• lc: true to force lower-casing the rest of the word(s)
• all: true to capitalize each word

1. No regex version

function capitalize( str, lc, all ) {
    if( all ) {
        return str.split( " " )
            .map( word => capitalize( word, lc ) )
            .join( " " )
            .split( "-" )
            .map( word => capitalize( word, false ) )
            .join( "-" );
    } else {
        return lc
            ? str.charAt( 0 ).toUpperCase() + str.slice( 1 ).toLowerCase()
            : str.charAt( 0 ).toUpperCase() + str.slice( 1 );
    }
}

2. Using regex

function capitalize( str, lc, all ) {
    const replacer =
        lc ? ( m, p1, p2 ) => p1.toUpperCase() + p2.toLowerCase()
           : ( m, p1, p2 ) => p1.toUpperCase() + p2;
    if( all ) {
        return str.split( /(\s|-|')/ )
                  .map( s => s.replace( /^([A-Za-zÀ-ÖØ-öø-ÿ])(.*)$/, replacer ) )
                  .join( "" )
    } else {
        return str.replace( /^([A-Za-zÀ-ÖØ-öø-ÿ])(.*)$/, replacer )
    }
}

3. Alternative with rest parameters

function capitalizeWord( [first, ...rest], lc ) {
    return first.toUpperCase() + ( lc ? rest.join("").toLowerCase() : rest.join("") );
}
function capitalize( str, lc, all ) {
    return all ? str.split( /(\s|-|')/ )
                    .map( s => capitalizeWord( s, lc ) )
                    .join( "" )
               : capitalizeWord( str, lc );
}

Examples

capitalize( "saiNT-jEAn d'anGÉly", false, false )
// returns "SaiNT-jEAn d'anGÉly"

capitalize( "saiNT-jEAn d'anGÉly", false, true )
// returns "SaiNT-JEAn D'AnGÉly"

capitalize( "saiNT-jEAn d'anGÉly", true, false )
// returns "Saint-jean d'angély"

capitalize( "saiNT-jEAn d'anGÉly", true, true )
// returns "Saint-Jean D'Angély"

Fucus

jQuery to update user's input capitalized: $('.on-change-capitalize').change(function(){ $(this).val($(this).val().capitalize(true, true)); }); btw, it also works with utf8 chars ;) thanks! – Solarize

Answer 42

function capitalize(string) {
    return string.replace(/^./, Function.call.bind("".toUpperCase));
}

Sabayon

this capitalizes the whole string – Scandinavia

@Scandinavia no, the regex character ^ asserts position at start. then . matches a single character – Roorback

Answer 43

Using the JS replace string method & a regular expression w/ a word boundary seems simple.

Capitalize the first words' first character: "the eiffel tower" --> "The eiffel tower"

str.replace(/\b\w/, v => v.toUpperCase())

Capitalize all words' first character: "the eiffel tower" --> "The Eiffel Tower"

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

Duhamel

Answer 44

// Uppercase first letter
function ucfirst(field) {
    field.value = field.value.substr(0, 1).toUpperCase() + field.value.substr(1);
}

Usage:

<input type="text" onKeyup="ucfirst(this)" />

Incitement

There was no reference to an input field or the requirement of an event to handle this. Aside from that, field.value could be shortened with a variable for readability. – Fixed

Answer 45

If you go with one of the regex answers, remember they will only work with ASCII characters. All your unicode letters will not be uppercased. The XRegExp library and its unicode plugins solve this problem if you want to stick with regexps. So something like this would work:

String.prototype.capitalize = function () {
    return this.replace(XRegExp("^\\p{L}"), function ($0) { return $0.toUpperCase(); })
}

Considering that it still doesn't cover all possibilities (combined characters, see http://www.regular-expressions.info/unicode.html) it seems easier to just use the .charAt(0).toUpperCase() approach.

Sheepherder

`String.prototype.capitalize = String.prototype.capitalize || function() { var first = this.substring(0,1); return first.toUpperCase() + this.substring(1); }; – Flu

Answer 46

One possible solution:

function ConvertFirstCharacterToUpperCase(text) {
    return text.substr(0, 1).toUpperCase() + text.substr(1);    
}

Use this:

 alert(ConvertFirstCharacterToUpperCase("this is string"));

Here is working JS Fiddle

Revel

Answer 47

Or you could use Sugar.js capitalize()

Example:

'hello'.capitalize()           -> 'Hello'
'hello kitty'.capitalize()     -> 'Hello kitty'
'hello kitty'.capitalize(true) -> 'Hello Kitty'

Janiuszck

Answer 48

This solution might be new and probably the simplest.

function firstUpperCase(input)
{
    return input[0].toUpperCase() + input.substr(1);
}

console.log(firstUpperCase("capitalize first letter"));

Quesnay

Answer 49

s[0].toUpperCase``+s.substr`1`

let s = 'hello there'

console.log( s[0].toUpperCase``+s.substr`1` )

Emitter

Answer 50

/*
 * As terse as possible, assuming you're using ES version 6+
 */
var upLetter1=s=>s.replace(/./,m=>m.toUpperCase());

console.log(upLetter1("the quick brown fox jumped over the lazy dog."));
//\\ The quick brown fox jumped over the lazy dog. //\\

Artema

Answer 51

Unicode and Locale Aware

Using current language features:

function capitalize([firstLetter, ...rest]) {
  return [firstLetter.toLocaleUpperCase(), ...rest].join('');
}

console.log(capitalize('foo bar'));
console.log(capitalize('ѷҥӕ'))
console.log(capitalize('🎁❄💊🎸⭐'));

// Title Case
console.log(
  'Title Case:',
  'foo bar'
    .split(/\s+/)
    .map(capitalize)
    .join(' '),
);

We accept a destructured string as the only parameter [firstLetter, ...rest], assigning the first character to the variable firstLetter and get an array for the rest of the characters (...rest) bound to the rest variable. E.g. for the string lorem ipsum this should look like:

capitalize('lorem ipsum');
// firstLetter = 'l'
// rest = ['o', 'r', 'e', 'm', ' ', 'i', 'p', 's', 'u', 'm'];

Now all we need to do is prepend an uppercased version of the first letter firstLetter.toLocaleUpperCase() to the rest array—using the spread operator—and join the resulting array into a string using .join('')

Hemolysis

can you explain your function capitalize. – Seljuk

Why destructuring works with Unicode but string[0] doesn't? – Armendariz

@Armendariz string[0] works in UTF-16 which has at most 2 bytes (16 bits) per string item, while many unicode characters have 4 bytes (32 bits). Destructuring is ‘unicode’ aware, meaning, it understands which codepoints are 4 bytes and which are 1 or 2 bytes, string[0] isn’t, so it will take at most 2 bytes at a time, which sometimes is only half the character. – Ondrej

Answer 52

Capitalize and Uncapitalize first Char of a String.

Functions to include:

/** First Character uppercase */
function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

/** First Character lowercase */
function uncapitalize(str) {
    return str.charAt(0).toLowerCase() + str.slice(1);
}

Example1 "First Character uppercase":

alert(capitalize("hello world"));

Result: Hello world

Example 2 "First Character lowercase":

alert(uncapitalize("Hello World, today is sunny"));

Result: hello World, today is sunny

Richburg

Answer 53

Using prototypes

String.prototype.capitalize = function () {
    return this.charAt(0) + this.slice(1).toLowerCase();
  }

or Using functions

function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

Girovard

Answer 54

There are multiple ways of doing this try some below

var lower = 'the Eiffel Tower';
var upper = lower.charAt(0).toUpperCase() + lower.substr(1);

And if you are comfortable with regular expressions, you do things this way:

var upper = lower.replace(/^\w/, function (chr) {
  return chr.toUpperCase();
});

And you can even take it one step further by using more modern syntax:

const upper = lower.replace(/^\w/, c => c.toUpperCase());

Also this will take care of negative scenarios as mentioned in example like words starting with special characters like !@#$%^&*()}{{[];':",.<>/? .

Wernick

Answer 55

Using an arrow function:

const capitalize = string => string[0].toUpperCase() + string.slice(1)

Lib

Answer 56

Elegant

const capitalize = ([firstChar, ...rest]) => `${firstChar.toUpperCase()}${rest.join('')}`;

Serosa

Doesn't look very elegant to me, not very readable. Typical example of overcomplicating something simple. – Guienne

Answer 57

You can use regex approach :

str.replace(/(^|\s)\S/g, letter => letter.toUpperCase());

Bunion

Answer 58

try this one line fix

text[0].toUpperCase() + text.substring(1)

function getCapitalizedText(text) {
  return text[0].toUpperCase() + text.substring(1)
}

we can call this "getCapitalizedText" any number of times by passing the text.

Ellamaeellan

Answer 59

var capitalizeMe = "string not starting with capital"

Capitalize with substr

var capitalized = capitalizeMe.substr(0, 1).toUpperCase() + capitalizeMe.substr(1);

Arredondo

Answer 60

This code will also handle extra spaces at the start & end of the string.

let val = '  this is test ';
val = val.trim();
val = val.charAt(0).toUpperCase() + val.slice(1);
console.log("Value => ", val);

Milson

Answer 61

For just capitalizing the first letter and make the rest of the string lower case:

function capitalize(str) {
     var splittedEnter = str.split(" ");
     var capitalized;
     var capitalizedResult;
     for (var i = 0 ; i < splittedEnter.length ; i++){
         capitalized = splittedEnter[i].charAt(0).toUpperCase();
         splittedEnter[i] = capitalized + splittedEnter[i].substr(1).toLowerCase();
    }
    return splittedEnter.join(" ");
}

capitalize("tHiS wiLL be alL CapiTaLiZED.");

The result will be:

This Will Be All Capitalized.

Dishwasher

Answer 62

I would just use a regular expression:

myString = '    the quick green alligator...';
myString.trim().replace(/^\w/, (c) => c.toUpperCase());

Jamiejamieson

Answer 63

Just install and load Lodash:

import { capitalize } from "lodash";

capitalize('test') // Test

Allseed

Answer 64

The simplest solution is:

let yourSentence = 'it needs first letter upper case';

yourSentence.charAt(0).toUpperCase() + yourSentence.substr(1);

or:

yourSentence.charAt(0).toUpperCase() + yourSentence.slice(1);

or:

yourSentence.substr(0, 1).toUpperCase() + yourSentence.substr(1);

Elda

Yes it's simple. That's probably why it was already posted multiple times a decade before your answer was. – Verdellverderer

Answer 65

Simple ES6 syntax with template string

 const capitalize = (str) => {
   return `${str[0].toUpperCase()}${str.slice(1)}`
   // return str[0].toUpperCase() + str.slice(1)   // without template string
 }
 
 console.log(capitalize("this is a test"));
 console.log(capitalize("the Eiffel Tower"));
 console.log(capitalize("/index.html"));

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

Becker

Answer 66

I don't see any other answers mentioning Intl.Segmenter, which "enables locale-sensitive text segmentation" -- meaning you can reliably identify the first character when dealing with characters composed from multiple code points. The big caveat with relying on it in browsers is the lack of Firefox support, see https://caniuse.com/mdn-javascript_builtins_intl_segmenter_segment & https://bugzilla.mozilla.org/show_bug.cgi?id=1423593.

See How can I get a character array from a string? for more details.

There are many excellent answers here already, so I'm solely going to focus on splitting by character.

Using the following test string, which is composed of 9 characters / 15 code points / 20 code units:

const str = '🐅-👨‍👩‍👧-நி-깍-葛󠄀';

Naive, split

str.split('');
// (20) ["\ud83d", '\udc05', '-', '\ud83d', '\udc68', '‍', '\ud83d', '\udc69', '‍', '\ud83d', '\udc67', '-', 'ந', 'ி', '-', '깍', '-', '葛', '\udb40', '\udd00']

Slightly better, spread operator

[...str]
// (15) ["🐅", '-', '👨', '‍', '👩', '‍', '👧', '-', 'ந', 'ி', '-', '깍', '-', '葛', '󠄀']

Intl.Segmenter (in supported browsers)

[...new Intl.Segmenter().segment(str)].map((g) => g.segment);
// (9) ["🐅", '-', '👨‍👩‍👧', '-', 'நி', '-', '깍', '-', '葛󠄀']

graphemer 1.4.0

import Graphemer from 'graphemer';
const splitter = new Graphemer();
splitter.splitGraphemes(str);
// (9) ["🐅", '-', '👨‍👩‍👧', '-', 'நி', '-', '깍', '-', '葛󠄀']

lodash 4.17.10

import _ from 'lodash';
_.split(str, '');
// (11) ["🐅", '-', '👨‍👩‍👧', '-', 'ந', 'ி', '-', '깍', '-', '葛', '󠄀']

fabric.js v6.0.0-beta10 graphemeSplit (internal function)

import { graphemeSplit } from './fabric_graphemeSplit';
graphemeSplit(str);
// (15) ["🐅", '-', '👨', '‍', '👩', '‍', '👧', '-', 'ந', 'ி', '-', '깍', '-', '葛', '󠄀']

@formatjs Intl.Segmenter 11.4.2 polyfill

await import('@formatjs/intl-segmenter/polyfill-force');
[...new Intl.Segmenter().segment(str)].map((g) => g.segment);
// (9) ["🐅", '-', '👨‍👩‍👧', '-', 'நி', '-', '깍', '-', '葛󠄀']

Editable comparison: https://stackblitz.com/edit/stackblitz-typescript-lrag9u?devToolsHeight=90&file=index.ts

Effloresce

Answer 67

Any type of string can convert --

YoUrStRiNg → Yourstring

var str = yOuRsTrING.toLowerCase(); // Output: yourstring
str.charAt(0).toUpperCase() + str.slice(1); // Output: Y + ourstring = Yourstring

Correspondent

Answer 68

I use something along these lines in my development environment, especially when working with APIs like HTTP:

Suppose you have an HTTP header in which you'd like to capitalize every initial letter in its name and add the hyphen between its constituent words. You may achieve something like that using this basic and simple routine:

'access control allow origin'
    .replace(/\b\w/g, function (match) {
        return match.toUpperCase();
    })
    .split(' ')
    .join('-');

// Output: 'Access-Control-Allow-Origin'

It is not maybe the most elegant and attractive function definition out there, but it certainly gets the job done.

Goodwill

Answer 69

Like it:

function capitalize(string,a) {
    var tempstr = string.toLowerCase();
    if (a == false || a == undefined)
        return tempstr.replace(tempstr[0], tempstr[0].toUpperCase());
    else {
        return tempstr.split(" ").map(function (i) { return i[0].toUpperCase() + i.substring(1) }).join(" ");
    }
}


capitalize('stack overflow yeah!',true)); //Stack Overflow Yeah!

capitalize('stack stack stack stack overflow yeah!'));//Stack overflow yeah!

https://jsfiddle.net/dgmLgv7b/

Guesswork

Answer 70

A one-liner:

'string'.replace(/(^[a-z])/,function (p) { return p.toUpperCase(); } )

Indue

Oneliners? Sure, extremely inefficient? No, regex is not cheap. – Ledesma

I mean... this is like taking a 10 line task and removing the line breaks, then calling it a 1 liner as if that's kind kind of feature – Wahhabi

Answer 71

Firstly, I just wanted to clear up what capitalize means in this context. "This String Is Capitalized" Reliable source

You can see from the example provided this is not what the OP is looking for. What it should say is "How do I make the first letter of a string uppercase" (Not capitalize string)

function ucfirst (str) {
    return typeof str != "undefined" ? (str += '', str[0].toUpperCase() + str.substr(1)) : '';
}

Explained

typeof str != "undefined" // Is str set
? // true
str += '' // Turns the string variable into a string
str[0].toUpperCase() // Get the first character and make it upper case
+ // Add
str.substr(1) // String starting from the index 1 (starts at 0)
: // false
''; // Returns an empty string

This will work with any argument or no argument at all.

undefined         === ""
""                === ""
"my string"       === "My string"
null              === "Null"
undefined         === "";
false             === "False"
0                 === "0"
true              === "True"
[]                === ""
[true,0,"",false] === "True,0,,false"

Mealworm

Answer 72

function capitalizeEachWord(str) {
    return str.replace(/\w\S*/g, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
}

document.write(capitalizeEachWord('foo BAR God bAD'));

Corked

Answer 73

A small improvement - every word in titlecase.

String.prototype.toTitleCase = function(){
    return this.replace(/\b(\w+)/g, function(m,p){ return p[0].toUpperCase() + p.substr(1).toLowerCase() });
}

var s = 'heLLo, wOrLD!';
console.log(s.toTitleCase()); // Hello, World!

Delmardelmer

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". – Coonskin

A small improvement - doing exactly what the question asked me not to do 🫠‎ – Verdellverderer

Answer 74

One liner ("inputString can be set to any string"):

inputString.replace(/.{1}/, inputString.charAt(0).toUpperCase())

Bowls

charAt accepts an optional numeric index as an argument, not a pattern. Using RegEx here seems unnecessarily expensive. Also the correct version of this has already been posted here. – Donia

@Donia there was typo and there are many way to solve the same thing – Bowls

reason it worked is because the charAt argument was 'sanitized'. It went from /.{1}/ -> NaN -> 0. What I meant by "correct", was the version you just edited your answer to. If you follow the link I provided, another user already posted your approach in 2015, meaning your answer doesn't add anything. – Donia

@Donia i recently got in to posting solution or alternate solution to a problem recently, earlier i used to ask mostly. Much respect from fellow programmer . – Bowls

Answer 75

This one is simple

const upper = lower.replace(/^\w/, c => c.toUpperCase());

Db

Answer 76

1. We'll be using CSS to achieve this. It can also be set from an external CSS.

<span text-transform="capitalize ">The first letter of each word becomes an upper case</span>

2. Using vanilla JavaScript, we could do:

let string = "test case"

string = string[0].toUpperCase() + string.substring(1)
//return "Test case"

Explanation</b/>:

string[0].toUpperCase(): converts the first letter in the string to upper case

string.substring(1): deletes the first letter in the string and returns the remaining characters

text-transform="capitalize": make the first letter of each word in this tag upper case. If you use 'uppercase' as the value of text-transform, every letter in the tag will be a capital letter

Nereidanereids

Answer 77

You can do str.replace(str[0], str[0].toUpperCase())

Check this example:

let str = "hello WORLD"
let newStr = str.replace(str[0], str[0].toUpperCase())

console.log("str: ", str)
console.log("newStr: ", newStr)

Ladin

Answer 78

This code might work good in some cases:

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

console.log(capitalizeFirstLetter('foo')); // Foo
// But if we had like this it won't work well
console.log(capitalizeFirstLetter('fOo')); // FOo

But if you really want to make sure, that there is only the first letter capitalized and the rest is built out of lowercase letters, you could adjust the code like this:

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

Boutique

The question specifically says "but not change the case of any of the other letters" – Verdellverderer

Answer 79

Okay, so I am new to JavaScript. I wasn't able to get the above to work for me. So I started putting it together myself. Here's my idea (about the same, different and working syntax):

String name = request.getParameter("name");
name = name.toUpperCase().charAt(0) + name.substring(1);
out.println(name);

Here I get the variable from a form (it also works manually):

String name = "i am a Smartypants...";
name = name.toUpperCase().charAt(0) + name.substring(1);
out.println(name);

Output: "I am a Smartypants...";

Gauzy

Note: this answer is written for Java, not JavaScript. – Wish

Answer 80

The function takes two arguments:

start - the start index;
length - the length of substring to capitalise

String.prototype.subUpper = function () {
    var result = this.toString();
    var start = 0;
    var length = 1;
    if (arguments.length > 0) {
        start = arguments[0];
        if (start < this.length) {
            if (arguments.length > 1) {
                length = arguments[1];
            }
            if (start + length > this.length) {
                length = this.length - start;
            }
            var startRest = start + length;
            var prefix = start > 0 ? this.substr(0, start) : String.empty;
            var sub = this.substr(start, length);
            var suffix = this.substr(startRest, this.length - startRest);
            result = prefix + sub.toUpperCase() + suffix;
        }
    }
    return result;
};

Double

Why have such a huge solution when others are so much more elegant and much simpler? – Farci

Answer 81

I have been trying to do same (that is; capitalize the first letter in a string while it is being typed) using jQuery. I searched all through the web for the answer but couldn't find it. However I was able to get a work around using the on() function in jQuery like so:

$("#FirstNameField").on("keydown",function(e){
    var str = $("#FirstNameField").val();
    if(str.substring()===str.substring(0,1)){
        $("#FirstNameField").val(str.substring(0,1).toUpperCase());
    } 
});

This function actually capitalizes the first letter while the data entrant is typing continuously.

Wolf

Answer 82

The currently voted answer is right, but it doesn't trim or check the length of the string before capitalising the first character.

String.prototype.ucfirst = function(notrim) {
    s = notrim ? this : this.replace(/(?:(?:^|\n)\s+|\s+(?:$|\n))/g,'').replace(/\s+/g,' ');
    return s.length > 0 ? s.charAt(0).toUpperCase() + s.slice(1) : s;
}

Set the notrim argument to prevent trimming the string first:

'pizza'.ucfirst()         => 'Pizza'
'   pizza'.ucfirst()      => 'Pizza'
'   pizza'.ucfirst(true)  => '   pizza'

Melanymelaphyre

What do you mean by "The currently voted answer"? Do you mean "The currently highest voted answer"? – Bangup

@PeterMortensen: sorry, I answered this in 2015 and guess I was referring to the accepted answer but I can't remember. Feel free to change/correct. – Melanymelaphyre

Answer 83

This does the same action:

var newStr = string.slice(0,1).toUpperCase() + string.slice(1);

Fachan

Won't this result in "the Eiffel Tower" being turned into "The eiffel tower"? The original question involved not changing the case of the other letters. – Necropsy

Yes @AndrewMyers i made the edit which wouldn't change the case of the other letters – Fachan

Answer 84

If there's Lodash in your project, use upperFirst.

Glop

Answer 85

Capitalize First Word: Shortest

text.replace(/(^.)/, m => m.toUpperCase())

---

Capitalize Each Word: Shortest

text.replace(/(^\w|\s\w)/g, m => m.toUpperCase());

If you want to make sure the rest is in lowercase:

text.replace(/(^\w|\s\w)(\S*)/g, (_,m1,m2) => m1.toUpperCase()+m2.toLowerCase())

Pancreatin

This is a much more correct implementation vs other ones. For example if you want: evence coppéeplaats to Evence Coppéeplaats, your method works correctly, while others will have issues with the é. – Belittle

Answer 86

Capitalizing the first letter with validation

function capitalizeFirstLetter(str) {
    return (str && typeof str === 'string') ? (str.charAt(0).toUpperCase() + str.slice(1)) : "";
}

Testing

console.log(capitalizeFirstLetter(0)); // Output: ""
console.log(capitalizeFirstLetter(null)); // Output: ""
console.log(capitalizeFirstLetter("test")); // Output: "Test"
console.log(capitalizeFirstLetter({})); // Output: ""

Nauseous

Answer 87

I know this is an old question with a lot of answers but here's my quick snippet.

const capitalize = (str) => str?.split('').map( (e, i) => i === 0 ? e.toUpperCase() : e ).join('')

Ir

this is a better way as boundary conditions are also handled – Approve

Answer 88

Solution for Cannot read property 'charAt' of undefined

const capitalize = (string) => {
        return string ? string.charAt(0).toUpperCase() + string.slice(1) : "";
    }

console.log(capitalize("i am a programmer")); // I am a programmer

Ogg

a better way to prevent this and also make this more typeSafe is (string="") => string.charAt(0) because it allows you to always work with a string and will simple return empty string if nothing is supplyed. – Panada

Answer 89

To capitalize all words:

Typescript version:

const capitalize = (str:string)=>{
        // Split into words
        const words = str.split(" ");
        const resWords:string[] = [];
        // loop over words, slicing and capitalizing the first letter of each word.
        words.forEach(word => {
            const letterOne = word.slice(0, 1);
            const upperCaseLetterOne = letterOne.toUpperCase();
            const otherLetters = word.slice(1);
            const newWord = upperCaseLetterOne+otherLetters
            resWords.push(newWord)
        });
        // Turn it back into a human-readable string.
        return resWords.join(" ");
    }

Javascript version:

const capitalize = (str)=>{
        // Split into words
        const words = str.split(" ");
        const resWords = [];
        // loop over words, slicing and capitalizing the first letter of each word.
        words.forEach(word => {
            const letterOne = word.slice(0, 1);
            const upperCaseLetterOne = letterOne.toUpperCase();
            const otherLetters = word.slice(1);
            const newWord = upperCaseLetterOne+otherLetters
            resWords.push(newWord)
        });
        // Turn it back into a human-readable string.
        return resWords.join(" ");
    }

You can use it like this:

const bookTitle = "my awesome book";
const displayBookTitle = capitalize(bookTitle);
console.log(displayBookTitle) // My Awesome Book

To capitalize the first word:

Typescript:

const capitalize = (str:string)=>{
    return str.charAt(0).toUpperCase() + str.slice(1)
}

Javascript:

const capitalize = (str)=>{
    return str.charAt(0).toUpperCase()+str.slice(1);
}

You use it like so:

console.log(capitalize("foo bar")) // Foo bar

Beyrouth

Note, for some languages, this may not work. I wrote it to work in English, so you may have to adapt it for it to work in the language you're targeting. – Beyrouth

Answer 90

Including this answer because this is a one line answer using spread operator. Not as perfomant as other answers. But still does the job without modifiying the original string.

const [firstLetter, ...rest] = "hello world";
console.log(`${firstLetter.toUpperCase()}${rest.join('')}`);

Mild

Your solution still needs two expressions. For this to be a true one liner it would have to be something like console.log(([firstLetter, ...rest] = "hello world", `${firstLetter.toUpperCase()}${rest.join('')}`)). – Mccusker

Answer 91

This is what I use religiously:

function capitalizeMe(str, force){
    str = force ? str.toLowerCase() : str;
    return str.replace(/(\b)([a-zA-Z])/g,
        function(firstLetter){
            return firstLetter.toUpperCase();
        });
}


var firstName = capitalizeMe($firstName.val());

Draghound

This looks gross in my opinion - in fact I think adding a flag to any method to get it to perform different behavior is a bit daft. Consider var s = capitalizeMe('some RANDOM string', true); - a reader of your code isn't going to know what the true means without reading the function implementation. If you want your function to do something else, write it in another function instead of overloading the method with magic flags or parameters. – Carroty

Answer 92

function cap(input) {
    return input.replace(/[\.\r\n\t\:\;\?\!]\W*(\w)/g, function(match, capture) {
         // For other sentences in the text
         return match.toUpperCase();
    }).replace(/^\W*\w/, function(match, capture) {
        // For the first sentence in the text
        return match.toUpperCase();
    });;
}

var a = "hi, dear user. it is a simple test. see you later!\r\nbye";
console.log(cap(a));
// Output: Hi, dear user. It is a simple test. See you later!
// Bye

Hudnut

The question was: "How do I make the first letter of a string uppercase in JavaScript?" This seems to be capitalise every sentence. – Bangup

Answer 93

Another way using RamdaJs, the functional programming way:

firstCapital(str){
    const fn = p => R.toUpper(R.head(p)) + R.tail(p);
    return fn(str);
}

With multiple words in a string:

firstCapitalAllWords(str){
    const fn = p => R.toUpper(R.head(p)) + R.tail(p);
    return R.map(fn,R.split(' ', str)).join(' ');
}

Grochow

Answer 94

Just because you can, doesn't mean you should, however. It requires ECMAScript 6 as the code uses array destructuring.

const capitalizeFirstLetter = s => {
  const type = typeof s;
  if (type !== "string") {
    throw new Error(`Expected string, instead received ${type}`);
  }

  const [firstChar, ...remainingChars] = s;

  return [firstChar.toUpperCase(), ...remainingChars].join("");
};

Byers

Answer 95

The method will take a value and then split it to have an array of string.

const firstLetterToUpperCase = value => {
 return value.replace(
    value.split("")["0"], // Split stirng and get the first letter 
    value
        .split("")
        ["0"].toString()
        .toUpperCase() // Split string and get the first letter to replace it with an uppercase value
  );
};

Tyrrell

Could you add details about what the above code does? That would be really useful, and would increase the quality of your answer. – Fireplace

Answer 96

EDIT : I like this one :

yourString.replace(/(^[a-z])/i, (str, firstLetter) => firstLetter.toUpperCase())

Coolidge

This would fail the last test in the question. – Seymourseys

Answer 97

Note Important Information UTF-8 uses variable length encoding that means it supports up to 4 bytes for a single char the codePointAt(1) >> 7 indicates thats prv codePoint is a Char also codePointAt() >> 7 if codePointAt(1) >> 11 it indicates we got a 2 bytes utf 8 message so 16 and 21 are the indicators for 4 bytes utf-8 chars. So codePointAt(4) >> 21 === 0 indicates its a 4 byte utf-8 char. All this checks are costly so the most performant efficient method on all string length is

const upperCaseFirstLatterUtf8 = (str) => {
    const b = str.substr(0,4).normalize();
    return b[0].toUpperCase() + b.substr(1) + str.substr(4);    
}
upperCaseFirstLatterUtf8('\u006E\u0303me!')

That's the only correct method to handle utf-8 chars as explained they got variable length of up to 4 bit this uses normalize which is relative expensive but the only performant way to archive our goal even checking all the charCodes is not faster. Then we return the remaining chars and the uppercase first letter as single utf-32 char so it is always 4 bit and shifts by 7

Panada

Answer 98

charAt and toUpperCase: You can use the charAt method to get the first character of the string and then use toUpperCase to convert it to uppercase. After that, you can concatenate the rest of the string.

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

let inputString = "hello world";
let result = capitalizeFirstLetter(inputString);
console.log(result); // Output: Hello world

charAt and slice: Another way is to use slice to get the substring from the second character to the end of the string and then concatenate it with the uppercase first character.

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

let inputString = "hello world";
let result = capitalizeFirstLetter(inputString);
console.log(result); // Output: Hello world

Autoionization

Answer 99

You can achieve this in JavaScript by splitting the string into an array of words, capitalizing the first letter of the first word, and then joining the words back into a string. Here's how you can do it:

function capitalizeFirstLetter(str) {

  str = str.charAt(0).toUpperCase() + str.slice(1);

  // Join the words back into a string
  return str;
}

// Example usage:

console.log(capitalizeFirstLetter("this is a test")); // Output: "This is a test"
console.log(capitalizeFirstLetter("the Eiffel Tower")); // Output: "The Eiffel Tower"
console.log(capitalizeFirstLetter("/index.html")); // Output: "/index.html"

This function capitalizeFirstLetter takes a string as input, splits it into an array of words using the space character as a delimiter, capitalizes the first letter of the first word, and then joins the words back into a string with spaces.

Devon

Why would you split into words if that has no relevance? s.charAt(0).toUpperCase() + s.slice(1) works the same with no need for the extra CPU cycles and memory that goes into creating an array that's basically not used. – Whiplash

Answer 100

Here is the nice and cleaner version;

var str = '';
return str.replace(new RegExp('^'+str[0]+''), str[0].toUpperCase());

Results:

this is a test --> This is a test

Homer

Answer 101

I prefer to use a solution oriented to a functional programming (mapping an array):

Array.from(str).map((letter, i) => i === 0 ? letter.toUpperCase() : letter ).join('');

Gause

Answer 102

If you need to have all words starting with a capital letter, you can use the following function:

const capitalLetters = (s) => {
    return s.trim().split(" ").map(i => i[0].toUpperCase() + i.substr(1)).reduce((ac, i) => `${ac} ${i}`);
}

Example:

console.log(`result: ${capitalLetters("this is a test")}`)
// Result: "This Is A Test"

Diarchy

This is not what the question asks. – Seymourseys

Answer 103

You should do like that:

let text = "lower case";
text = text.charAt(0).toUpperCase() + text.substring(1, text.length);

Dedicate

Answer 104

// capitalize only first character of multi words
var cfc = (str,fs=' ',es=' ')=>{ //str = string, fs = first separator, es = end separator
    var str = str.split(fs);
    var str2=[];
    str.find((item)=>{
        const a = item.charAt(0).toUpperCase()+item.slice(1).toLowerCase();
        str2.push(a);
    });
    return str2.join(es);
}
const str = "stRing1#sTRIng2#strING3";
console.log(cfc(str,'#','@')); // output: String1@String2@String3
console.log(cfc(str,'#',' ')); // output: String1 String2 String3

Pericranium

Answer 105

Here is the easy way.

function capitalize(word) {
return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();
}

You create a function that takes a word string as input. You use the Substring class to give you the first character of the string. You then use the toUpperCase() to capitalize that character.

You then concatenate the rest of the string to that with the string minus the first character to which you apply the toLowerCase() method.

Typically you would use two values to the subString class. The place where you want the splicing of the string to start and where you want it to end, but if you provide only one value to the subString class in will splice from that value to the end of the string (Like what we have in the second case.) and remember the subString class is zero indexed.

Eula

Answer 106

In the loop :

function capitalizeFirstIterative(array) {
    let res = [];
    for (let index = 0; index < array.length; index++) {
        const element = array[index];
        res.push(element.charAt(0).toUpperCase() + element.slice(1));
    }
    return res;
}

Recursively :

function capitalizeFirst (array) {
  if (array.length === 1) {
    return [array[0][0].toUpperCase() + array[0].substr(1)];
  }
  const res = capitalizeFirst(array.slice(0, -1));
  const string = array.slice(array.length - 1)[0][0].toUpperCase() + array.slice(array.length-1)[0].substr(1);
  res.push(string);
  return res;
}

Thenceforward