Hoe maak ik de eerste letter van een tekenreeks in hoofdletters in JavaScript?

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

Antwoord 2, autoriteit 23%

Hier is een meer objectgeoriënteerde benadering:

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

Je zou de functie als volgt aanroepen:

"hello, world!".capitalize();

Met als verwachte output:

"Hello, world!"

Antwoord 3, autoriteit 11%

In CSS:

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

Antwoord 4, autoriteit 6%

Hier is een verkorte versie van het populaire antwoord dat de eerste letter krijgt door de string als een array te behandelen:

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

Bijwerken

Volgens onderstaande opmerkingen werkt dit niet in IE 7 of lager.

Update 2:

Om undefined te vermijden voor lege strings (zie @njzk2’s opmerking hieronder), kunt u controleren op een lege tekenreeks:

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

ES-versie

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

Antwoord 5, autoriteit 4%

Als je geïnteresseerd bent in de prestaties van een paar verschillende methoden die zijn gepost:

Hier zijn de snelste methoden gebaseerd op deze jsperf-test (in volgorde van snelst naar langzaamst).

Zoals je kunt zien, zijn de eerste twee methoden in essentie vergelijkbaar in termen van prestaties, terwijl het wijzigen van de String.prototype verreweg de langzaamste is in termen van prestaties.

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

Antwoord 6, autoriteit 2%

Voor een ander geval heb ik het nodig om de eerste letter in hoofdletters te zetten en de rest in kleine letters. In de volgende gevallen heb ik deze functie moeten wijzigen:

//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();

Antwoord 7, autoriteit 2%

Ik zag geen enkele vermelding in de bestaande antwoorden van problemen met betrekking tot astrale vlakcodepunten of internationalisering. ‘Hoofdletters’ betekent niet hetzelfde in elke taal die een bepaald script gebruikt.

Aanvankelijk zag ik geen antwoorden die betrekking hadden op problemen met codepunten op het astrale vlak. Er is een, maar het is een beetje begraven (zoals deze zal zijn, denk ik!)

De meeste voorgestelde functies zien er als volgt uit:

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

Sommige letters in hoofdletters vallen echter buiten de BMP (basis meertalig vlak, codepunten U+0 tot U+FFFF). Neem bijvoorbeeld deze Deseret-tekst:

capitalizeFirstLetter("????????????"); // "????????????"

Het eerste teken hier krijgt geen hoofdletter omdat de array-geïndexeerde eigenschappen van strings geen toegang hebben tot ‘tekens’ of codepunten*. Ze hebben toegang tot UTF-16-code-eenheden. Dit geldt ook bij slicen de indexwaarden wijzen naar code-eenheden.

Het is zo dat UTF-16-code-eenheden 1:1 zijn met USV-codepunten binnen twee bereiken, U+0 tot U+D7FF en U+E000 tot U+FFFF inclusief. De meeste hoofdletters vallen in die twee bereiken, maar niet allemaal.

Vanaf ES2015 werd het wat makkelijker om hiermee om te gaan. String.prototype[@@iterator] levert strings op die overeenkomen met codepunten**. We kunnen dit bijvoorbeeld doen:

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

Voor langere strings is dit waarschijnlijk niet erg efficiënt*** we hoeven de rest niet echt te herhalen. We zouden String.prototype.codePointAt kunnen gebruiken om bij die eerste (mogelijke) letter te komen, maar we moeten nog bepalen waar het segment moet beginnen. Een manier om te voorkomen dat de rest wordt herhaald, is door te testen of het eerste codepunt buiten de BMP valt; als dat niet het geval is, begint de slice bij 1, en als dat zo is, begint de slice bij 2.

function capitalizeFirstLetter(str) {
  const firstCP = str.codePointAt(0);
  const index = firstCP > 0xFFFF ? 2 : 1;
  return String.fromCodePoint(firstCP).toUpperCase() + str.slice(index);
}
capitalizeFirstLetter("????????????") // "????????????"

U kunt bitsgewijze wiskunde gebruiken in plaats van > 0xFFFF daar, maar het is waarschijnlijk gemakkelijker om op deze manier te begrijpen en beide zouden hetzelfde bereiken.

We kunnen dit ook laten werken in ES5 en lager door die logica indien nodig wat verder te brengen. Er zijn geen intrinsieke methoden in ES5 om met codepunten te werken, dus we moeten handmatig testen of de eerste code-eenheid een surrogaat**** is:

function capitalizeFirstLetter(str) {
  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("????????????") // "????????????"

In het begin noemde ik ook internationaliseringsoverwegingen. Sommige hiervan zijn erg moeilijk te verklaren omdat ze niet alleen kennis vereisen van welke taal er wordt gebruikt, maar ook specifieke kennis van de woorden in de taal. Bijvoorbeeld, de Ierse digraph “mb” hoofdletters als "mB" aan het begin van een woord. Een ander voorbeeld, het Duitse eszett, begint nooit een woord (afaik), maar helpt nog steeds het probleem te illustreren. De kleine letter eszett ( ? ) begint met een hoofdletter naar SS, maar SS kan een kleine letter zijn naar ? of ss u hebt buitenschoolse kennis van de Duitse taal nodig om te weten wat correct is!

Het bekendste voorbeeld van dit soort problemen is waarschijnlijk Turks. In het Turks Latijn is de hoofdletter van i I, terwijl de kleine vorm van I is? Het zijn twee verschillende letters. Gelukkig hebben we een manier om hier rekening mee te houden:

function capitalizeFirstLetter([ first, ...rest ], locale) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}
capitalizeFirstLetter("italy", "en") // "Italy"
capitalizeFirstLetter("italya", "tr") // "Italya"

In een browser wordt de meest geprefereerde taaltag van de gebruiker aangegeven door navigator.language, een lijst in volgorde van voorkeur is te vinden op navigator.languages, en de taal van een bepaald DOM-element kan (meestal) worden verkregen met Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HERE in meertalige documenten.

In agenten die Unicode-eigenschaptekenklassen ondersteunen in RegExp, die in ES2018 zijn geïntroduceerd, kunnen we dingen verder opschonen door direct uit te drukken in welke tekens we geïnteresseerd zijn:

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

Dit kan een beetje worden aangepast om ook het hoofdlettergebruik van meerdere woorden in een tekenreeks met redelijk goede nauwkeurigheid te kunnen verwerken. De karaktereigenschap CWU of Changes_When_Uppercased komt overeen met alle codepunten die, nou ja , wijzigen wanneer hoofdletters. We kunnen dit uitproberen met digraph-tekens met een titel, zoals de Nederlandse ? bijvoorbeeld:

capitalizeFirstLetter('?sselmeer'); // "?sselmeer"

Vanaf januari 2021 hebben alle grote engines de eigenschap Unicode-eigenschaptekenklasse geïmplementeerd, maar afhankelijk van uw doelondersteuningsbereik kunt u deze mogelijk nog niet veilig gebruiken. De laatste browser die ondersteuning introduceerde, was Firefox (78; 30 juni 2020). U kunt controleren of deze functie wordt ondersteund met de Kangax-vergelijkingstabel. Babel kan worden gebruikt om RegExp-literalen te compileren met verwijzingen naar eigenschappen naar equivalente patronen zonder deze, maar houd er rekening mee dat de resulterende code soms enorm kan zijn. U zou dit waarschijnlijk niet willen doen, tenzij u zeker weet dat de afweging gerechtvaardigd is voor uw gebruik.

Naar alle waarschijnlijkheid zullen mensen die deze vraag stellen zich niet bezighouden met Deseret-kapitalisatie of internationalisering. Maar het is goed om op de hoogte te zijn van deze problemen, want de kans is groot dat u ze uiteindelijk tegenkomt, zelfs als ze op dit moment geen zorgen zijn. Het zijn geen ‘edge’ gevallen, of liever, het zijn geen per definitie randgevallen er is sowieso een heel land waar de meeste mensen Turks spreken, en het samenvoegen van code-eenheden met codepunten is een vrij veel voorkomende bron van bugs (vooral met betrekking tot emoji). Zowel strings als taal zijn behoorlijk ingewikkeld!

* De code-eenheden van UTF-16 / UCS2 zijn ook Unicode-codepunten in die zin dat b.v. U+D800 is technisch gezien een codepunt, maar dat is niet wat het hier ‘betekent’ … een beetje … hoewel het behoorlijk vaag wordt. Wat de surrogaten echter zeker niet zijn, zijn USV’s (Unicode scalaire waarden).

** Maar als een surrogaatcode-eenheid wees is d.w.z. geen deel uitmaakt van een logisch paar , kunt u hier ook nog surrogaten krijgen.

*** misschien. Ik heb het niet getest. Tenzij je hebt vastgesteld dat hoofdlettergebruik een belangrijk knelpunt is, zou ik het waarschijnlijk niet erg vinden – kies wat je denkt dat het meest duidelijk en leesbaar is.

**** zo’n functie wil misschien zowel de eerste als de tweede code-eenheid testen in plaats van alleen de eerste, aangezien het mogelijk is dat de eerste eenheid een verweesde surrogaat is. Bijvoorbeeld de invoer "\uD800x" zou de X een hoofdletter geven zoals hij is, wat al dan niet verwacht kan worden.

Antwoord 8

Dit is de ECMAScript 6+-oplossing van 2018:

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

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

_.lowerFirst('Fred');
// => 'fred'
_.lowerFirst('FRED');
// => 'fRED'
_.snakeCase('Foo Bar');
// => 'foo_bar'

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

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

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

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

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
}

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

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

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

'Foo'

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

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

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

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

var str = "ruby java";
console.log(str.charAt(0).toUpperCase() + str.substring(1));

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

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

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

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

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

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

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

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

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

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'

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

'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'

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'

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

capitalizedString = someString.capitalize();

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

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

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

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

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

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