How to Transform the Character Case of a String in JavaScript

In this tutorial, you’ll learn how to change the character case of a string to uppercase, lowercase, and title case – using basic JavaScript methods.

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

convert a string to lowercase

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

For example:

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

by using toLowerCase() on method str variable, you can have the same string with all the characters in lowercase. 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 toUpperCase() The method is available on Strings. This method returns a string with all its characters in uppercase.

For example:

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

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

convert a string to title case

The most common use case for changing the case of a string is changing it to title case. It can be used to display name and title.

There are various 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 example:

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

In this example, you retrieve the first character by using 0 on the index str Char. Then, you convert it to uppercase by using toUpperCase() way. Finally, you retrieve the rest of the string using substr() method and append the rest of the string to the first character. you apply toLowerCase() on the rest of the string to make sure it’s in lowercase.

This only converts the first letter of the word to uppercase. However, in some cases if you have a sentence, you may want to uppercase each word in the sentence. In that case, it’s 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)); 

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

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

Then, you split the string on the space delimiter, which returns an array. Then, you use the map method on the array to apply the transformation seen in the previous example to each item in the array. Converts each word to title case.

Finally, you join the items in the array into a string separated by a single space delimiter and return it.

live example

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

see pen
Transform character case of a string in Javascript
by sitepoint (@SitePoint,
Feather codepen,

Convert 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 being written, then performing comparisons on strings without character case being enforced can lead to unexpected results.

For example:

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 the input Yes Instead yesThe equality condition will fail and a false warning will appear.

You can solve this 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 important to learn how to change the character case of a string in JavaScript. You’ll often need to use this for many use cases, such as displaying a string in a certain format. You can also use it to reliably compare strings.

Applying a character case to the strings you are comparing ensures that you can check whether the contents of the strings are the same regardless of how they are written.

If you found this article useful, you may also enjoy the following:

Leave a Reply