Como faço para que a primeira letra de uma string seja maiúscula em JavaScript?

Como faço para que a primeira letra de uma string seja maiúscula, mas não altero 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"

A solução básica é:

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

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

Algumas outras respostas são modificadas String.prototype(essa resposta também costumava ser), mas eu não recomendaria isso agora, devido à capacidade de manutenção (difícil de descobrir onde a função está sendo adicionada prototypee pode causar conflitos se outro código usar o mesmo nome / navegador) adiciona uma função nativa com o mesmo nome no futuro).

... e, então, há muito mais nessa questão quando você considera a internacionalização, como mostra essa resposta surpreendentemente boa (enterrada abaixo).

Se você deseja trabalhar com pontos de código Unicode em vez de unidades de código (por exemplo, para manipular caracteres Unicode fora do Plano Multilíngue Básico), pode aproveitar o fato de que String#[@iterator]funciona com pontos de código e pode usar toLocaleUpperCasepara obter maiúsculas e minúsculas:

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

Para ainda mais opções de internacionalização, consulte a resposta original abaixo .

Aqui está uma abordagem mais orientada a objetos:

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

Você chamaria a função, assim:

"hello world".capitalize();

Com a saída esperada sendo:

"Hello world" 

Em CSS:

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

Aqui está uma versão abreviada da resposta popular que recebe 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 undefinedseqüências de caracteres vazias (consulte o comentário de @ njzk2 abaixo ), você pode verificar uma sequência de caracteres vazia:

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

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

Aqui estão os métodos mais rápidos com base 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);
}

Para outro caso, preciso que ela coloque em maiúscula a primeira letra e minúscula o restante. Os seguintes casos me fizeram mudar esta 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();

Esta é a solução 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 você já está (ou está pensando em usar) lodash, a solução é fácil:

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

_.upperFirst('FRED');
// => 'FRED'

_.capitalize('fred') //=> 'Fred'

Consulte os documentos: 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'

Baunilha js para a primeira letra maiúscula:

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

Coloque em maiúscula a primeira letra de todas as palavras em uma sequência:

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

Poderíamos conseguir o primeiro personagem 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 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();
  });
};

Usar:

var str = "ruby java";

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

Ele será exibido "Ruby java"no console.

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

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

Exemplo:

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

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

Atualize Nov.2016 (ES6), apenas por 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

MAIS CURTO 3 soluções, 1 e 2 casos punho quando sstring é "", 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()) );

Apenas CSS

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

• Apesar de ser chamado ::first-letter, ele se aplica ao primeiro caractere , ou seja, no caso de string %a, esse seletor se aplicaria %e, como tal a, não seria maiúsculo.
• No IE9 + ou IE5.5 +, ele é suportado em notação herdada com apenas dois pontos ( :first-letter).

ES2015 one-liner

Como existem inúmeras respostas, mas nenhuma no ES2015 que resolveria o problema original de forma eficiente, vim com o seguinte:

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

Observações

• parameters => functioné a chamada função de seta .
• Eu fui com o nome em capitalizeFirstCharvez de capitalizeFirstLetter, porque o OP não solicitou código que colocasse em maiúscula a primeira letra de toda a string, mas o primeiro caractere (se for letra, é claro).
• const nos dá a capacidade de declarar capitalizeFirstChar como constante, o que é desejado, pois como programador você deve sempre declarar explicitamente suas intenções.
• No benchmark que realizei, não houve diferença significativa entre string.charAt(0)e string[0]. Observe, no entanto, que string[0]seria undefinedpara uma string vazia, portanto, ela deve ser reescrita para string && string[0], que é muito detalhada, em comparação 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 ops / s ± 1,2% para a resposta mais votada.
• Criado com JSBench.me no Google Chrome 57.

Existe uma maneira muito simples de implementá-lo por substituição . Para ECMAScript 6:

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

Resultado:

'Foo'

Parece ser mais fácil no CSS:

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

Isto é da propriedade de transformação de texto CSS (na W3Schools ).

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

Não vi menção nas respostas existentes de questões relacionadas a pontos de código do plano astral ou à internacionalização. "Maiúsculas" não significa a mesma coisa em todos os idiomas usando um determinado script.

Inicialmente, não encontrei respostas abordando questões relacionadas aos pontos de código do plano astral. Há um , mas está um pouco enterrado (como este, eu acho!)

A maioria das funções propostas é assim:

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

No entanto, alguns caracteres em caixa ficam fora do BMP (plano multilíngue básico, pontos de código U + 0 a U + FFFF). Por exemplo, pegue este texto Deseret:

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

O primeiro caractere aqui falha ao capitalizar porque as propriedades de cadeias indexadas por matriz não acessam "caracteres" ou pontos de código *. Eles acessam unidades de código UTF-16. Isso também é verdade ao fatiar - os valores do índice apontam para as unidades de código.

Acontece que as unidades de código UTF-16 são 1: 1 com pontos de código USV em dois intervalos, U + 0 a U + D7FF e U + E000 a U + FFFF, inclusive. A maioria dos personagens incluídos se encaixa nesses dois intervalos, mas não em todos eles.

A partir do ES2015, lidar com isso ficou um pouco mais fácil. String.prototype[@@iterator]produz strings correspondentes aos pontos de código **. Então, por exemplo, podemos fazer isso:

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

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

Para seqüências mais longas, isso provavelmente não é muito eficiente *** - não precisamos iterar o restante. Poderíamos usar String.prototype.codePointAtpara chegar à primeira letra (possível), mas ainda precisaríamos determinar onde a fatia deveria começar. Uma maneira de evitar a repetição do restante seria testar se o primeiro ponto de código está fora do BMP; se não estiver, a fatia começará em 1 e, se estiver, a fatia começará em 2.

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

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

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

Você pode usar a matemática bit a bit em vez de > 0xFFFFlá, mas provavelmente é mais fácil entender dessa maneira e conseguiria a mesma coisa.

Também podemos fazer isso funcionar no ES5 e abaixo, levando essa lógica um pouco mais longe, se necessário. Não há métodos intrínsecos no ES5 para trabalhar com pontos de código, portanto, precisamos testar manualmente se a primeira unidade de código é uma substituta ****:

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("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

No início, também mencionei considerações sobre internacionalização. Algumas delas são muito difíceis de serem explicadas porque exigem conhecimento não apenas de qual idioma está sendo usado, mas também podem exigir conhecimento específico das palavras no idioma. Por exemplo, o dígrafo irlandês "mb" coloca em maiúscula como "mB" no início de uma palavra. Outro exemplo, o eszett alemão, nunca inicia uma palavra (afaik), mas ainda ajuda a ilustrar o problema. O eszett em minúsculas ("ß") coloca em maiúscula em "SS", mas "SS" pode em minúsculas em "ß" ou "ss" - é necessário conhecimento fora da banda do idioma alemão para saber qual é o correto!

O exemplo mais famoso desses tipos de questões, provavelmente, é o turco. No latim turco, a forma maiúscula de i é ©, enquanto a minúscula de I é i - são duas letras diferentes. Felizmente, temos uma maneira de explicar isso:

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

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

Em um navegador, a tag de idioma mais preferida do usuário é indicada por navigator.language, uma lista em ordem de preferência é encontrada em navigator.languagese um determinado idioma do elemento DOM pode ser obtido (geralmente) Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HEREem documentos em vários idiomas.

Nos agentes que oferecem suporte às classes de caracteres de propriedade Unicode no RegExp, introduzidos no ES2018, podemos limpar ainda mais as coisas expressando diretamente em quais caracteres estamos interessados:

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

Isso pode ser ajustado um pouco para também manipular letras maiúsculas em várias palavras com uma precisão bastante boa. A propriedade de caractere CWUou Changes_When_Uppercased corresponde a todos os pontos de código que, assim, mudam quando estão em maiúsculas. Podemos tentar isso com caracteres digigráficos com letras maiúsculas como o holandês ij, por exemplo:

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

No momento da redação deste artigo (fevereiro de 2020), o Firefox / Spidermonkey ainda não havia implementado nenhum dos recursos RegExp introduzidos nos últimos dois anos *****. Você pode verificar o status atual desse recurso na tabela de compatibilidade Kangax . Babel é capaz de compilar literais RegExp com referências de propriedades a padrões equivalentes sem eles, mas esteja ciente de que o código resultante pode ser enorme.

Com toda a probabilidade, as pessoas que fazem essa pergunta não se preocuparão com a capitalização ou internacionalização da Deseret. Mas é bom estar ciente desses problemas, porque há uma boa chance de que você os encontre eventualmente, mesmo que não sejam preocupações no momento. Eles não são casos extremos, ou melhor, não são casos extremos por definição - existe um país inteiro onde a maioria das pessoas fala turco, de qualquer maneira, e a confluência de unidades de código com pontos de código é uma fonte bastante comum de bugs (especialmente com em relação a emoji). Ambas as strings e a linguagem são bastante complicadas!

* As unidades de código do UTF-16 / UCS2 também são pontos de código Unicode no sentido de que, por exemplo, o U + D800 é tecnicamente um ponto de código, mas não é isso que "significa" aqui ... mais ou menos ... embora fique bonito difusa. O que os substitutos definitivamente não são, no entanto, são os USVs (valores escalares Unicode).

** Embora se uma unidade de código substituto for "órfã" - isto é, não faz parte de um par lógico - você ainda poderá obter substitutos aqui também.

*** talvez. Eu não testei. A menos que você tenha determinado que a capitalização é um gargalo significativo, eu provavelmente não a suoria - escolha o que você achar mais claro e legível.

**** Essa função pode desejar testar a primeira e a segunda unidades de código em vez de apenas a primeira, pois é possível que a primeira unidade seja uma substituta órfã. Por exemplo, a entrada "\ uD800x" colocaria em maiúscula o X como está, o que pode ou não ser esperado.

***** Aqui está a questão do Bugzilla, se você quiser acompanhar o progresso mais diretamente.

É sempre melhor lidar com esses tipos de coisas usando CSS primeiro , em geral, se você pode resolver algo usando CSS, faça isso primeiro e tente o JavaScript para resolver seus problemas. Portanto, nesse caso, tente usar :first-letterCSS e apliquetext-transform:capitalize;

Portanto, tente criar uma classe para isso, para que você possa usá-la globalmente, por exemplo: .first-letter-uppercasee adicione algo como abaixo no seu CSS:

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

Além disso, a opção alternativa é JavaScript, então o melhor será algo como isto:

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

e chame assim:

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 você deseja reutilizá-lo repetidamente, é melhor anexá-lo à String nativa do javascript, então algo como abaixo:

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

e chame como abaixo:

'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 você deseja reformatar o texto com letras maiúsculas, modifique os outros exemplos como:

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

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'

Aqui está uma função chamada ucfirst () (abreviação de "primeira letra maiúscula"):

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

Você pode colocar em maiúscula uma string chamando ucfirst ("some string") - por exemplo,

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

Ele funciona dividindo a corda em duas partes. Na primeira linha, ele extrai firstLetter e, na segunda linha, coloca em maiúscula firstLetter chamando firstLetter.toUpperCase () e o une ao restante da string, que é encontrada chamando str.substr (1) .

Você pode pensar que isso falharia em uma string vazia e, de fato, em um idioma como C, você teria que atender a isso. No entanto, no JavaScript, quando você pega uma substring de uma string vazia, você apenas recebe uma string vazia de volta.

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 sequência de texto => Esta é uma sequência de texto

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

Faça o checkout desta solução:

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

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

(Você pode encapsulá-lo em uma função ou até mesmo adicioná-lo ao protótipo String, se você o usar com frequência.)

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 pela aclaração.

Você pode fazer isso em uma linha como esta

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

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

Eu achei essa função de seta mais fácil. Substituir corresponde ao primeiro caractere da letra ( \w) da sua sequência e o converte em maiúsculas. Nada extravagante necessário.