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

Understanding String.toUpperCase()

The string.toUpperCase() method is used to convert a string into upper case letters. So, if we pass the string hello, my name is john doe through the string.toUpperCase method, it should return HELLO, MY NAME IS JOHN DOE as the output.

Note: The method simply returns the string in upper case letters but doesn't change the original string. Our example shall make this clear.

Syntax

string.toUpperCase()

Example

Let's check with our string hello my name is john doe how this works.

let sentence = 'hello my name is john doe'; 

we assigned our string to a variable called sentence

let upperCase = sentence.toUpperCase();

we declared a new variable upperCase and assigned the return value of the method to it.

Now let's print this to the console and see the result.

console.log(upperCase);

The output comes as expected,

HELLO MY NAME IS JOHN DOE

We can simply output the result without the need for declaring a new variable too, check the code below in case you need to simply output a given string into UPPERCASE letters.

let sentence = "hello my name is john doe";
console.log(sentence.toUpperCase());

The output is still the same,

HELLO MY NAME IS JOHN DOE

Let's try to see if this method affects our original string variable.

let sentence = "hello my name is john doe";
let upperCase = sentence.toUpperCase();
console.log(upperCase, sentence);

The output comes to

HELLO MY NAME IS JOHN DOE hello my name is john doe

As is clear from the above example, this method simply returns a value but doesn't alter the string in question.

Exceptions for String.toUpperCase() method

This method shall work on all strings but what if the input is not string. If we try this method with, let's say a number or a boolean value like true or if we simply used an undefined variable, it shall give a type error.

Clearly, the uses for this method are countless. If we are dealing with strings, we could use this method and get our inputs converted into UPPERCASE letters with ease. This method can work in conjunction with a for loop and we can even convert the string elements of an array into UPPERCASE letters.

Check the code below and try it in your browsers.

const sampleArray = ['newyork', 'ottawa', 'toronto', 'washington dc']
sampleArray.forEach(element => console.log(element.toUpperCase()));

Understanding String.toLocaleUpperCase()

The String.toLocaleUpperCase() method returns a string input after converting it to either a default or a specified locale.

Let's first try to understand what Locale means.

The Merriam-Webster dictionary defines locale as 'a place or locality especially when viewed in relation to a particular event or characteristic'. So, in Javascript that would translate to the locale/locality of the host server by default or any other user-defined locale (like "en-US", "en-CA").

Syntax

String.toLocaleUpperCase()

Examples

Let's look at a few examples to see how String.toLocaleUpperCase() method works.

let language = 'turkish';//#1
console.log(language.toLocaleUpperCase());//#2
console.log(language.toLocaleUpperCase('en-CA'));//#3
console.log(language.toLocaleUpperCase('TR'));//#4

Before we look at the output of this code, let's try to understand what it does.
#1 assigns the string value 'turkish' to the variable language.
#2 prints out the uppercase version of 'turkish' in the locale of the host server(let's assume we are working in the US, so the locale is "en-US" or American English).
#3 prints out the uppercase version of 'turkish' in the user-specified Canadian English locale.
#4 prints out the uppercase version of 'turkish' in the user-specified Turkish locale.

The output shall look like this

TURKISH TURKISH TURKİSH

Notice something different with the output of #4? The dot on the I is due to the fact that we selected to convert the string into the Turkish locale and the capital I in Turkish is written as İ.

We can also pass an array of locales through this method and it shall use the best available locale.

Exceptions for String.toLocaleUpperCase() method

This method just like the String.toUpperCase() method shall work on all strings but if the input is number, boolean or an undefined variable, it shall give a type error.

String.toUpperCase() vs String.toLocaleUpperCase()

Now that we saw the usage of both the String.toUpperCase() as well as the String.toLocaleUpperCase() methods, let's look at the differences in between them.
The String.toUpperCase() is not locale specific, so it does not expect any input for the locale. However, even though by default the String.toLocaleUpperCase() method doesn't demand a value to be passed, it is still working and converting letters as per a locale.

So, practically, for a user using a locale that has all the UPPERCASE alphabets looking like the english alphabets, both these methods shall give the same output and the user can use these methods interchangeably.

However, if we are working on a language like Turkish or any other language that has characters looking like 'GESÄSS', we will need to use the String.toLocaleUpperCase() method.

For detailed information on these methods, please refer the MDN Web Docs for String.prototype.toUpperCase() and String.prototype.toLocaleUpperCase() methods.