JavaScript: Como Deixar A Primeira Letra Maiúscula Em Uma String

Neste artigo vamos aprender a deixar a primeira letra maiúscula de uma string utilizando a linguagem Javascript de uma forma simples e rápida.

Geralmente quando estamos fazendo tratamento de uma string com o nome de uma pessoa, precisamos garantir que a primeira letra seja maiúscula.

Dessa forma o nosso software fica muito mais assertivo e confiável. Enfim, existem diversos cenários que precisamos garantir que a primeira letra seja maiúscula.

Portanto, recomendo prestar muita atenção nesse artigo pois preparamos ele para realmente te ajudar.

Separando a Primeira Letra

Nesta primeira parte do exemplo, vamos separar a primeira letra do nome para poder mudar ela para maiúscula.

Podemos fazer isso da seguinte forma:

const str = 'david';
const capitalized = str[0].toUpperCase() + str.substr(1); // David

No código acima, nós pegamos a primeira letra através do str[0]. Você também poderia fazer isso usando o str.charAt(0).

Em seguida fazemos a conversão dessa letra que separamos usando o método toUpperCas().

Por fim, concatenamos com a mesma string e removemos a primeira letra usando o substr(1).

Veja também: Vale a pena investir no curso de JavaScript do OneBitCode?

Melhorando o código

Para deixar o nosso código ainda mais profissional e reutilizável, podemos criar um método no objeto String para que possamos deixar a primeira letra maiúscula.

Podemos fazer isso dessa forma:

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

Após isso, podemos chamar a função acima da seguinte forma:

'david'.capitalize(); // David

Além disso podemos também criar uma função independente:

const capitalize = str => {
	if (typeof str !== 'string') {
		return '';
	}
	return str.charAt(0).toUpperCase() + str.substr(1);
}

Neste exemplo podemos chamar a função acima dessa forma:

capitalize('david'); // David

Bônus: Primeira letra maiúscula com CSS

Dependendo do nosso projeto podemos precisar deixar a primeira letra maiúscula usando o CSS.

Normalmente utilizamos isso apenas para fins estéticos, caso isso seja a sua necessidade você pode fazer da seguinte forma:

.capitalized {
	text-transform: capitalize;
}

E ai no HTML, basta utilizar a classe capitalized conforme exemplo abaixo.

<p class="capitalized">david</p>  <!-- David -->

Veja também: Vale a pena investir no curso de JavaScript do OneBitCode?

Conclusão

Neste artigo vimos algumas formas interessantes de mudar a primeira letra de uma string para maiúscula. Além disso, ensinamos de bônus como fazer isso usando o CSS.

Ou seja, dependendo da sua necessidade você pode fazer esse tratamento de string utilizando tanto o Javascript quando o CSS.

Bem legal né?

Clique no botão abaixo para acessar mais de 1400 cursos completos e com certificado válido.

ACESSAR CURSOS COM CERTIFICADO

Invista em você e conquiste uma excelente carreira profissional na área da tecnologia.

Enfim, espero que tenha gostado deste conteúdo pois preparamos ele para realmente te ajudar em seus estudos sobre desenvolvimento de software.

Eu vou ficando por aqui…

Até a próxima e um forte abraço!

Tags: javascript | primeira letra maiuscula | tutorial javascript