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.
const str = 'HeLlO'; console.log(str.toLowerCase()); console.log(str);
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
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.
const str = 'HeLlO'; console.log(str.toUpperCase()); console.log(str);
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
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.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.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.
In the following Codepen demo, you can try out the functionality of
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.
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.
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
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')
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: