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



first of (25)

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

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


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


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

Ho trovato questa funzione di freccia più semplice. Replace corrisponde alla prima lettera carattere ( \w) della stringa e la converte in maiuscolo. Niente di più necessario.


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

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.


È 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'

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"

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


In CSS:

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

Puoi farlo in una riga come questa

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


var capitalized = yourstring[0].toUpperCase() + yourstring.substr(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();
  });
};

Acquista questa soluzione:

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

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.


In CoffeeScript , aggiungi al prototipo una stringa:

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

L'utilizzo sarebbe:

"woobie".capitalize()

Quale produce:

"Woobie"

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

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

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

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

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" 

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

OK, fan delle chiusure di 6 anni. Vuoi sentire l'esempio più semplice di chiusura?

Immaginiamo la prossima situazione: un autista è seduto in una macchina. Quella macchina è dentro un aereo. L'aereo è in aeroporto. La capacità del guidatore di accedere a cose al di fuori della sua auto, ma all'interno dell'aereo, anche se quell'aereo lascia un aeroporto, è una chiusura. Questo è tutto.Quando compi il 27, guarda la spiegazione più dettagliata o nell'esempio qui sotto.

Ecco come posso convertire la mia storia piana nel codice.

var plane = function(defaultAirport) {

  var lastAirportLeft = defaultAirport;

  var car = {
    driver: {
      startAccessPlaneInfo: function() {
        setInterval(function() {
          console.log("Last airport was " + lastAirportLeft);
        }, 2000);
      }
    }
  };
  car.driver.startAccessPlaneInfo();

  return {
    leaveTheAirport: function(airPortName) {
      lastAirportLeft = airPortName;
    }
  }
}("Boryspil International Airport");

plane.leaveTheAirport("John F. Kennedy");





javascript string capitalize letter