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

Hoe maak ik de eerste letter van een tekenreeks in hoofdletters, maar verander ik de hoofdletters niet van een van de andere letters?

Bijvoorbeeld:

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

Antwoord 1, autoriteit 100%

De basisoplossing is:

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

voer hier de afbeeldingsbeschrijving in


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

Antwoord 9

Als je al (of overweegt) Lodash te gebruiken, is de oplossing eenvoudig:

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

Zie hun documentatie: 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'

Vanille JavaScript voor eerste hoofdletter:

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

Antwoord 10

Maak de eerste letter van alle woorden in een tekenreeks een hoofdletter:

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

Antwoord 11

Alleen CSS

Als de transformatie alleen nodig is voor weergave op een webpagina:

p::first-letter {
  text-transform: uppercase;
}
  • Ondanks de naam "::first-letter", het is van toepassing op het eerste teken, dwz in het geval van een tekenreeks %a, zou deze selector van toepassing zijn op % en als zodanig zou a niet met een hoofdletter worden geschreven.
  • In IE9+ of IE5.5+ wordt het ondersteund in de oude notatie met slechts één dubbele punt (:first-letter).

ES2015 oneliner

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

Opmerkingen

  • In de benchmark die ik heb uitgevoerd, was er geen significant verschil tussen string.charAt(0) en string[0]. Merk echter op dat string[0] undefined zou zijn voor een lege string, dus de functie zou herschreven moeten worden om "string && string[0]", wat veel te uitgebreid is, vergeleken met het alternatief.
  • string.substring(1) is sneller dan string.slice(1).

Benchmark tussen substring() en slice()

Het verschil is tegenwoordig nogal minuscuul (voer de test zelf uit):

  • 21.580.613.15 ops/s 1,6% voor substring(),
  • 21.096.394,34 ops/s 1,8% (2,24% langzamer) voor slice().

Vergelijking van oplossingen


Antwoord 12

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
}

En dan:

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

Update november 2016 (ES6), gewoon voor plezier:

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

vervolgens capitalize("hello") // Hello


Antwoord 13

Er is een heel eenvoudige manier om het te implementeren door vervangen. Voor ECMAScript 6:

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

Resultaat:

'Foo'

Antwoord 14

We zouden het eerste karakter kunnen krijgen met een van mijn favoriete RegExp, ziet eruit als een schattige smiley: /^./

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

En voor alle koffiejunkies:

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

…en voor alle mensen die denken dat er een betere manier is om dit te doen, zonder native prototypes uit te breiden:

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

Antwoord 15

KORTSTE 3 oplossingen, 1 en 2 behandelen gevallen wanneer s string "", null en 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()) );

Antwoord 16

Gebruik:

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

Antwoord 17

Hier is een functie genaamd ucfirst()(afkorting van "hoofdletters eerste letter"):

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

Je kunt een tekenreeks met een hoofdletter schrijven door ucfirst("some string") aan te roepen — bijvoorbeeld

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

Het werkt door de snaar in twee stukken te splitsen. Op de eerste regel haalt het firstLetter uit en vervolgens op de tweede regel zet het firstLetter in hoofdletters door firstLetter.toUpperCase() aan te roepen en voegt het samen met de rest van de string, die gevonden wordt door str.substr(1) aan te roepen.

Je zou kunnen denken dat dit zou mislukken voor een lege string, en inderdaad in een taal als C zou je hier rekening mee moeten houden. Als je in JavaScript echter een subtekenreeks van een lege tekenreeks neemt, krijg je gewoon een lege tekenreeks terug.


Antwoord 18

Als u Underscore.js of Lodash, de underscore.string bibliotheek biedt tekenreeksextensies , inclusief hoofdletters:

_.capitalize(string) Converteert de eerste letter van de string naar
hoofdletters.

Voorbeeld:

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

Antwoord 19

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

Antwoord 20

Het lijkt makkelijker te zijn in CSS:

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

Dit is van CSS text-transform-eigenschap (op W3Schools).


Antwoord 21

Als u tekst in hoofdletters opnieuw wilt opmaken, wilt u misschien de andere voorbeelden als zodanig wijzigen:

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

Dit zorgt ervoor dat de volgende tekst wordt gewijzigd:

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

Antwoord 22

Het is altijd beter om dit soort dingen af ​​te handelen met CSS eerst, in het algemeen, als je iets kunt oplossen met CSS, ga daar dan eerst voor en probeer dan JavaScript om je problemen op te lossen, dus in dit geval probeer :first-letter in CSS te gebruiken en pas text-transform:capitalize;

toe

Probeer daar dus een klasse voor te maken, zodat u deze globaal kunt gebruiken, bijvoorbeeld: .first-letter-uppercase en voeg iets als hieronder toe aan uw CSS:

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

Ook de alternatieve optie is JavaScript, dus het beste is zoiets als dit:

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

en noem het als:

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'

Als je het steeds opnieuw wilt gebruiken, kun je het beter koppelen aan javascript native String, dus zoiets als hieronder:

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

en noem het zoals hieronder:

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

Antwoord 23

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'

Antwoord 24

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

Gebruik:

capitalizedString = someString.capitalize();

Dit is een tekststring => Dit is een tekststring


Antwoord 25

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

Antwoord 26

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

Ik vond deze pijlfunctie het gemakkelijkst. Vervangen komt overeen met de eerste letter ( \w) van uw tekenreeks en converteert deze naar hoofdletters. Niets exclusiever is nodig.


Antwoord 27

Alleen omdat dit echt een one-liner is, zal ik dit antwoord opnemen. Het is een ES6-gebaseerde geïnterpoleerde string-one-liner.

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

Antwoord 28

Bekijk deze oplossing:

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

Antwoord 29

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

(Je kunt het in een functie inkapselen of zelfs toevoegen aan het String-prototype als je het vaak gebruikt.)


Antwoord 30

Je kunt het zo in één regel doen

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes