Captilizar a primeira letra de uma string em JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Captilizar a primeira letra de uma …
Kirill Ibrahim 15 fevereiro 2024
JavaScript JavaScript String
  1. Use os métodos toUpperCase() e slice() para captilizar a primeira letra em JavaScript
  2. Utilize toUpperCase() Com charAt() para Captilizar a Primeira Carta em JavaScript
  3. Utilize toUpperCase() e replace() para Captilizar a Primeira Letra em JavaScript
Captilizar a primeira letra de uma string em JavaScript

Há uma série de maneiras de capitalizar a primeira letra da string em JavaScript.

Por exemplo:

  • "this is an example" -> "This is an example"
  • "the Atlantic Ocean" -> "The Atlantic Ocean"

Use os métodos toUpperCase() e slice() para captilizar a primeira letra em JavaScript

O método toUpperCase() transforma todas as letras numa string em maiúsculas; utilizá-lo-emos em combinação com outras funções JavaScript para atingir o nosso objectivo desejado.

O método slice(start,end) extrai uma secção de uma string e devolve-a como uma nova string.

O start é o parâmetro requerido. É a posição onde se começa a cortar a string.

end é opcional. É a posição onde se deve terminar a string de corte. Se omitido, slice() termina no fim da string.

Exemplo:

<!DOCTYPE html>   
<html>   
    <head>  
        <title></title> 
    </head>  
        
    <body style = "text-align:center;">     
          
        <input id = "input" type="text" name="input"/>  
        <button onclick="capitalizeString()">  
            Capitalize 
        </button>  
        <h3 id = "modified-string" > 
        </h3> 
            
        <script>  
         
        function capitalizeString() {
          let input = document.getElementById("input"); 
          let headingElement = document.getElementById("modified-string"); 
          let string = input.value; 
          headingElement.innerHTML = string[0].toUpperCase() +  
            string.slice(1); 
        } 
        </script>  
    </body>   
</html>

Resultado:

JavaScript captiliza a primeira letra de uma string

Outro exemplo:

// shortened version
function capitalize(sentence) {
  return sentence && sentence[0].toUpperCase() + sentence.slice(1);
}

Utilize toUpperCase() Com charAt() para Captilizar a Primeira Carta em JavaScript

O método charAt() devolve o carácter do índice especificado numa string. O índice começa em 0.

Exemplo:

// We will use the same html above
function capitalizeString() {
  let input = document.getElementById('input');
  let headingElement = document.getElementById('modified-string');
  let string = input.value;
  headingElement.innerHTML = string.charAt(0).toUpperCase() + string.slice(1);
  ;
}

Utilize toUpperCase() e replace() para Captilizar a Primeira Letra em JavaScript

O replace() é um método inbuilt em JavaScript que procura na string dada um valor especificado ou um padrão de expressão regular, substitui-a, e devolve uma nova string.

JavaScript replace() Syntax:

string.replace(paramA, paramB)

Aqui, o paramA é um valor ou expressão regular, e o paramB é um valor para substituir o paramA por.

Nota: A string original permanecerá inalterada, e o valor devolvido é uma nova string com itens substituídos.

Exemplo rápido no método replace():

function replaceFunction() {
  let str = 'Google Event';
  let res = str.replace('Google', 'Microsoft');
  console.log(res)
}
replaceFunction();

function replaceAllFunction() {
  let str = 'Google Event will be in Headquarters of Google';
  let res = str.replace(/Google/g, 'Microsoft');
  console.log(res)
}
replaceFunction();

Nota: o método replace() apenas substitui a primeira instância por padrão. Devemos usar o modificador global de expressão regular (g) para substituir todas as ocorrências.

Exemplo:

// We will use the same html above
function capitalizeString() {
  let input = document.getElementById('input');
  let headingElement = document.getElementById('modified-string');
  let string = input.value;
  headingElement.innerHTML = string.replace(/^./, string[0].toUpperCase());
}

/^./ representa a primeira letra da string. Leia mais sobre expressões regulares no RegExp Tutorial e no RegExp Object Reference.

Artigo relacionado - JavaScript String