How to convert string case in JavaScript

In this tutorial, you’ll learn how to convert the case of a string to uppercase, lowercase, and title case using native JavaScript methods.

JavaScript provides many functions and methods that allow you to manipulate data for various purposes. I recently looked at methods to convert strings to numbers, numbers to strings or ordinals, and methods to split strings. In this article, I’ll show you how to convert the case of a string. This is useful for representing strings in a particular format and for reliable string comparisons.

convert string to lowercase

If you want lowercase strings, use toLowerCase() Methods available on strings. This method returns a string with all letters in lowercase.

for example:

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

by using toLowerCase() method above str Using a variable you can get the same string with all letters lowercase. Note that the new string is returned without affecting the value of . str.

convert string to uppercase

If you need the string to be uppercase, use toUpperCase() Methods available on strings. This method returns a string with all letters uppercase.

for example:

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

by using toUpperCase() method above str With variables you can get the same string with all letters uppercase. Note that the new string is returned without affecting the value of . str.

Convert string to title case

The most common use case for converting the case of strings is converting the case of titles. This can be used to display names and headings.

There are various ways to do this. One way is to use the method toUpperCase() At the first character of the string, concatenate it to the rest of the string. for example:

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

In this example we get the first character using: 0 index above str variable. Then convert to uppercase using toUpperCase() Method. Finally, get the rest of the string using: substr() method to concatenate the rest of the string to the first character.you apply toLowerCase() Ensure that the remainder of the string is lowercase.

This only converts the first letter of the word to upper case. However, in some cases, if you have a sentence, you may want to convert all words in the sentence to upper case. 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)); 

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

This function first checks if the string is empty and returns an empty string if so.

Then splitting the string on the space delimiter returns an array. Then use the map method on the array to apply the transformation we saw in the previous example to each item in the array. This will convert all words to titlecase.

Finally, it joins the items in the array with the same space delimiter into a string and returns it.

real example

The following CodePen demos allow you to try out the following features: toLowerCase() When toUpperCase()If you type a string in the input, it will be displayed converted to both uppercase and lowercase. You can try using different case characters in the string.

look at the pen
Convert String Case in JavaScript by SitePoint (@SitePoint)
with a code pen.

Changing the case of string comparisons

Strings often need to be compared before executing a block of code. If you cannot control the case of the characters in which the string is written, performing string comparisons without enforcing the case of the characters can produce 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 an input Yes Excluding that yesthe equality condition fails and displays the wrong alert.

This can be resolved by forcing the string to be case sensitive.

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

I need to learn how to convert the case of strings in JavaScript. I often need to use it for many use cases, such as displaying a string in a particular format. It can also be used to reliably compare strings.

Applying case to the strings you are comparing allows you to check if the contents of the strings are equal regardless of how the strings are written.

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