4391 votes

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

Comment mettre la première lettre d'une chaîne en majuscule 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"

18 votes

Underscore a un plugin appelé underscore.string qui inclut ceci et un tas d'autres outils géniaux.

0 votes

De quoi : return str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();});

201 votes

Plus simple : string[0].toUpperCase() + string.substring(1)

6700voto

Steve Harrison Points 31062

La solution de base est la suivante :

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

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

D'autres réponses modifient String.prototype (cette réponse l'était aussi auparavant), mais je le déconseille maintenant pour des raisons de maintenabilité (il est difficile de savoir où la fonction est ajoutée au fichier 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).

...et puis, il y a tellement plus à cette question quand vous considérez l'internationalisation, car cette réponse étonnamment bonne (enterré ci-dessous) montre.

Si vous voulez travailler avec des points de code Unicode au lieu d'unités de code (par exemple pour gérer les caractères Unicode en dehors du plan multilingue de base), vous pouvez tirer parti du fait que String#[@iterator] fonctionne avec des points de code, et vous pouvez utiliser toLocaleUpperCase pour obtenir une mise en majuscule correcte au niveau local :

const capitalizeFirstLetter = ([ first, ...rest ], locale = navigator.language) =>
  first.toLocaleUpperCase(locale) + rest.join('')

console.log(
  capitalizeFirstLetter('foo'), // Foo
  capitalizeFirstLetter(""), // "" (correct!)
  capitalizeFirstLetter("italya", 'tr') // talya" (correct in Turkish Latin!)
)

Pour encore plus d'options d'internationalisation, veuillez consulter le site Web de la Commission européenne. réponse originale ci-dessous .

1516voto

Steve Hansell Points 7850

Voici une approche plus orientée objet :

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

Vous appelez la fonction, comme ceci :

"hello, world!".capitalize();

Le résultat attendu étant :

"Hello, world!"

20 votes

Dans la sortie attendue, comment diable le 'W' a-t-il été mis en majuscule ? La chaîne entière est 'hello, world!' et donc le premier caractère est simplement le 'h'.

0 votes

(-1) comme mentionné dans le commentaire précédent, votre "sortie attendue" serait "Hello, world !" avec seulement la première lettre en majuscule.

22 votes

Polluer les prototypes n'est pas une bonne idée.

749voto

sam6ber Points 453

En CSS :

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

158 votes

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

34 votes

En outre, cela n'affecte que l'affichage de la chaîne de caractères, et non la valeur réelle. Si elle se trouve dans un formulaire, par exemple, la valeur sera toujours soumise telle quelle.

0 votes

La question portait sur le javascript, pas sur le css

387voto

joelvh Points 3632

Voici une version abrégée de la réponse populaire qui obtient la première lettre en traitant la chaîne de caractères 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 inférieur.

Mise à jour 2 :

Pour éviter undefined pour les chaînes vides (voir Le commentaire de @njzk2 ci-dessous ), vous pouvez vérifier si la chaîne est vide :

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

Version ES

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

0 votes

Utilisez simplement charAt() au lieu de [].

160voto

alejandro Points 658

Pour un autre cas, j'ai besoin qu'il mette la première lettre en majuscule et le reste en minuscule. 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();

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X