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.

    1. 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

      
      

      Output:

      • Before clicking the button:
      • After clicking the button:
        • Example 2: 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.charAt(0).toUpperCase() +
                     string.slice(1);
                  }
                  </script
              </body>  
          </html>

          chevron_right

          
          

          Output: