JavaScript String toLowerCase() and toUpperCase()

In this post, we will discuss toLowerCase(),toUpperCase() methods in JavaScript Array.

toLowerCase()

The toLowerCase() method will convert all the characters in the string to lower case. It will not take any parameters.

Syntax:

array_name.toLowerCase()

Here, the 'array_name' is the name if the array.

Example 1:-

Let's create a string and convert it into lowercase.

CopiedCopy Code
<html>
<body>
<script>
// Create a string
const mystring="HELLO GKINDEX";
document.writeln("Actual String: "+mystring+"<br>");
// Convert the string to lowercase.
document.writeln("Final String: "+mystring.toLowerCase()+"<br>");
</script>
</body>
</html>

Output:

Actual String: HELLO GKINDEX
Final String: hello gkindex

We can see that the string is converted to lowercase.

Example 2:-

Let's create a string in lowercase and convert it into lowercase.

CopiedCopy Code
<html>
<body>
<script>
// Create a string
const mystring="hello gkindex";
document.writeln("Actual String: "+mystring+"<br>");
// Convert the string to lowercase.
document.writeln("Final String: "+mystring.toLowerCase()+"<br>");
</script>
</body>
</html>

Output:

Actual String: hello gkindex
Final String: hello gkindex

Example 3:-

Now we will create a button and onclick of it, the string will be converted to lowercase.

CopiedCopy Code
<html>
<body>
	<button onclick="click1()">Convert to lowercase</button>
	<p id="s1"></p>
<script>
	var string = "HELLO GKINDEX";
   document.getElementById("s1").innerHTML = string;
	function click1(){
		document.getElementById("s1").innerHTML = string.toLowerCase();
		}
    </script>	
</body>
</html>

Output:

hello gkindex

If we click the button, the string will be converted to lowercase.

toUpperCase()

The toUpperCase() method will convert all the characters in the string to upper case. It will not take any parameters.

Syntax:

array_name.toUpperCase()

Here, the 'array_name' is the name if the array.

Example 1:-

Let's create a string and convert it into uppercase.

CopiedCopy Code
<html>
<body>
<script>
// Create a string
const mystring="hello gkindex";
document.writeln("Actual String: "+mystring+"<br>");
// Convert the string to uppercase.
document.writeln("Final String: "+mystring.toUpperCase()+"<br>");
</script>
</body>
</html>

Output:

Actual String: hello gkindex
Final String: HELLO GKINDEX

We can see that the string is converted to uppercase.

Example 2:-

Let's create a string in uppercase and convert it into uppercase.

CopiedCopy Code
<html>
<body>
<script>
// Create a string
const mystring="HELLO GKINDEX";
document.writeln("Actual String: "+mystring+"<br>");
// Convert the string to uppercase.
document.writeln("Final String: "+mystring.toUpperCase()+"<br>");
</script>
</body>
</html>

Output:

Actual String: HELLO GKINDEX
Final String: HELLO GKINDEX

Example 3:-

Now we will create a button and onclick of it, the string will be converted to uppercase.

CopiedCopy Code
<html>
<body>
	<button onclick="click1()">Convert to uppercase</button>
	<p id="s1"></p>
<script>
	var string = "hello gkindex";
   document.getElementById("s1").innerHTML = string;
	function click1(){
		document.getElementById("s1").innerHTML = string.toUpperCase();
		}
    </script>	
</body>
</html>

Output:

HELLO GKINDEX

If we click the button, the string will be converted to uppercase.