Come posso rendere maiuscola la prima lettera di una stringa in JavaScript?

Come posso rendere maiuscola la prima lettera di una stringa, 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"

La soluzione di base è:

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

console.log(capitalizeFirstLetter('foo')); // Foo

Alcune altre risposte modificano String.prototype(anche questa era una risposta), ma sconsiglio ora questo a causa della manutenibilità (difficile da scoprire dove la funzione viene aggiunta a prototypee potrebbe causare conflitti se un altro codice utilizza lo stesso nome / un browser aggiunge una funzione nativa con lo stesso nome in futuro).

... e poi, c'è molto di più in questa domanda quando si considera l'internazionalizzazione, come dimostra questa risposta sorprendentemente buona (sepolta sotto).

Se si desidera lavorare con punti di codice Unicode anziché unità di codice (ad esempio per gestire i caratteri Unicode al di fuori del piano multilingue di base) è possibile sfruttare il fatto che String#[@iterator]funziona con i punti di codice e si può usare toLocaleUpperCaseper ottenere maiuscole corrette a livello locale:

function capitalizeFirstLetter([ first, ...rest ], locale = navigator.language) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

console.log(capitalizeFirstLetter('foo')); // Foo
console.log(capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉")); // "𐐎𐐲𐑌𐐼𐐲𐑉" (correct!)
console.log(capitalizeFirstLetter("italya", 'tr')); // İtalya" (correct in Turkish Latin!)

Per ulteriori opzioni di internazionalizzazione, vedere la risposta originale di seguito .

Ecco un approccio più orientato agli oggetti:

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

Chiameresti la funzione in questo modo:

"hello world".capitalize();

Con l'output previsto essere:

"Hello world" 

Nel CSS:

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

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

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 undefinedstringhe vuote (vedere il commento di @ njzk2 di seguito ), è possibile verificare la presenza di una stringa vuota:

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

Se sei interessato all'esecuzione di alcuni diversi metodi pubblicati:

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

Come puoi vedere, i primi due metodi sono sostanzialmente comparabili in termini di prestazioni, mentre l'alterazione 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);
}

Per un altro caso ne ho bisogno per scrivere in maiuscolo la prima lettera e minuscole per 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();

Questa è la soluzione ECMAScript 6+ 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 stai già (o considerando) l'utilizzo 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);
}

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

Potremmo ottenere il primo personaggio con uno dei miei preferiti RegExp, sembra una faccina carina:/^./

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

Uso:

var str = "ruby java";

console.log(str.charAt(0).toUpperCase() + str.substring(1));

Verrà emesso "Ruby java"sulla console.

Se usi underscore.js o Lo-Dash , la libreria underscore.string fornisce estensioni di stringa, tra cui maiuscole:

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

Esempio:

_.capitalize("foo bar") == "Foo bar"

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

poi capitalize("hello") // Hello

Le soluzioni più brevi 3, 1 e 2 gestiscono i casi quando la sstringa è ""e nulle undefined:

 s&&s[0].toUpperCase()+s.slice(1)        // 32 char

 s&&s.replace(/./,s[0].toUpperCase())    // 36 char - using regexp

'foo'.replace(/./,x=>x.toUpperCase())    // 31 char - direct on string, ES6

let s='foo bar';

console.log( s&&s[0].toUpperCase()+s.slice(1) );

console.log( s&&s.replace(/./,s[0].toUpperCase()) );

console.log( 'foo bar'.replace(/./,x=>x.toUpperCase()) );

Solo CSS

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

• Nonostante sia chiamato ::first-letter, si applica al primo carattere , ovvero in caso di stringa %a, questo selettore si applicherebbe %e come tale anon verrebbe maiuscolo.
• In IE9 + o IE5.5 + è supportato nella notazione legacy con solo due punti ( :first-letter).

ES2015 one-liner

Dato che ci sono numerose risposte, ma nessuna in ES2015 che avrebbe risolto il problema originale in modo efficiente, ho trovato quanto segue:

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

Osservazioni

• parameters => functionè la cosiddetta funzione freccia .
• Ho scelto capitalizeFirstCharinvece il nome capitalizeFirstLetter, perché OP non ha richiesto il codice che mette in maiuscolo la prima lettera dell'intera stringa, ma il primo carattere (se si tratta di lettere, ovviamente).
• constci dà la possibilità di dichiarare capitalizeFirstCharcome costante, il che è desiderato poiché come programmatore dovresti sempre dichiarare esplicitamente le tue intenzioni.
• Nel benchmark che ho eseguito non c'erano differenze significative tra string.charAt(0)e string[0]. Si noti, tuttavia, che string[0]sarebbe undefinedper stringa vuota, quindi dovrebbe essere riscritto string && string[0], che è troppo prolisso, rispetto all'alternativa.
• string.substring(1)è più veloce di string.slice(1).

Prova delle prestazioni

• 4.956.962 ops / 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.

C'è un modo molto semplice per implementarlo sostituendolo . Per ECMAScript 6:

'foo'.replace(/^./, str => str.toUpperCase())

Risultato:

'Foo'

Non ho visto alcuna menzione nelle risposte esistenti di problemi relativi ai punti di codice del piano astrale o all'internazionalizzazione . "Maiuscolo" non significa la stessa cosa in ogni lingua usando un determinato script.

Inizialmente non ho visto alcuna risposta per risolvere i problemi relativi ai punti di codice del piano astrale. Ce n'è uno , ma è un po 'sepolto (come questo, immagino!)

La maggior parte delle funzioni proposte è simile a questa:

function capitalizeFirstLetter(str) {
  return str[0].toUpperCase() + str.slice(1);
}

Tuttavia, alcuni caratteri racchiusi non rientrano nel BMP (piano multilingue di base, punti codice da U + 0 a U + FFFF). Ad esempio prendi questo testo Deseret:

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉"); // "𐐶𐐲𐑌𐐼𐐲𐑉"

Il primo carattere qui non riesce a scrivere in maiuscolo perché le proprietà delle stringhe indicizzate in array non accedono a "caratteri" o punti di codice *. Accedono alle unità di codice UTF-16. Questo vale anche durante lo slicing: i valori dell'indice puntano su unità di codice.

Capita che le unità di codice UTF-16 siano 1: 1 con punti di codice USV entro due intervalli, da U + 0 a U + D7FF e da U + E000 a U + FFFF inclusi. La maggior parte dei personaggi racchiusi in questi due range, ma non tutti.

Da ES2015 in poi, affrontarlo è diventato un po 'più semplice. String.prototype[@@iterator]restituisce stringhe corrispondenti a punti di codice **. Quindi, ad esempio, possiamo fare questo:

function capitalizeFirstLetter([ first, ...rest ]) {
  return [ first.toUpperCase(), ...rest ].join('');
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

Per stringhe più lunghe, questo probabilmente non è terribilmente efficiente *** - non abbiamo davvero bisogno di ripetere il resto. Potremmo usare String.prototype.codePointAtper arrivare a quella prima (possibile) lettera, ma dovremmo ancora determinare da dove dovrebbe iniziare la sezione. Un modo per evitare di ripetere il resto sarebbe verificare se il primo punto di codice è esterno al BMP; in caso contrario, la sezione inizia da 1 e, in caso affermativo, la sezione inizia da 2.

function capitalizeFirstLetter(str) {
  const firstCP = str.codePointAt(0);
  const index = firstCP > 0xFFFF ? 2 : 1;

  return String.fromCodePoint(firstCP).toUpperCase() + str.slice(index);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

Potresti usare la matematica bit a bit invece di > 0xFFFFlì, ma probabilmente è più facile da capire in questo modo e raggiungerebbe la stessa cosa.

Possiamo anche farlo funzionare in ES5 e in basso, portando questa logica un po 'più in là, se necessario. Non esistono metodi intrinseci in ES5 per lavorare con i punti di codice, quindi dobbiamo testare manualmente se la prima unità di codice è un surrogato ****:

function capitalizeFirstLetter(str) {
  var firstCodeUnit = str[0];

  if (firstCodeUnit < '\uD800' || firstCodeUnit > '\uDFFF') {
    return str[0].toUpperCase() + str.slice(1);
  }

  return str.slice(0, 2).toUpperCase() + str.slice(2);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

All'inizio ho citato anche considerazioni sull'internazionalizzazione. Alcuni di questi sono molto difficili da conto perché richiedono la conoscenza non solo di ciò che è in uso la lingua, ma anche possono richiedere conoscenze specifiche delle parole nella lingua. Ad esempio, il digraph irlandese "mb" capitalizza come "mB" all'inizio di una parola. Un altro esempio, il tedesco eszett, non inizia mai una parola (afaik), ma aiuta ancora a illustrare il problema. Il minuscolo eszett ("ß") diventa "SS", ma "SS" può minuscolare in "ß" o "ss" - è necessaria una conoscenza fuori banda della lingua tedesca per sapere quale sia corretta!

L'esempio più famoso di questo tipo di problemi, probabilmente, è il turco. In latino turco, la forma maiuscola di I è İ, mentre la forma minuscola di I è ı - sono due lettere diverse. Fortunatamente abbiamo un modo per rendere conto di questo:

function capitalizeFirstLetter([ first, ...rest ], locale) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

capitalizeFirstLetter("italy", "en") // "Italy"
capitalizeFirstLetter("italya", "tr") // "İtalya"

In un browser, il tag della lingua più preferita dell'utente è indicato da navigator.language, un elenco in ordine di preferenza è disponibile all'indirizzo navigator.languagese la lingua di un determinato elemento DOM può essere ottenuta (di solito) con Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HEREdocumenti in più lingue .

Negli agenti che supportano le classi di caratteri delle proprietà Unicode in RegExp, introdotte in ES2018, possiamo ripulire ulteriormente le cose esprimendo direttamente quali caratteri ci interessano:

function capitalizeFirstLetter(str, locale=navigator.language) {
  return str.replace(/^\p{CWU}/u, char => char.toLocaleUpperCase(locale));
}

Questo potrebbe essere modificato un po 'per gestire anche la maiuscola di più parole in una stringa con una precisione abbastanza buona. Il CWUo proprietà del carattere Changes_When_Uppercased corrisponde a tutti i punti di codice che, bene, cambiano quando vengono maiuscoli. Possiamo provarlo con un personaggio digraph titolato come l'olandese ij per esempio:

capitalizeFirstLetter('ijsselmeer'); // "IJsselmeer"

Al momento della stesura (febbraio 2020), Firefox / Spidermonkey non ha ancora implementato nessuna delle funzionalità RegExp introdotte negli ultimi due anni *****. Puoi controllare lo stato corrente di questa funzione nella tabella di compatibilità Kangax . Babel è in grado di compilare letterali RegExp con riferimenti di proprietà a schemi equivalenti senza di essi, ma sii consapevole che il codice risultante potrebbe essere enorme.

Con ogni probabilità, le persone che pongono questa domanda non si occuperanno di capitalizzazione o internazionalizzazione del Deseret. Ma è bene essere consapevoli di questi problemi perché c'è una buona probabilità che li incontri alla fine anche se al momento non sono preoccupazioni. Non sono casi "marginali", o meglio, non lo sono casi limite per definizione - c'è un intero paese in cui la maggior parte delle persone parla turco, e comunque, la fusione di unità di codice con punti di codice è una fonte abbastanza comune di bug (specialmente con riguardo alle emoji). Sia le stringhe che il linguaggio sono piuttosto complicati!

* Le unità di codice di UTF-16 / UCS2 sono anche punti di codice Unicode, nel senso che ad esempio U + D800 è tecnicamente un punto di codice, ma non è quello che "significa" qui ... in un certo senso ... anche se diventa piuttosto sfocata. Ciò che i surrogati sicuramente non sono, tuttavia, sono USV (valori scalari Unicode).

** Tuttavia, se un'unità di codice surrogato è “orfana”, ovvero non fa parte di una coppia logica, è possibile ottenere anche surrogati qui.

*** può essere. Non l'ho provato. A meno che tu non abbia determinato che la capitalizzazione è un collo di bottiglia significativo, probabilmente non lo farei sudare: scegli quello che ritieni più chiaro e leggibile.

**** tale funzione potrebbe voler testare sia la prima che la seconda unità di codice anziché solo la prima, poiché è possibile che la prima unità sia un surrogato orfano. Ad esempio, l'ingresso "\ uD800x" renderebbe maiuscola la X così com'è, cosa che può o non può essere prevista.

***** Ecco il problema Bugzilla se vuoi seguire i progressi più direttamente.

Sembra essere più facile nei CSS:

<style type="text/css">
    p.capitalize {text-transform:capitalize;}
</style>
<p class="capitalize">This is some text.</p>

Questo proviene dalla proprietà di trasformazione del testo CSS (su W3Schools ).

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

È sempre meglio gestire prima questo tipo di cose usando i CSS , in generale, se puoi risolvere qualcosa usando i CSS, prova prima, quindi prova JavaScript per risolvere i tuoi problemi, quindi in questo caso prova a usare :first-letterCSS e applicatext-transform:capitalize;

Quindi prova a creare una classe per questo, in modo da poterla utilizzare a livello globale, ad esempio: .first-letter-uppercasee aggiungi qualcosa come sotto nel tuo CSS:

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

Anche l'opzione alternativa è JavaScript, quindi il migliore sarà qualcosa del genere:

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

e chiamalo come:

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

Se vuoi riutilizzarlo più e più volte, è meglio collegarlo alla stringa nativa javascript, quindi qualcosa di simile al seguente:

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

e chiamalo come di seguito:

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

Se si desidera riformattare il testo in maiuscolo, è possibile modificare gli altri esempi in quanto tali:

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

Questo assicurerà che il seguente testo sia cambiato:

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

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'

Ecco una funzione chiamata ucfirst () (abbreviazione di "maiuscola prima lettera"):

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

Puoi capitalizzare 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 poi sulla seconda riga capitalizza firstLetter chiamando firstLetter.toUpperCase () e lo unisce al resto della stringa, che si trova chiamando str.substr (1) .

Potresti pensare che questo fallirebbe per una stringa vuota, e in effetti in un linguaggio come C dovresti provvedere a questo. Tuttavia in JavaScript, quando si prende una sottostringa di una stringa vuota, si ottiene semplicemente una stringa vuota indietro.

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

Uso:

capitalizedString = someString.capitalize();

Questa è una stringa di testo => Questa è una stringa di testo

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

Dai un'occhiata a questa soluzione:

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

yourString.replace(/^[a-z]/, function(m){ return m.toUpperCase() });

(È possibile incapsularlo in una funzione o addirittura aggiungerlo al prototipo String se lo si utilizza frequentemente.)

La ucfirstfunzione 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 la dichiarazione.

Puoi farlo in una riga come questa

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

yourString.replace(/\w/, c => c.toUpperCase())

Ho trovato questa funzione freccia più semplice. Sostituisci corrisponde al carattere della prima lettera ( \w) della stringa e lo converte in maiuscolo. Niente di più elaborato necessario.