How to Use the toUpperCase() Method in JavaScript

JavaScript’s toUpperCase() method converts a string object into a new string consisting of the contents of the first string, with all alphabetic characters converted to be upper-case (i.e. capitalized).

Note: JavaScript strings are immutable. This means that upon completion of the call to toUpperCase, your code will have two strings present in memory – the original string, and the converted string – even though the root variable is no longer pointing at the old string, it is retained in memory.

const str = 'Hello World!';
console.log(str.toUpperCase());  // expected output: HELLO WORLD!

Syntax

The toUpperCase() method is called on a String object as follows:

String.toUpperCase()

Note: this method takes no parameters.

Capital letters remain as they originally appeared in the base string. In the above example, the characters “H” and “W” are unchanged.

Similarly, this method has no effect on digits and special characters, such as the “!” character at the end of our string. These character types are placed into the same location in the converted string.

Tip: If you want to convert all letters in a string to lowercase instead, use the similar toLowerCase() method.

Applying toUpperCase() on non-string arguments

According to MDN, if the value of the object being manipulated is not a String, then the object will be converted into a string.

To ensure these cases function properly and provide meaningful results, you’ll want to set the this property by using the call() or apply() methods.

const num = 1;
console.log(String.prototype.toUpperCase.call(typeof (num)));
// expected output: NUMBER
console.log(String.prototype.toUpperCase.apply(true));
// expected output: TRUE

How to convert only the first letter of a string

Converting just the first letter of a string to an equivalent uppercase value requires three steps:

1. Locate the first letter and call toUpperCase() on it specifically
2. Trim the first character off the remainder of the string, producing a new string without the first character
3. Combine the two strings together

The first part of this is easy, simply use the index of the first character of the string (using substring notation [0]), and capitalize it by applying toUpperCase().

For the second part use the substring() method to produce a string that consists of all the characters but the first.

The third step is just simple concatenation – combine the two strings together using the + operator.

Below is an example of how to accomplish this in JavaScript:

const str = 'welcome friend'’;
const firstToUC = str[0].toUpperCase() + str.substring(1);
console.log(firstToUC);
// expected output: Welcome friend

As we can see above, we pull off the first character (‘w’), convert it to uppercase, then combine it with a substring of the str variable, storing the results into variable firstToUC.

Making the first letter of every word in a string upper-case

The previous technique lets us easily capitalize the first character in a string, but what if we want to capitalize each word in the string instead? This can be done with a just a few more steps:

Let’s work with the following string:

const str = 'welcome friend, i am so glad to see you!';

To capitalize every word in this string, follow these steps:

1. First, separate every word.

We can do this using the split() method. split takes a string object, and splits it based on a provided character. In this case, we pass the empty space character (‘ ‘) as the value to perform the split on.

This will return an array of all of the words in our original string, along with their special characters and digits. In essence, there will be an entry in the array for every part of the string that is separated by a space character.

const strToArr = str.split(' ');
console.log(strToArr); 
// expected output: ["welcome", "friend,", "i", "am", "so", "glad", "to", "see", "you!"]

Note: While most of these tokens are words as expected, the comma after “friend” and the exclamation mark after “you” are taken as part of the word. This is because we asked split() to separate values according to blank spaces.

2. Iterate through the array.

The next step involves cycling through the array and working with each individual string. There are numerous ways to achieve that, our example below does this by applying the map() method.

3. Uppercase every first character.

To achieve this, simply use the same method from the previous section – grab the first character of every string using the first index ([0]), then combine them with the remainder of the string pulled from the substring() method.

const allFirstToUC = strToArr.map(word => word[0].toUpperCase() + word.substring(1));
console.log(allFirstToUC);
// expected output: ["Welcome", "Friend,", "I", "Am", "So", "Glad", "To", "See", "You!"]

4. Finally, recombine the array into a single string.

The final step consists of putting the array of substrings back together, re-inserting the space characters that were removed by the split(). We accomplish this using the join() method. The join() method takes a character to interject into the array of substrings, and uses that character to combine the array elements back into a single string. To get our sentence structure back, we pass in the empty space character as a parameter: join(‘ ‘).

const newStr = allFirstToUC.join(' ')
console.log(newStr);
// expected output: Welcome Friend, I Am So Glad To See You!

With that, we’ve successfully capitalized the first letter of each word in our string – mission accomplished!

Related Links:

JavaScript – How to Use The Array map() Method

JavaScript – How to Use The Array forEach() Method

JavaScript – Array to String