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




typescript capitalize first letter of string (20)

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"

https://code.i-harness.com


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.


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


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

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

È possibile 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.


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

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

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.


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

Se si desidera riformattare il testo di maiuscole, è possibile 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

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

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 è da CSS text-transform Property (a W3Schools ).


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

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


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

Quindi prova a creare una classe per questo, quindi puoi usarla globalmente, ad esempio: .first-letter-uppercasee aggiungi qualcosa come di seguito nel tuo CSS:

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

Anche l'opzione alternativa è JavaScript, quindi la cosa 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'

Se vuoi riutilizzarlo più volte, è meglio collegarlo a javascript nativo String, quindi qualcosa di simile qui sotto:

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'

In CoffeeScript , aggiungi al prototipo una stringa:

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

L'utilizzo sarebbe:

"woobie".capitalize()

Quale produce:

"Woobie"

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 => This Is A Text String


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


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


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