Comment mettre en majuscule la première lettre d'une chaîne en JavaScript?

Comment puis-je mettre la première lettre d'une chaîne en majuscules sans changer la casse des autres lettres?

Par exemple:

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

La solution de base est:

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

console.log(capitalizeFirstLetter('foo')); // Foo

Certaines autres réponses sont modifiées String.prototype(cette réponse aussi), mais je déconseille cela maintenant en raison de la maintenabilité (difficile de savoir où la fonction est ajoutée à la prototypeet pourrait provoquer des conflits si un autre code utilise le même nom / un navigateur ajoute une fonction native avec ce même nom à l'avenir).

... et puis, il y a tellement plus à cette question quand on considère l'internationalisation, comme montre cette étonnamment bonne réponse (enterrée ci-dessous).

Si vous souhaitez travailler avec des points de code Unicode au lieu d'unités de code (par exemple pour gérer des caractères Unicode en dehors du plan multilingue de base), vous pouvez tirer parti du fait que cela String#[@iterator]fonctionne avec des points de code, et vous pouvez utiliser toLocaleUpperCasepour obtenir des majuscules correctes pour les paramètres régionaux:

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

console.log(capitalizeFirstLetter('foo')); // Foo
console.log(capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉")); // "𐐎𐐲𐑌𐐼𐐲𐑉" (correct!)
console.log(capitalizeFirstLetter("italya", 'tr')); // İtalya" (correct in Turkish Latin!)

Pour encore plus d'options d'internationalisation, veuillez consulter la réponse d'origine ci-dessous .

Voici une approche plus orientée objet:

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

Vous appelleriez la fonction, comme ceci:

"hello world".capitalize();

Avec la sortie attendue étant:

"Hello world" 

En CSS:

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

Voici une version abrégée de la réponse populaire qui obtient la première lettre en traitant la chaîne comme un tableau:

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

Mise à jour:

Selon les commentaires ci-dessous, cela ne fonctionne pas dans IE 7 ou ci-dessous.

Mise à jour 2:

Pour éviter undefinedles chaînes vides (voir le commentaire de @ njzk2 ci-dessous ), vous pouvez rechercher une chaîne vide:

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

Si vous êtes intéressé par les performances de quelques méthodes différentes publiées:

Voici les méthodes les plus rapides basées sur ce test jsperf (classées du plus rapide au plus lent).

Comme vous pouvez le voir, les deux premières méthodes sont essentiellement comparables en termes de performances, alors que la modification de la String.prototypeest de loin la plus lente en termes de performances.

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

Pour un autre cas, j'en ai besoin pour mettre en majuscule la première lettre et minuscule le reste. Les cas suivants m'ont fait changer cette fonction:

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

Voici la solution ECMAScript 6+ 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

Si vous utilisez déjà (ou envisagez) d'utiliser lodash, la solution est simple:

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

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

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

Voir leurs documents: 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 js pour le premier majuscule:

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

Mettez en majuscule la première lettre de tous les mots d'une chaîne:

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

Nous pourrions obtenir le premier personnage avec l'un de mes préférés RegExp, ressemble à un joli smiley:/^./

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

Et pour tous les accros au café:

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

... et pour tous les gars qui pensent qu'il existe une meilleure façon de procéder, sans étendre les prototypes natifs:

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

Utilisation:

var str = "ruby java";

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

Il sortira "Ruby java"sur la console.

Si vous utilisez underscore.js ou Lo-Dash , la bibliothèque underscore.string fournit des extensions de chaîne, y compris les majuscules:

_.capitalize (string) Convertit la première lettre de la chaîne en majuscules.

Exemple:

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

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

Et alors:

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

Mise à jour de novembre 2016 (ES6), juste pour le 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 char which is capitalized by `toUpperCase()` method
 ).join('')                                             //return back to string

puis capitalize("hello") // Hello

3 solutions LES PLUS COURTES , 1 et 2 traitent les cas lorsque la schaîne est "", nullet 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()) );

CSS uniquement

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

• Bien qu'il soit appelé ::first-letter, il s'applique au premier caractère , c'est-à-dire qu'en cas de chaîne %a, ce sélecteur s'appliquerait à %et en tant que tel ane serait pas mis en majuscule.
• Dans IE9 + ou IE5.5 +, il est pris en charge en notation héritée avec un seul deux-points ( :first-letter).

ES2015 une doublure

Puisqu'il existe de nombreuses réponses, mais aucune dans ES2015 qui résoudrait efficacement le problème d'origine, j'ai trouvé ce qui suit:

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

Remarques

• parameters => functionest ce qu'on appelle la fonction flèche .
• Je suis allé avec nom capitalizeFirstCharau lieu de capitalizeFirstLetter, car OP n'a pas demandé de code qui met en majuscule la première lettre de la chaîne entière, mais le tout premier caractère (si c'est une lettre, bien sûr).
• constnous donne la possibilité de déclarer capitalizeFirstCharcomme constante, ce qui est souhaité car en tant que programmeur, vous devez toujours indiquer explicitement vos intentions.
• Dans le benchmark que j'ai effectué, il n'y avait pas de différence significative entre string.charAt(0)et string[0]. Notez cependant que ce string[0]serait undefinedpour une chaîne vide, donc elle devrait être réécrite string && string[0], ce qui est beaucoup trop verbeux, par rapport à l'alternative.
• string.substring(1)est plus rapide que string.slice(1).

Référence

• 4 956 962 ops / s ± 3,03% pour cette solution,
• 4 577 946 ops / s ± 1,2% pour la réponse la plus votée.
• Créé avec JSBench.me sur Google Chrome 57.

Il existe un moyen très simple de l'implémenter par replace . Pour ECMAScript 6:

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

Résultat:

'Foo'

Je n'ai vu aucune mention dans les réponses existantes de problèmes liés aux points de code du plan astral ou à l' internationalisation. «Majuscule» ne signifie pas la même chose dans toutes les langues utilisant un script donné.

Au début, je n'ai vu aucune réponse concernant les problèmes liés aux points de code du plan astral. Il y en a un , mais il est un peu enterré (comme celui-ci, je suppose!)

La plupart des fonctions proposées ressemblent à ceci:

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

Cependant, certains caractères placés en dehors du BMP (plan multilingue de base, points de code U + 0 à U + FFFF). Par exemple, prenez ce texte Deseret:

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

Le premier caractère ici ne parvient pas à mettre en majuscule parce que les propriétés indexées de tableau des chaînes n'accèdent pas aux «caractères» ou aux points de code *. Ils accèdent aux unités de code UTF-16. Cela est également vrai lors du découpage - les valeurs d'index pointent vers les unités de code.

Il se trouve que les unités de code UTF-16 sont 1: 1 avec des points de code USV dans deux plages, U + 0 à U + D7FF et U + E000 à U + FFFF inclus. La plupart des personnages encaissés entrent dans ces deux gammes, mais pas tous.

À partir d'ES2015, le traitement de ce problème est devenu un peu plus facile. String.prototype[@@iterator]renvoie des chaînes correspondant aux points de code **. Ainsi, par exemple, nous pouvons le faire:

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

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

Pour les cordes plus longues, ce n'est probablement pas terriblement efficace *** - nous n'avons pas vraiment besoin d'itérer le reste. Nous pourrions utiliser String.prototype.codePointAtpour obtenir cette première lettre (possible), mais nous aurions encore besoin de déterminer où la tranche devrait commencer. Une façon d'éviter d'itérer le reste serait de tester si le premier point de code est en dehors du BMP; si ce n'est pas le cas, la tranche commence à 1, et si c'est le cas, la tranche commence à 2.

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

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

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

Vous pouvez utiliser des mathématiques au niveau du bit au lieu de > 0xFFFFlà, mais c'est probablement plus facile à comprendre de cette façon et l'une ou l'autre obtiendrait la même chose.

Nous pouvons également faire ce travail dans ES5 et ci-dessous en poussant un peu plus loin cette logique si nécessaire. Il n'y a pas de méthodes intrinsèques dans ES5 pour travailler avec les points de code, nous devons donc tester manuellement si la première unité de code est un substitut ****:

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

Au début, j'ai également mentionné des considérations d'internationalisation. Certains d' entre eux sont très difficiles à expliquer parce qu'ils ont besoin de connaissances non seulement de ce que la langue est utilisée, mais peut aussi exiger des connaissances spécifiques des mots dans la langue. Par exemple, le digraphe irlandais "mb" est mis en majuscule comme "mB" au début d'un mot. Un autre exemple, l'eszett allemand, ne commence jamais un mot (afaik), mais aide toujours à illustrer le problème. L'eszett en minuscule («ß») met en majuscule «SS», mais «SS» peut minuscule en «ß» ou «ss» - vous avez besoin d'une connaissance hors bande de la langue allemande pour savoir ce qui est correct!

L'exemple le plus célèbre de ce genre de problèmes est probablement le turc. En latin turc, la forme majuscule de i est ©, tandis que la forme minuscule de I est ı - ce sont deux lettres différentes. Heureusement, nous avons un moyen de tenir compte de cela:

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

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

Dans un navigateur, la balise de langue préférée de l'utilisateur est indiquée par navigator.language, une liste par ordre de préférence est trouvée sur navigator.languages, et la langue d'un élément DOM donné peut être obtenue (généralement) avec Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HEREdans des documents multilingues.

Dans les agents qui prennent en charge les classes de caractères de propriété Unicode dans RegExp, qui ont été introduites dans ES2018, nous pouvons nettoyer davantage les choses en exprimant directement les caractères qui nous intéressent:

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

Cela pourrait être légèrement modifié pour gérer également plusieurs mots en majuscule dans une chaîne avec une assez bonne précision. La propriété de caractère CWUou Changes_When_Uppercased correspond à tous les points de code qui, ainsi, changent lorsqu'ils sont en majuscule. Nous pouvons essayer cela avec un caractère digraphique en titane comme le néerlandais ij par exemple:

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

Au moment de la rédaction (février 2020), Firefox / Spidermonkey n'avait encore implémenté aucune des fonctionnalités RegExp introduites au cours des deux dernières années *****. Vous pouvez vérifier l'état actuel de cette fonctionnalité dans le tableau compat Kangax . Babel est capable de compiler des littéraux RegExp avec des références de propriété à des modèles équivalents sans eux, mais sachez que le code résultant peut être énorme.

Selon toute vraisemblance, les personnes qui poseront cette question ne seront pas concernées par la capitalisation ou l'internationalisation de Deseret. Mais il est bon d'être conscient de ces problèmes, car il y a de fortes chances que vous les rencontriez éventuellement même si ce ne sont pas des problèmes pour le moment. Ce ne sont pas des cas marginaux, ou plutôt, ce ne sont pas des cas marginaux par définition - il y a tout un pays où la plupart des gens parlent le turc, de toute façon, et la fusion des unités de code avec des points de code est une source assez courante de bogues (en particulier avec en ce qui concerne les emoji). Les chaînes et la langue sont assez compliquées!

* Les unités de code de l'UTF-16 / UCS2 sont également des points de code Unicode dans le sens où, par exemple, U + D800 est techniquement un point de code, mais ce n'est pas ce que cela "signifie" ici ... en quelque sorte ... même si cela devient joli flou. Ce que les substituts ne sont certainement pas, cependant, ce sont les USV (valeurs scalaires Unicode).

** Bien que si une unité de code de substitution est «orpheline» - c'est-à-dire qu'elle ne fait pas partie d'une paire logique - vous pouvez toujours obtenir des substituts ici aussi.

*** peut être. Je ne l'ai pas testé. À moins que vous n'ayez déterminé que la capitalisation est un goulot d'étranglement significatif, je ne le suerais probablement pas - choisissez ce que vous pensez être le plus clair et le plus lisible.

**** une telle fonction pourrait souhaiter tester à la fois la première et la seconde unités de code au lieu de la première, car il est possible que la première unité soit un substitut orphelin. Par exemple, l'entrée "\ uD800x" mettrait en majuscule le X tel quel, ce qui peut ou non être attendu.

***** Voici le problème de Bugzilla si vous souhaitez suivre la progression plus directement.

Cela semble plus simple en CSS:

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

Ceci provient de la propriété CSS text-transform (sur W3Schools ).

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

Il est toujours préférable de gérer ce genre de choses en utilisant d' abord CSS , en général, si vous pouvez résoudre quelque chose en utilisant CSS, allez-y d'abord, puis essayez JavaScript pour résoudre vos problèmes, alors dans ce cas essayez d'utiliser :first-letteren CSS et appliqueztext-transform:capitalize;

Essayez donc de créer une classe pour cela, afin de pouvoir l'utiliser globalement, par exemple: .first-letter-uppercaseet ajoutez quelque chose comme ci-dessous dans votre CSS:

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

De plus, l'option alternative est JavaScript, donc le mieux va être quelque chose comme ça:

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

et appelez-le comme:

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'

Si vous souhaitez le réutiliser encore et encore, il est préférable de le joindre à la chaîne native javascript, donc quelque chose comme ci-dessous:

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

et appelez-le comme ci-dessous:

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

Si vous souhaitez reformater le texte en majuscules, vous pouvez modifier les autres exemples en tant que tels:

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

Cela garantira que le texte suivant est modifié:

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

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'

Voici une fonction appelée ucfirst () (abréviation de "majuscule première lettre"):

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

Vous pouvez mettre une chaîne en majuscule en appelant ucfirst ("une chaîne") - par exemple,

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

Il fonctionne en divisant la chaîne en deux morceaux. Sur la première ligne, il extrait firstLetter , puis sur la deuxième ligne, il capitalise firstLetter en appelant firstLetter.toUpperCase () et le joint au reste de la chaîne, qui est trouvé en appelant str.substr (1) .

Vous pourriez penser que cela échouerait pour une chaîne vide, et en effet, dans un langage comme C, vous devrez répondre à cela. Cependant, en JavaScript, lorsque vous prenez une sous-chaîne d'une chaîne vide, vous obtenez simplement une chaîne vide.

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

Usage:

capitalizedString = someString.capitalize();

Ceci est une chaîne de texte => Ceci est une chaîne de texte

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

Découvrez cette solution:

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

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

(Vous pouvez l'encapsuler dans une fonction ou même l'ajouter au prototype String si vous l'utilisez fréquemment.)

La ucfirstfonction fonctionne si vous le faites comme ça.

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

Merci JP pour cette déclaration.

Vous pouvez le faire en une seule ligne comme celle-ci

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

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

J'ai trouvé cette fonction de flèche la plus simple. Remplacer correspond au premier caractère de lettre ( \w) de votre chaîne et le convertit en majuscule. Rien de plus sophistiqué nécessaire.