On this tutorial, you’ll learn transform the character case of a string — to uppercase, lowercase, and title case — using native JavaScript methods.

JavaScript provides many functions and methods that let you manipulate data for various purposes. We’ve recently checked out methods for converting a string to a number and a number to a string or to an ordinal, and for splitting strings. This text will present methods for transforming the character case of a string — which is beneficial for representing strings in a certain format or for reliable string comparison.

Transform a String to Lowercase

For those who need your string in lowercase, you need to 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);

Through the use of toLowerCase() method on the str variable, you possibly can retrieve the identical string with all of the characters in lowercase. Notice that a recent string is returned without affecting the worth of str.

Transform a String to Uppercase

For those who need your string in uppercase, you need to 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);

Through the use of toUpperCase() method on the str variable, you possibly can retrieve the identical string with all of the characters in uppercase. Notice that a recent string is returned without affecting the worth of str.

Transform a String to Title Case

Probably the most common use case for transforming a string’s case is transforming it to title case. This might be used to display names and headlines.

There are other ways to do that. A method is through the use of the strategy toUpperCase() on the primary character of the string, then concatenating it to the remaining of the string. For instance:

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

In this instance, you retrieve the primary character using the 0 index on the str variable. Then, you transform it to uppercase using the toUpperCase() method. Finally, you retrieve the remaining of the string using the substr() method and concatinate the remaining of the string to the primary letter. You apply toLowerCase() on the remaining of the string to be certain that it’s in lowercase.

This only transforms the primary letter of the word to uppercase. Nevertheless, in some cases if you may have a sentence it is advisable to transform every word within the sentence to uppercase. In that case, it’s higher to make use of 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() function accepts one parameter, which is the string to remodel to title case.

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

Then, you split the string on the space delimiter, which returns an array. After that, you utilize the map method on the array to use the transformation you saw within the previous example on each item within the array. This transforms every word to title case.

Finally, you join the items within the array right into a string by the identical space delimiter and return it.

Live Example

In the next CodePen demo, you possibly can check out the functionality of toLowerCase() and toUpperCase(). While you enter a string within the input, it’s transformed to each uppercase and lowercase and displayed. You may try using characters with different case within the string.

See the Pen
Transform the Character Case of a String in JavaScript by SitePoint (@SitePoint)
on CodePen.

Changing Character Case for String Comparison

In lots of situations, you’ll need to check strings before executing a block of code. For those who can’t control the character case the string is being written in, performing comparison on the string without enforcing any character case can result in unexpected results.

For instance:

const input = document.querySelector(‘input[type=text]’);
if (input.value === ‘yes’) {
alert(‘Thanks for agreeing!’);
} else {
alert(‘We still such as you anyway’)
}

If the user enters within the input Yes as a substitute of yes, the equality condition will fail and the flawed alert will show.

You may resolve this by enforcing a personality case on the string:

const input = document.querySelector(‘input[type=text]’);
if (input.value.toLowerCase() === ‘yes’) {
alert(‘Thanks for agreeing!’);
} else {
alert(‘We still such as you anyway’)
}

Conclusion

It’s crucial to learn transform the character case of a string in JavaScript. You’ll often need to make use of it for a lot of use cases, similar to displaying the string in a certain format. It’s also possible to use it to reliably compare strings.

Enforcing a personality case on the strings you’re comparing ensures that you could check if the content of the strings are equal, no matter how they’re written.

For those who found this text useful, it’s possible you’ll also benefit from the following: