Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to convert a string into upper case using JavaScript?
In JavaScript, converting strings to uppercase is a common task needed for data validation, form processing, and ensuring consistent text formatting. JavaScript provides a built-in method for this purpose, and you can also create custom implementations to understand the underlying mechanism.
This tutorial covers different approaches to convert strings to uppercase, from the standard built-in method to creating custom functions for educational purposes.
Using the String toUpperCase() Method
The toUpperCase() method is the most straightforward way to convert strings to uppercase. It's a built-in JavaScript method that works on any string value and returns a new string with all characters converted to uppercase.
Syntax
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
Here's a complete example showing how to use toUpperCase() with different types of strings, including date objects:
<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>
The toUpperCase() method preserves special characters and numbers while converting only alphabetic characters to uppercase.
Creating a Custom Function
Understanding how toUpperCase() works internally can be valuable for interviews and learning purposes. Here's how you can implement uppercase conversion from scratch using ASCII values.
Algorithm
Step 1 ? Iterate through each character in the string using a loop.
Step 2 ? Get the ASCII value of each character. If the value is between 97 and 122 (lowercase letters), subtract 32 to convert to uppercase.
Step 3 ? If the character is already uppercase or a special character, append it unchanged.
Syntax
for (let char of string) {
let value = char.charCodeAt();
if (value >= 97 && value <= 122) {
upperCaseString += String.fromCharCode(value - 32);
} else {
upperCaseString += char;
}
}
Example
Here's a complete implementation of the custom uppercase conversion function:
<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 lowercase
if (value >= 97 && value <= 122) {
upper += String.fromCharCode(value - 32);
} else {
// if character is already upper case, or special character append it as it is.
upper += character;
}
}
output1.innerHTML = upper;
</script>
</body>
</html>
Comparison of Methods
| Method | Code Length | Performance | Use Case |
|---|---|---|---|
toUpperCase() |
1 line | Optimized | Production applications |
| Custom function | 10+ lines | Slower | Learning and interviews |
Conclusion
Use the built-in toUpperCase() method for production applications as it's optimized and concise. The custom implementation approach is valuable for understanding string manipulation concepts and preparing for technical interviews.
2K+ Views
