Come faccio a rendere la prima lettera di una stringa in maiuscolo in JavaScript?

Come faccio a fare la prima lettera di una stringa maiuscola, ma non cambiare il caso di nessuna delle altre lettere?

Per esempio:

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

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

Alcune altre risposte modificano String.prototype (anche questa risposta era utile), ma vorrei sconsigliarlo ora a causa della manutenibilità (difficile scoprire dove la funzione viene aggiunta al prototype e potrebbe causare conflitti se altri codici usano lo stesso nome / un browser aggiunge una funzione nativa con lo stesso nome in futuro).

Un approccio più orientato agli oggetti:

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

E poi:

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

In CSS:

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

Ecco una versione abbreviata della risposta popolare che ottiene la prima lettera trattando la stringa come una matrice:

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

Aggiornare:

Secondo i commenti qui sotto questo non funziona in IE 7 o sotto.

Aggiornamento 2:

Per evitare undefined per le stringhe vuote (vedi il commento di @jjzk2 sotto ), puoi verificare una stringa vuota:

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

Se sei interessato alle prestazioni di alcuni metodi diversi pubblicati:

Ecco i metodi più veloci basati su questo test jsperf (ordinato dal più veloce al più lento).

Come potete vedere, i primi due metodi sono essenzialmente comparabili in termini di prestazioni, mentre l’alterazione di String.prototype è di gran lunga la più lenta in termini di prestazioni.

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

inserisci la descrizione dell'immagine qui

Per un altro caso ho bisogno di capitalizzare la prima lettera e in minuscolo il resto. I seguenti casi mi hanno fatto cambiare questa funzione:

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

Ecco le migliori soluzioni:

Prima soluzione in CSS:

 p { text-transform: capitalize; } 

Seconda soluzione :

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

È anche ansible aggiungerlo a String.prototype modo da poterlo concatenare con altri metodi:

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

e usalo in questo modo:

 'string'.capitalizeFirstLetter() // String 

Terza soluzione :

 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(" "); } 
 var string = "hello world"; string = string.charAt(0).toUpperCase() + string.slice(1); alert(string); 

Inserisci in maiuscolo la prima lettera di tutte le parole in una stringa:

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

Se stai già (o stai pensando) usando lodash , la soluzione è semplice:

 _.upperFirst('fred'); // => 'Fred' _.upperFirst('FRED'); // => 'FRED' _.capitalize('fred') //=> 'Fred' 

Vedi i loro documenti: 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 per la prima maiuscola:

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

Potremmo ottenere il primo personaggio con uno dei miei RegExp preferiti, sembra un simpatico smiley: /^./

 String.prototype.capitalize = function () { return this.replace(/^./, function (match) { return match.toUpperCase(); }); }; 

E per tutti i drogati di caffè:

 String::capitalize = -> @replace /^./, (match) -> match.toUpperCase() 

… e per tutti quelli che pensano che ci sia un modo migliore per farlo, senza estendere i prototipi nativi:

 var capitalize = function (input) { return input.replace(/^./, function (match) { return match.toUpperCase(); }); }; 
 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 } 

E poi:

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

Aggiornamento novembre 2016 (ES6), solo per DIVERTIMENTO:

 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 

quindi capitalize("hello") // Hello

Questa è la soluzione ES6 + 2018 :

 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 

Se si utilizza underscore.js o Lo-Dash , la libreria underscore.string fornisce estensioni di stringa, inclusa la maiuscola:

_.capitalize (stringa) Converte la prima lettera della stringa in maiuscolo.

Esempio:

 _.capitalize("foo bar") == "Foo bar" 
 var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1); 

Sembra essere più facile nei CSS:

  

This is some text.

Questo è da CSS text-transform Property (a W3Schools ).

 function capitalize(s) { // returns the first letter capitalized + the string from index 1 and out aka. the rest of the string return s[0].toUpperCase() + s.substr(1); } // examples capitalize('this is a test'); => 'This is a test' capitalize('the Eiffel Tower'); => 'The Eiffel Tower' capitalize('/index.html'); => '/index.html' 

Se si desidera riformattare il testo di maiuscole, è ansible modificare gli altri esempi in quanto tali:

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

Ciò assicurerà che il seguente testo sia cambiato:

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

Solo CSS

 p::first-letter { text-transform: uppercase; } 
  • Nonostante sia chiamato ::first-letter , si applica al primo carattere , cioè nel caso della stringa %a , questo selettore si applicherebbe a % e come tale non sarebbe maiuscolo.
  • In IE9 + o IE5.5 + è supportato nella notazione legacy con solo due punti ( :first-letter ).

ES2015 one-liner

Dal momento che ci sono numerose risposte, ma nessuna in ES2015 che risolverà il problema originale in modo efficiente, ho trovato il seguente:

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

Osservazioni

  • parameters => function è la cosiddetta funzione arrow .
  • Sono andato con il nome capitalizeFirstChar invece di capitalizeFirstLetter , perché OP non ha richiesto il codice che capitalizza la prima lettera nell’intera stringa, ma il primissimo carattere (se si tratta di lettera, ovviamente).
  • const ci dà la possibilità di dichiarare capitalizeFirstChar come costante, il che è desiderato poiché come programmatore dovresti sempre dichiarare esplicitamente le tue intenzioni.
  • Nel benchmark che ho eseguito non c’era alcuna differenza significativa tra string.charAt(0) e string[0] . Si noti tuttavia che la string[0] non è undefined per la stringa vuota, quindi dovrebbe essere riscritta nella string && string[0] , che è troppo prolissa rispetto all’alternativa.
  • string.substring(1) è più veloce di string.slice(1) .

segno di riferimento

  • 4.956.962 operazioni / s ± 3.03% per questa soluzione,
  • 4.577.946 ops / s ± 1.2% per la risposta più votata.
  • Creato con JSBench.me su Google Chrome 57.

Confronto delle soluzioni

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

Uso:

 capitalizedString = someString.capitalize(); 

Questa è una stringa di testo => This Is A Text String

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

Ecco una funzione chiamata ucfirst () (abbreviazione di “lettera maiuscola”):

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

È ansible scrivere in maiuscolo una stringa chiamando ucfirst (“una stringa”) , ad esempio

 ucfirst("this is a test") --> "This is a test" 

Funziona dividendo la stringa in due pezzi. Sulla prima riga estrae firstLetter e quindi sulla seconda riga capitalizza firstLetter chiamando firstLetter.toUpperCase () e lo unisce al resto della stringa, che viene trovato chiamando str.substr (1) .

Potresti pensare che questo non riuscirebbe per una stringa vuota, e in effetti in una lingua come C dovresti provvedere a questo. Tuttavia, in JavaScript, quando si prende una sottostringa di una stringa vuota, si ottiene di nuovo una stringa vuota.

Acquista questa soluzione:

 var stringVal = 'master'; stringVal.replace(/^./, stringVal[0].toUpperCase()); // returns Master 
 yourString.replace(/^[az]/, function(m){ return m.toUpperCase() }); 

(Puoi incapsularlo in una funzione o anche aggiungerlo al prototipo String se lo usi frequentemente).

La funzione ucfirst funziona se lo fai in questo modo.

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

Grazie JP per l’approvazione.

Puoi farlo in una riga come questa

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

In CoffeeScript , aggiungi al prototipo una stringa:

 String::capitalize = -> @substr(0, 1).toUpperCase() + @substr(1) 

L’utilizzo sarebbe:

 "woobie".capitalize() 

Quale produce:

 "Woobie" 

It’s always better handle these kinds of stuffs using CSS first, in general, if you can solve something using CSS, go for that first, then try JavaScript to solve your problems, so in this case try using :first-letter in CSS and apply text-transform:capitalize;

So try creating class for that, so you can use it globally, for example: .first-letter-uppercase and add something like below in your CSS:

 .first-letter-uppercase:first-letter { text-transform:capitalize; } 

Also the alternative option is JavaScript, so the best gonna be something like this:

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

and call it like:

 capitalizeTxt('this is a test'); // return 'This is a test' capitalizeTxt('the Eiffel Tower'); // return 'The Eiffel Tower' capitalizeTxt('/index.html'); // return '/index.html' 

If you want to reuse it over and over, it’s better attach it to javascript native String, so something like below:

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

and call it as below:

 'this is a test'.capitalizeTxt(); // return 'This is a test' 'the Eiffel Tower'.capitalizeTxt(); // return 'The Eiffel Tower' '/index.html'.capitalizeTxt(); // return '/index.html' 
 yourString.replace(/\w/, c => c.toUpperCase()) 

I found this arrow function easiest. Replace matches the first letter character ( \w ) of your string and converts it to uppercase. Nothing fancier necessary.

 var str = "ruby java"; alert(str.charAt(0).toUpperCase() + str.substring(1)); 

it will return "Ruby java"

http://jsfiddle.net/amitpandya/908c8e2v/

result link in jsfiddle