javascript - une - touppercase




Comment créer la première lettre d'une chaîne en majuscule en JavaScript? (20)

Comment créer la première lettre d'une chaîne en majuscule sans changer le casse des autres lettres?

Par exemple:

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

CSS uniquement

p::first-letter {
  text-transform: uppercase;
}
  • Bien qu’il soit appelé ::first-letter , il s’applique au premier caractère , c’est-à-dire que dans le cas de la chaîne %a , ce sélecteur s’appliquerait à % et, en tant que tel, ne serait pas capitalisé.
  • Dans IE9 + ou IE5.5 +, il est pris en charge dans la notation classique avec un seul signe deux-points ( :first-letter ).

ES2015 one-liner

Comme il existe de nombreuses réponses, mais aucune dans ES2015 ne résoudrait efficacement le problème initial, j'ai proposé ce qui suit:

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

Remarques

  • parameters => function est appelée fonction de flèche .
  • Je suis allé avec le nom capitalizeFirstChar au lieu de capitalizeFirstLetter , parce que OP n'a pas demandé de code qui capitalise la première lettre de la chaîne entière, mais le tout premier caractère (si c'est une lettre, bien sûr).
  • const nous donne la possibilité de déclarer capitalizeFirstChar comme une constante, ce qui est souhaitable car en tant que programmeur, vous devez toujours indiquer explicitement vos intentions.
  • Dans le test que j'ai effectué, il n'y avait pas de différence significative entre string.charAt(0) et string[0] . Notez cependant que la string[0] serait undefined pour une chaîne vide, elle devrait donc être réécrite dans la string && string[0] , ce qui est beaucoup trop détaillé par rapport à l’alternative.
  • string.substring(1) est plus rapide que string.slice(1) .

Référence

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


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

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

Comme vous pouvez le constater, les deux premières méthodes sont essentiellement comparables en termes de performances, alors que la modification du String.prototype est de loin la plus lente en termes de performances.

// 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);
}


En CSS:

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

Mettez en majuscule la première lettre de tous les mots d'une chaîne:

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

Pour un autre cas, j'en ai besoin pour mettre la première lettre en majuscule et le reste en minuscule. Les cas suivants m'ont amené à 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();

Si vous souhaitez reformater le texte en majuscule, vous pouvez modifier les autres exemples comme suit:

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

Cela garantira que le texte suivant est modifié:

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

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 documentation: 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 la première majuscule:

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

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" 

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

Mettre à jour:

Selon les commentaires ci-dessous, cela ne fonctionne pas dans IE 7 ou inférieur.

Mise à jour 2:

Pour éviter les chaînes undefined (voir le commentaire de @ njzk2 ci-dessous ), vous pouvez rechercher une chaîne vide:

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

Voici 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


Commander cette solution:

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

Vous pouvez le faire en une seule ligne comme ceci

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

Il est toujours préférable de manipuler ce type de fichiers en utilisant d' abord CSS . En général, si vous pouvez résoudre un problème avec CSS, commencez par essayer, puis essayez JavaScript pour résoudre vos problèmes. Dans ce cas, essayez d'utiliser :first-letterCSS et appliquez-le.text-transform:capitalize;

Essayez donc de créer une classe pour cela, afin de pouvoir l'utiliser globalement, par exemple: .first-letter-uppercaseet ajoutez 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 ça:

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

et appelez comme ça:

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 souhaitez le réutiliser encore et encore, il est préférable de l'attacher à une chaîne javascript native, par exemple, ci-dessous:

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

et appelez-le 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'

La ucfirstfonction fonctionne si vous le faites comme ceci.

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

Merci JP pour l'acclaration.


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

Usage:

capitalizedString = someString.capitalize();

Ceci est une chaîne de texte => Ceci est une chaîne de texte


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

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

Mise à jour de nov.2016 (ES6), juste pour 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

then capitalize("hello") // Hello


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

Certaines autres réponses modifient String.prototype (cette réponse aussi), mais je vous déconseille maintenant cela en raison de la maintenabilité (difficile de savoir où la fonction est ajoutée au prototype et risque de provoquer des conflits si un autre code utilise le même name / un navigateur ajoute une fonction native portant le même nom à l’avenir).


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

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

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




letter