How to make first letter of a string uppercase in JavaScript ?

There are number of ways to capitalize the first letter of the string in JavaScript. Following are the ways:

  1. toUpperCase():
    This function applies on a string and change the all letters to uppercase.
    Syntax:

    string.toUpperCase()

    Return Value: This function returns the capitalized string.

  2. slice():
    This function applies on a string and slice it according to the passed parameter.
    Syntax:

    string.slice(start, end)
    • start: This parameter is required. It specifies the position where to begin the slicing. Indexing starts at position 0.
    • end: This is optional parameter. It specifies the position from where to end the slicing(without including the end). If this parameter is omitted, It selects all characters from start.

    Return Value: This function returns the sliced string.

  3. charAt():
    This charAt() function returns the character at given position in string.
    Syntax:

    string.charAt(index)

    Return Value: This function returns the character at specified position in string.

  4. replace():
    This is an built-in function in JavaScript which is used to replace a slice of a string with another string or a regular expression. Original string will not affected.
    Syntax:



    str.replace(A, B)

    Parameters: Here the parameter A is regular expression and B is a string which will replace the content of the given string.
    Return Value: It returns a new string with replaced items.

      5. Example 1: This example uses slice() method to make first letter of a string uppercase.

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      

      

      
                        filter_none
      

      

      

      

      Output: