Comment puis-je faire la première lettre d'un Majuscule de chaîne dans JavaScript?

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

D'autres réponses modifient String.prototype (cette réponse aussi utilisée), mais je vous déconseille de le faire maintenant en raison de la maintenabilité (difficile de savoir où la fonction est ajoutée au prototype et pourrait causer des conflits si un autre code utilise le même nom / un navigateur ajoute une fonction native avec ce même nom à l'avenir).

Une plus approche orientée objet:

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

et ensuite:

"hello world".capitalize();  =>  "Hello world" 

dans 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 undefined pour les chaînes vides (voir le commentaire de @njzk2 ci-dessous ), vous pouvez cherchez une chaîne de caractères vide:

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

si vous êtes intéressé par la performance de quelques méthodes différentes affiché:

Voici les méthodes les plus rapides basées sur ce test jsperf (ordonné de la plus rapide à la plus lente).

comme vous pouvez le voir, les deux premières méthodes sont essentiellement comparables en termes de performance, tandis que la modification du String.prototype est de loin la plus lente en termes de 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);
}

pour un autre cas, j'en ai besoin pour capitaliser la première lettre et réduire 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 les meilleures solutions:

première Solution dans CSS:

p {
  text-transform: capitalize;
}

deuxième solution :

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

vous pouvez aussi l'ajouter au String.prototype pour pouvoir l'enchaîner avec d'autres méthodes:

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

et l'utiliser comme ceci:

'string'.capitalizeFirstLetter() // String

Troisième Solution :

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).toLowerCase();
    }
    return pieces.join(" ");
}

var string = "hello world";
string = string.charAt(0).toUpperCase() + string.slice(1);
alert(string);

capitaliser la première lettre de tous les mots dans une chaîne de caractères:

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

C'est la solution 2018 ES6+ :

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 leur docs: 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 les premières majuscules:

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

nous pourrions obtenir le premier personnage avec un de mes favoris RegExp , ressemble à un smiley mignon: /^./

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

et pour tous les accros du café:

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

...et pour tous les gars qui pensent qu'il y a une meilleure façon de le faire, sans étendre les prototypes natifs:

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

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 ensuite:

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

Mise À Jour Nov.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

si vous utilisez underscore.js ou Lo-Dash , le trait de soulignement.string bibliothèque fournit des extensions de chaîne, y compris capitaliser:

_.majuscule (chaîne) convertit la première lettre de la chaîne en majuscule.

exemple:

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

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

Il semble être plus facile dans le CSS:

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

C'est à partir de CSS Propriété text-transform ( W3Schools ).

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'

si vous souhaitez reformater le texte en majuscules, vous pouvez modifier les autres exemples comme tels:

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

cela permettra de s'assurer que le texte suivant est modifié:

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

CSS only

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

• malgré son nom ::first-letter , il s'applique au premier caractère , c.-à-d. dans le cas de la chaîne %a , ce sélecteur s'appliquerait à % et en tant que tel a ne serait pas capitalisé.
• In IE9+ or IE5.5+ il est pris en charge dans la notation legacy avec un seul deux-points ( :first-letter ).

ES2015 one-liner

comme il y a de nombreuses réponses, mais aucune dans ES2015 qui pourrait résoudre le problème original efficacement, je suis venu avec ce qui suit:

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

Remarques

• parameters => function est ainsi appelé fonction Flèche .
• je suis allé avec le nom capitalizeFirstChar au lieu de capitalizeFirstLetter , parce que OP n'a pas demandé le code qui capitalise le la première lettre dans toute la chaîne, mais le tout premier char (si c'est la lettre, bien sûr).
• const nous donne la possibilité de déclarer capitalizeFirstChar comme constante, ce qui est souhaité car en tant que programmeur vous devez toujours énoncer 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] . À noter toutefois, que string[0] serait undefined pour la chaîne vide, de sorte qu'il doit être réécrit pour string && string[0] , qui est trop verbeux, par rapport à l'alternative.
• string.substring(1) est plus rapide que string.slice(1) .

de Référence", 1519360920"

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

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

Utilisation:

capitalizedString = someString.capitalize();

c'est une chaîne de texte => C'est une chaîne de texte

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

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

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

vous pouvez capitaliser une chaîne de caractères en appelant ucfirst ("some string") -- par exemple,

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

cela fonctionne en divisant la corde en deux morceaux. Sur la première ligne il sort première lettre et sur la deuxième ligne il capitalise première lettre en appelant .toUpperCase() et jointures avec le 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 auriez à répondre à cela. Cependant en JavaScript, lorsque vous prenez une soustraction d'une chaîne vide, vous obtenez juste une chaîne vide de retour.

vérifier cette solution:

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

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

(Vous pouvez encapsuler dans une fonction ou même l'ajouter à la Chaîne de prototype si vous utilisez fréquemment.)

la fonction ucfirst fonctionne si vous le faites comme ceci.

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

remercie J-P pour l'action.

Vous pouvez le faire en une ligne comme ceci

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

dans CoffeeScript , ajouter au prototype pour une chaîne de caractères:

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

Usage serait:

"woobie".capitalize()

ce Qui donne:

"Woobie"

il est toujours préférable de gérer ces types de matières en utilisant CSS d'abord , en général, si vous pouvez résoudre quelque chose en utilisant CSS, aller pour cela d'abord, puis essayer JavaScript pour résoudre vos problèmes, donc dans ce cas, essayer d'utiliser :first-letter dans CSS et appliquer text-transform:capitalize;

essayez donc de créer une classe pour cela, pour que vous puissiez l'utiliser globalement, par exemple: .first-letter-uppercase et ajouter quelque chose comme ci-dessous dans votre CSS:

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

aussi L'option alternative est JavaScript, donc le meilleur sera quelque chose comme ceci:

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

et appelez ça 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'

si vous voulez le réutiliser encore et encore, il est préférable de l'attacher à 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 l'appeler 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'

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

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

var str = "ruby java";

alert(str.charAt(0).toUpperCase() + str.substring(1));

il sera de retour "Ruby java"

http://jsfiddle.net/amitpandya/908c8e2v /

lien de résultat dans jsfiddle