Question Comment puis-je faire la première lettre d'une chaîne majuscule en JavaScript?


Comment puis-je faire la première lettre d'une chaîne majuscule, mais ne pas changer le cas de l'une des autres lettres?

Par exemple:

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

2960
2018-06-22 08:25


origine


Réponses:


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

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


4721
2018-06-22 08:30



Une approche plus orientée objet:

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

Et alors:

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

1194
2017-07-20 15:51



En CSS:

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

408
2017-07-17 14:06



Voici une version raccourcie 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);
}

Mettre à jour:

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

Mise à jour 2:

Éviter undefined pour les chaînes vides (voir Commentaire de @ njzk2 ci-dessous), vous pouvez vérifier une chaîne vide:

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

235
2017-08-28 23:03



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

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

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

enter image description here


134
2017-11-14 03:26



Pour un autre cas, j'en ai besoin pour mettre la première lettre en majuscule 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();

128
2017-07-19 18:17



Voici les meilleures solutions:

Première solution En CSS:

p {
  text-transform: capitalize;
}

Deuxième solution :

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

Vous pouvez également l'ajouter à la String.prototype donc vous pouvez l'enchaîner avec d'autres méthodes:

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

et l'utilise 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(" ");
}

106
2018-02-16 05:30