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

Question

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"

Answer 1

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 .

Answer 2

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

Answer 3

En CSS :

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

Answer 4

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

Answer 5

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