How to transform character case of a string in JavaScript

In this tutorial, you will learn how to transform a string’s character case (to uppercase, lowercase, and title case) using native JavaScript methods.

JavaScript provides many functions and methods that allow you to manipulate data for different purposes. We recently looked at methods for converting a string to a number and a number to a string or an ordinal, and for splitting strings. This article will present methods to transform the character case of a string – which is useful for representing strings in a certain format or for reliable string comparison.

Convert a string to lowercase

If you need your string in lowercase, you can use the toLowerCase() method available on strings. This method returns the string with all its characters in lowercase.

For instance:

const str = 'HeLlO';
console.log(str.toLowerCase()); 
console.log(str); 

Using toLowerCase() method on the str variable, you can retrieve the same string with all lowercase characters. Note that a new string is returned without affecting the value of str.

Convert a string to uppercase

If you need your string in uppercase, you can use the toUpperCase() method available on strings. This method returns the string with all its characters in uppercase.

For instance:

const str = 'HeLlO';
console.log(str.toUpperCase()); 
console.log(str); 

Using toUpperCase() method on the str variable, you can retrieve the same string with all uppercase characters. Note that a new string is returned without affecting the value of str.

Turn a string into title case

The most common use case for transforming the case of a string is to transform it into title case. This can be used to display names and titles.

there are different ways to do this. One way is to use the method toUpperCase() on the first character of the string, then concatenating it with the rest of the string. For instance:

const str = 'hello';
console.log(str[0].toUpperCase() + str.substring(1).toLowerCase()); 

In this example, you retrieve the first character using the 0 index on the str variable. Then you make it uppercase using the toUpperCase() method. Finally, you retrieve the rest of the string using the substr() method and concatenate the rest of the string to the first letter. You apply toLowerCase() on the rest of the string to make sure it’s lowercase.

This only makes the first letter of the word uppercase. However, in some cases, if you have a sentence, you might want to capitalize every word in the sentence. In this case, it is better to use a function like this:

function toTitleCase (str) {
  if (!str) {
    return '';
  }
  const strArr = str.split(' ').map((word) => {
    return word[0].toUpperCase() + word.substring(1).toLowerCase();
  });
  return strArr.join(' ');
}

const str = 'hello world';
console.log(toTitleCase(str)); 

The toTitleCase() The function accepts one parameter, which is the string to transform into title case.

In the function you first check if the string is empty and in this case return an empty string.

Then you split the string on the space delimiter, which returns an array. After that, you use the map method on the array to apply the transformation you saw in the previous example to each element of the array. This turns every word into a title case.

Finally, you join the array elements into a string by the same space delimiter and return it.

Live Example

In the following CodePen demo you can try out the features of toLowerCase() and toUpperCase(). When you enter a string in the input, it is converted to uppercase and lowercase and displayed. You can try using characters with different case in the string.

See the pen
Transform character case of a string in JavaScript by SitePoint (@SitePoint)
on CodePen.

Changing character case for string comparison

In many situations you will need to compare strings before executing a block of code. If you cannot control the character case in which the string is written, performing a comparison on the string without applying the character case may lead to unexpected results.

For instance:

const input = document.querySelector('input[type=text]');
if (input.value === 'yes') {
  alert('Thank you for agreeing!');
} else {
  alert('We still like you anyway')
}

If the user enters in the input Yes instead of yesthe equality condition will fail and the bad alert will be displayed.

You can solve this problem by applying character case to the string:

const input = document.querySelector('input[type=text]');
if (input.value.toLowerCase() === 'yes') {
  alert('Thank you for agreeing!');
} else {
  alert('We still like you anyway')
}

Conclusion

It is necessary to learn how to transform the character case of a string in JavaScript. You will often need to use it for many use cases, like displaying the string in a certain format. You can also use it to compare strings reliably.

Applying character case to the strings you compare ensures that you can check whether the contents of the strings are equal, regardless of how they are written.

If you found this article helpful, you may also benefit from the following:

Comments are closed.