String.prototype.toUpperCase() vs. String.prototype.toLocaleUpperCase()

Hi everyone!

In this tutorial i am going to show you the difference between the toUpperCase() and toLocaleUpperCase() method in a simple and easy way.

Those two methods act in a very similar way but has some difference between them. I am going to give you a description of how they work, and show you some practical examples of it.

We are going to start with the toUpperCase() method :

Description of toUpperCase()

The toUpperCase() method is pretty useful and it is used to convert a string value to uppercase. to use this method we use the string.toUpperCase syntax.

Example :

let variable = 'Hello everyone! this is an example'

console.log(variable.toUpperCase())

The expected output is going to be :

HELLO EVERYONE! THIS IS AN EXAMPLE

• So as we can see in this example, the toUpperCase() method just takes the string that we declared and changes it into a fully Uppercase value, Simple as that.

Note : toUpperCase() does not affect the original value that we declared. if we output the variable afterwards without the method it is still going to be displayed in lowercase.

Now that you have a basic understanding of the toUpperCase() method i am going to show you the toLocaleUpperCase() method :

Description of toLocaleUpperCase()

The toLocaleUpperCase() method is used to convert a lowercase string value into an uppercase value based on the locale-specific case mapping by example the alphabet used in this specific region. Or the user's browser settings.

to use this method, we use the string.toLocaleUpperCase('Locale-code')

Example :

let variable = 'this is another example'
console.log(variable.toLocaleUpperCase('en-CA'))
console.log(variable.toLocaleUpperCase('TR'))

• In this example we declared two toLocaleUppercase() methods one with a Canadian English case mapping and the other with a Turkish one.

The expected output is going to be :

THIS IS ANOTHER EXAMPLE //Canadian
THİS İS ANOTHER EXAMPLE //Turkish

• As we can see from this example the string value as been changed to uppercases and the value has also been converted to the local key mapping of Turkey, where the I becomes İ.

Note : For this method just like the other, it does not affect the original value of the variable. if we ever happen to display the string variable afterwards without the method, it will still be in lowercase

Conclusion

The string.toUpperCase() and the string.toLocaleUpperCase() methods are very similar. The string.toUpperCase() method converts the value into uppercase, while the string.toLocaleUpperCase() converts it into Uppercase but in the local key mapping of the region or the user's browser settings.

Now that you've hopefully learnt about this, you can go program like a champ!

Useful links

If you want to lean more about those two methods and the other methods concerning the string, here are some links :

1. .toLocaleUpperCase(), MDN link

2. .toUpperCase(), MDN link

3. Strings, and list of string methods, MDN

4. List of locale codes