How to convert a string into upper case using JavaScript?

This tutorial will teach us to convert the string into the upper case. In many governments, websites users have seen while filling forms, characters are automatically converted into the upper case to avoid any mistakes. It needs to do because JavaScript is a case-sensitive language, and if the user adds some characters in lower case and some in upper case, it can mismatch with the string stored in the database.

To get accurate data from the user, it is needful to convert the string to uppercase. Here, we will learn the different methods to convert the string into the upper case.

Using the String toUpperCase() Method

We can use the String toUpperCase() method to convert all string characters into the upper case. It is the JavaScript built-in string library method that we can apply only to the string. If users want to apply the toUpperCase() method on the variable with other data types, they need to convert it into the string.

For example, to apply the toUpperCase() method on the date string, users need to convert it into the string using the toString() method.

Syntax

Users can follow the syntax below to convert the lower case string using the toUpperCase() method.

let text = "Welcome To The TutorialsPoint!";
let upper = text.toUpperCase(); // returns upper case string.
let date = new Date().toString(); // convert date to string
let result = date.toUpperCase();

Example

In the below example, we have created the toUpperCase() string method to convert the string to the upper case. Also, we have created the data object and converted it to a string using the toString() method. After that, we have also converted the date string into the upper case string.

<html>
<head>
   <title>Convert string to upper case in JavaScript.</title>
</head>
<body>
   <h2>Convert string to upper case using <i> toUpperCase() </i> method.</h2>
   <h4>converting "tutorialspoint" to upper case. </h4>
   <div id = "output1"></div>
   <h4> converting date object string to upper case.</h4>
   <div id = "output2"></div>
   <script>
      let output1 = document.getElementById("output1");
      let output2 = document.getElementById("output2");
      let text = "TutorialsPoint";
      output1.innerHTML = text.toUpperCase();
      let date = new Date();
      let dateString = date.toString();
      output2.innerHTML += "Normal Date string is " + dateString + ".<br/>";
      output2.innerHTML += "Date in upper case is " + dateString.toUpperCase();
   </script>
</body>
</html>

In the above output, users can see that we have converted the date string in upper case, and toUpperCase() method doesn’t affects the special characters and numbers.

Create a Custom Function

It is fine to use the toUpperCase() method to convert the string into the upper case, but if you are a fresher or student, you need to know how that method works. The interviewer may ask questions like how to create a function to convert the string to upper case from scratch. Here is the answer to that question.

Syntax

Users can follow the below syntax to convert string to upper case.

for (let char of string) {
   let value = char.charCodeAt();
   if (value >= 97 && value <= 122) {
      upperCaseString += String.fromCharCode(value - 32);
   } else {
      upperCaseString += char;
   }
}

Users can follow the below algorithm for above syntax.

Algorithm

  • Step 1 − Use the loop to Iterate through every string character.

  • Step 2 − Get the ASCII character value; if it is between 97 and 122, do minus 32 from the ASCII value and generate a new character, which will be the upper case character of the current character.

  • Step 3 − If a character is already in upper case or special, append it to the string as it is.

Example

We have implemented the above algorithm to the string to convert it in the upper case using the custom function. We are storing the upper case string in a new string called upper and rendering it on the output.

<html>
<head>
   <title>Convert string to upper case in JavaScript.</title>
</head>
<body>
   <h2>Convert string to upper case by creating <i> custom </i> function.</h2>
   <h4>converting "@tutorialsPoint your welcome! @#%#! " to upper case.</h4>
   <div id = "output1"></div>
   <script>
      let output1 = document.getElementById("output1");
      let string = "@tutorialsPoint your welcome! @#%#! ";
      let upper = "";
      for (let character of string ) {
         
         // getting ASCII value of character
         let value = character.charCodeAt();

         // check if character is in uppercase
         if (value >= 97&& value <= 122) {
            upper += String.fromCharCode(value - 32);
         } else {
 
            // if character is in already upper case, or special character append it as it is.
            upper += character;
         }
      }
      output1.innerHTML = upper;
   </script>
</body>
</html>

If you are developing the applications, it is best to use the first approach as it takes a single line to implement, and the second approach takes 10+ lines. The second approach is only for the learning purpose of knowing how does the toUpperCase() method works.

Updated on: 08-Aug-2022

2K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements