javascript - studio - primeira letra maiuscula ireport




Como eu faço a primeira letra de uma string em maiúsculas em JavaScript? (20)

Como eu faço a primeira letra de uma string em maiúscula, mas não mudo o caso de nenhuma das outras letras?

Por exemplo:

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

Apenas CSS

p::first-letter {
  text-transform: uppercase;
}
  • Apesar de ser chamado ::first-letter , aplica-se ao primeiro caractere , ou seja, no caso da string %a , esse seletor se aplicaria a % e, como tal, não seria capitalizado.
  • No IE9 + ou IE5.5 + é suportado em notação legada com apenas dois pontos ( :first-letter ).

ES2015 one-liner

Uma vez que existem inúmeras respostas, mas nenhuma no ES2015 que resolveria o problema original de forma eficiente, surgiu o seguinte:

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

Observações

  • parameters => function é chamado de função de seta .
  • Eu fui com o nome capitalizeFirstChar vez de capitalizeFirstLetter , porque OP não pediu por um código que capitalize a primeira letra da string inteira, mas o primeiro caractere (se é uma letra, é claro).
  • const nos dá a habilidade de declarar capitalizeFirstChar como constante, o que é desejado, já que como programador você deve sempre declarar explicitamente suas intenções.
  • No benchmark que string.charAt(0) não houve diferença significativa entre string.charAt(0) e string[0] . Note, entretanto, que string[0] seria undefined para string vazia, então ela deve ser reescrita para string && string[0] , que é muito detalhada, comparado com a alternativa.
  • string.substring(1) é mais rápido que string.slice(1) .

Referência

  • 4,956,962 ops / s ± 3,03% para esta solução,
  • 4.577.946 operações / s ± 1,2% para a resposta mais votada.
  • Criado com o JSBench.me no Google Chrome 57.


Se você estiver interessado no desempenho de alguns métodos diferentes postados:

Aqui estão os métodos mais rápidos baseados neste teste jsperf (ordenado do mais rápido para o mais lento).

Como você pode ver, os dois primeiros métodos são essencialmente comparáveis ​​em termos de desempenho, enquanto alterar o String.prototype é de longe o mais lento em termos de desempenho.

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


Aqui está uma versão abreviada da resposta popular que obtém a primeira letra tratando a string como uma matriz:

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

Atualizar:

De acordo com os comentários abaixo, isso não funciona no IE 7 ou abaixo.

Atualização 2:

Para evitar undefined para strings vazias (veja o comentário do @ njzk2 abaixo ), você pode checar uma string vazia:

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

Capitalize a primeira letra de todas as palavras em uma string:

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

Finalize esta solução:

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

Para outro caso, preciso capitalizar a primeira letra e diminuir o resto. Os seguintes casos me fizeram mudar essa função:

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

Poderíamos obter o primeiro caractere com um dos meus favoritos RegExp , parece um smiley fofo: /^./

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

E para todos os viciados em café:

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

... e para todos os caras que pensam que há uma maneira melhor de fazer isso, sem estender os protótipos nativos:

var capitalize = function (input) {
  return input.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

Se você estiver querendo reformatar o texto em maiúsculas, talvez queira modificar os outros exemplos da seguinte forma:

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

Isso garantirá que o seguinte texto seja alterado:

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

Se você usar underscore.js ou Lo-Dash , a biblioteca underscore.string fornecerá extensões de string, incluindo capitalize:

_.capitalize (string) Converte a primeira letra da string em maiúscula.

Exemplo:

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

Uma abordagem mais orientada a objetos:

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

E depois:

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

Esta é a solução 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


Você pode fazer isso em uma linha como essa

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

A ucfirstfunção funciona se você fizer assim.

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

Obrigado JP pelo aclaramento.


No CoffeeScript , adicione ao protótipo de uma string:

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

Uso seria:

"woobie".capitalize()

Quais os rendimentos:

"Woobie"

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

Uso:

capitalizedString = someString.capitalize();

Esta é uma string de texto => Esta é uma string de texto


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

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

Atualização de novembro de 2016 (ES6), apenas para diversão:

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

então capitalize("hello") // Hello


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

Algumas outras respostas modificam String.prototype (esta resposta também é usada), mas eu aconselharia contra isso agora devido à capacidade de manutenção (difícil de descobrir onde a função está sendo adicionada ao prototype e poderia causar conflitos se outro código usa o mesmo nome / um navegador adiciona uma função nativa com o mesmo nome no 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