Comment mettre la première lettre en majuscule en JavaScript : 5 méthodes + secrets

« Pourquoi n’existe-t-il pas de méthode intégrée en JavaScript pour la capitalisation ? » — demanderez-vous

Cette question tourmente les débutants depuis de nombreuses années. Sur Stack Overflow, elle a recueilli des milliers de votes et des millions de vues. On pourrait penser que quoi de plus simple que de mettre la première lettre en majuscule ? Mais en JavaScript, une opération aussi banale se transforme en une petite quête.

Dans cet article, nous ne donnerons pas simplement une réponse toute faite. Nous allons analyser cinq approches différentes, les comparer en termes de performances, de lisibilité et de fiabilité. Vous découvrirez pourquoi str[0].toUpperCase() + str.slice(1) n’est pas toujours le meilleur choix, et comment traiter des cas exotiques comme les chaînes vides ou les caractères Unicode.

1. Le grand classique : charAt + slice

La réponse la plus populaire sur Stack Overflow — et pour cause. Cette méthode est utilisée dans 90 % des projets.

function capitalizeFirst(str) {\n    return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\nconsole.log(capitalizeFirst('hello')); // 'Hello'\nconsole.log(capitalizeFirst('javaScript')); // 'JavaScript'

Pourquoi charAt et pas str[0] ?

Dans les anciens navigateurs (IE 8 et inférieur), l’accès par index str[0] renvoyait undefined pour une chaîne vide. charAt(0) renvoie toujours une chaîne vide, ce qui est plus sûr. Dans le code moderne, la différence est quasi inexistante, mais l’habitude d’utiliser charAt est restée comme une bonne pratique pour la compatibilité avec les systèmes legacy.

Avantages : simplicité, lisibilité, fonctionne partout.
\nInconvénients : ne gère pas les chaînes vides (provoque une erreur TypeError).

2. Approche moderne : template literals + slice

Avec l’arrivée d’ES6, le code peut être rendu un peu plus élégant :

const capitalize = (str) => {\n    return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;\n};

Ou encore plus court avec l’opérateur optionnel (ES2020) :

const capitalize = (str) => str?.charAt(0).toUpperCase() + str.slice(1);

L’opérateur ?. protège contre null ou undefined, mais pas contre une chaîne vide. Pour une chaîne vide, str?.charAt(0) renverra "", et toUpperCase() sur une chaîne vide renvoie aussi "". Résultat : "" + "".slice(1) → "". Cela fonctionne correctement !

3. Expressions régulières : pour les geeks et les esthètes

La méthode avec regex ressemble à de la magie, mais elle est très puissante :

function capitalizeRegex(str) {\n    return str.replace(/^./, char => char.toUpperCase());\n}\n\nconsole.log(capitalizeRegex('world')); // 'World'

Que se passe-t-il ici ? ^. signifie « le premier caractère de la chaîne ». Nous le remplaçons par le résultat de l’appel à toUpperCase().

Avantages :

\n
• Ne nécessite pas de vérification de chaîne vide (le regex ne fera tout simplement rien)
\n
• Facile à étendre : /^\\w/ — uniquement pour les lettres, /^[a-z]/ — uniquement pour l’alphabet latin
\n

Inconvénients :

\n
• 20 à 30 % plus lent (les tests sur jsPerf le confirment)
\n
• Moins lisible pour les débutants
\n

4. Méthode CSS : quand JavaScript n’est pas nécessaire

Parfois, le meilleur code est celui que vous n’avez pas écrit. Si vous travaillez avec l’affichage de texte sur une page, la capitalisation via CSS peut être la solution idéale :

/* CSS */\n.capitalize {\n    text-transform: capitalize;\n}

// HTML\n<p class="capitalize">ce texte aura une majuscule</p>

Mais il y a un détail : text-transform: capitalize met en majuscule chaque mot, et pas seulement le premier. Si vous ne voulez que le premier mot — impossible sans JavaScript.

5. Approche professionnelle : gestion des erreurs et Unicode

Un véritable code de production doit prendre en compte les cas limites. Voici une fon