¿Cómo convertir la primera letra de una string en mayúscula en JavaScript?

Hay varias formas de poner en mayúscula la primera letra de la string en JavaScript . Las siguientes son las formas:

toUpperCase() :
esta función se aplica en una string y cambia todas las letras a mayúsculas.
Sintaxis:
```
string.toUpperCase()
```
Valor de retorno: esta función devuelve la string en mayúsculas.
slice() :
esta función se aplica a una string y la corta de acuerdo con el parámetro pasado.
Sintaxis:
```
string.slice(start, end)
```
- inicio: Este parámetro es obligatorio. Especifica la posición donde comenzar el corte. La indexación comienza en la posición 0.
- fin: Este es un parámetro opcional. Especifica la posición desde donde terminar el corte (sin incluir el final). Si se omite este parámetro, selecciona todos los caracteres desde el inicio.
Valor de retorno: esta función devuelve la string cortada.
charAt() :
esta función charAt() devuelve el carácter en la posición dada en la string.
Sintaxis:
```
string.charAt(index)
```
Valor de retorno: esta función devuelve el carácter en la posición especificada en la string.
replace() :
esta es una función integrada en JavaScript que se usa para reemplazar una porción de una string con otra string o una expresión regular. La string original no se verá afectada.
Sintaxis:
```
str.replace(A, B)
```
Parámetros: aquí el parámetro A es una expresión regular y B es una string que reemplazará el contenido de la string dada.
Valor de retorno: Devuelve una nueva string con elementos reemplazados.

Ejemplo 1:

<!DOCTYPE html>  
<html>  
    <head> 
        <title></title>
    </head> 
        
    <body style = "text-align:center;">  
    
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1>  
          
        <input id = "input" type="text" name="input"/> 
        <button onclick="capitalizeFLetter()"> 
            Click to capitalize
        </button> 
        <h3 id = "div" style="color: green">
        </h3>
            
        <script> 
         
        function capitalizeFLetter() {
          var input = document.getElementById("input");
          var x = document.getElementById("div");
          var string = input.value;
          x.innerHTML = string[0].toUpperCase() + 
            string.slice(1);
        }
        </script> 
    </body>  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Ejemplo 2: Este ejemplo usa el método slice() para convertir la primera letra de una string en mayúscula.

<!DOCTYPE html>  
<html>  
    <head> 
        <title></title>
    </head> 
        
    <body style = "text-align:center;">  
    
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1>  
            
        <input id = "input" type="text" name="input"/> 
        <button onclick="capitalizeFLetter()"> 
            Click to capitalize
        </button> 
        <h3 id = "div" style="color: green">
        </h3>
            
        <script> 
         
        function capitalizeFLetter() {
          var input = document.getElementById("input");
          var x = document.getElementById("div");
          var string = input.value;
          x.innerHTML = string.charAt(0).toUpperCase() +
           string.slice(1);
        }
        </script> 
    </body>  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Ejemplo 3: Este ejemplo usa el método string.replace() para convertir la primera letra de una string en mayúscula.

<!DOCTYPE html>  
<html>  
    <head> 
        <title></title>     
    </head> 
        
    <body style = "text-align:center;">  
    
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1>       
        <input id = "input" type="text" name="input"/> 
        <button onclick="capitalizeFLetter()"> 
            Click to capitalize
        </button> 
        <h3 id = "div" style="color: green">
        </h3>
            
        <script> 
         
        function capitalizeFLetter() {
          var input = document.getElementById("input");
          var x = document.getElementById("div");
          var string = input.value;
          x.innerHTML = 
           string.replace(/^./, string[0].toUpperCase());
        }
        </script> 
    </body>  
</html>

Producción:

Antes de hacer clic en el botón:
Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta