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
For the Hosts Locale how to convert a string to uppercase letters in JavaScript?
In this tutorial, we will learn how to convert a string to uppercase letters for the host's locale in JavaScript.
While using a locale language to write for a website, we might have to convert the sentence from lowercase to uppercase without changing the structure of the string.
Using the toLocaleUpperCase() Method
In JavaScript, we use the toUpperCase() method as well as the toLocaleUpperCase() to change the letters of a string to uppercase. Although both methods give similar output, the toLocaleUpperCase() is used primarily for local languages and handles locale-specific character mappings correctly.
Syntax
We will use the following syntax to convert the letters of the entire string to uppercase letters.
string.toLocaleUpperCase(); string.toLocaleUpperCase(locale);
Here string is the string whose letters are to be converted to uppercase, and locale is an optional parameter specifying the locale to use.
Basic Example
In the below given example, we have created a string and used the toLocaleUpperCase() method to convert the letters to uppercase.
<html>
<body>
<div id="upperString"></div>
<script>
let wordString = "JavaScript String";
document.getElementById('upperString').innerHTML = wordString.toLocaleUpperCase();
</script>
</body>
</html>
JAVASCRIPT STRING
Specifying the Locale
In JavaScript, the toLocaleUpperCase() method will use the default locale to change the letters to uppercase if we don't specify any locale language. However, you can specify a particular locale for more precise character handling.
Example with Different Locales
In the below given example, we have created strings in different languages and specified the locale language within the toLocaleUpperCase() method.
<html>
<body>
<h3>French String:</h3>
<div id="french"></div>
<h3>Spanish String:</h3>
<div id="spanish"></div>
<h3>Turkish Example (important difference):</h3>
<div id="turkish"></div>
<script>
// French string
let frString = "Ceci est une chaîne française.";
document.getElementById('french').innerHTML = frString.toLocaleUpperCase('fr-FR');
// Spanish string with variable locale
let locale = 'es';
let spanish = "Esta oración está en español.";
document.getElementById('spanish').innerHTML = spanish.toLocaleUpperCase(locale);
// Turkish example showing locale importance
let turkishString = "istanbul";
document.getElementById('turkish').innerHTML =
"Default: " + turkishString.toUpperCase() + "<br>" +
"Turkish locale: " + turkishString.toLocaleUpperCase('tr-TR');
</script>
</body>
</html>
French String: CECI EST UNE CHAÎNE FRANÇAISE. Spanish String: ESTA ORACIÓN ESTÁ EN ESPAÑOL. Turkish Example (important difference): Default: ISTANBUL Turkish locale: ?STANBUL
Key Differences from toUpperCase()
The main advantage of toLocaleUpperCase() over toUpperCase() is its ability to handle locale-specific character mappings. For example, in Turkish, the lowercase "i" converts to "?" (with a dot) rather than "I".
| Method | Locale-aware | Turkish "i" ? "?" |
|---|---|---|
toUpperCase() |
No | No |
toLocaleUpperCase() |
Yes | Yes (when tr-TR specified) |
Conclusion
The toLocaleUpperCase() method is essential for international applications where proper character mapping matters. Use it with specific locale parameters for accurate uppercase conversion in different languages.
385 Views
