How to Transform the Character Case of a String in JavaScript

Core points

• JavaScript provides native methods to convert the case of string characters, including toUpperCase(), toLowerCase() and a custom title case function. These methods return a new string without changing the original string.
The
• toLowerCase() and toUpperCase() methods are not only used for formatting text displays, but also for reliable string comparisons, as they can normalize the case of the string being compared.
• Create a custom function to convert a string to title case, you need to split the string into an array of words, convert the first letter of each word to uppercase, and the rest of the letters to lowercase, and then reconnect the words into a string.

This tutorial will teach you how to convert the case of string characters - uppercase, lowercase, and title cases using JavaScript native methods.

JavaScript provides many functions and methods that allow you to manipulate data for different purposes. We recently looked at ways to convert strings to numbers, numbers to strings or ordinal numbers, and split strings. This article will introduce how to convert string characters to uppercase and lowercase - this is useful for representing strings in a specific format or for reliable string comparisons.

Convert string to lowercase

If lowercase strings are required, you can use the toLowerCase() method available on the string. This method returns a string in which all characters are lowercase.

Example:

<code class="language-javascript">const str = 'HeLlO';
console.log(str.toLowerCase()); // "hello"
console.log(str); // "HeLlo"</code>

By using the str method for the toLowerCase() variable, the same string with all characters in lowercase can be retrieved. Note that the returned new string will not affect the value of str.

Convert string to uppercase

If you want a capital string, you can use the toUpperCase() method available on the string. This method returns a string with all characters in uppercase.

Example:

<code class="language-javascript">const str = 'HeLlO';
console.log(str.toUpperCase()); // "HELLO"
console.log(str); // "HeLlo"</code>

By using the str method for the toUpperCase() variable, the same string with all characters capitalized can be retrieved. Note that the returned new string will not affect the value of str.

Convert string to title case

The most common use case for converting strings is to convert them to title case. This can be used to display names and titles.

There are different ways to do this. One way is to use the toUpperCase() method to convert the first character of the string and then concatenate it with the rest of the string. For example:

<code class="language-javascript">const str = 'HeLlO';
console.log(str.toLowerCase()); // "hello"
console.log(str); // "HeLlo"</code>

In this example, the first character is retrieved using the index 0 of the str variable. Then, use the toUpperCase() method to convert it to uppercase. Finally, use the substr() method to retrieve the rest of the string and concatenate the rest of the string with the first letter. Apply toLowerCase() to the rest of the string to make sure it is lowercase.

This will only convert the first letter of the word to capitalize. However, in some cases, if there is a sentence, you may want to convert every word of the sentence to capitalize. In this case, it is best to use a function like this:

<code class="language-javascript">const str = 'HeLlO';
console.log(str.toUpperCase()); // "HELLO"
console.log(str); // "HeLlo"</code>

The

toTitleCase() function accepts a parameter, that is, a string to be converted to a title case.

In the function, first check whether the string is empty, and if so, return an empty string.

Then, split the string on the space separator, which will return an array. After that, use the map method on the array to apply the transformation you saw in the previous example to each item in the array. This converts each word to title case.

Finally, use the same space separator to concatenate the items in the array into a string and return it.

Online example

In the CodePen demonstration below, you can try the functions of toLowerCase() and toUpperCase(). When a string is entered in the input, it is converted to uppercase and lowercase and displayed. You can try to use characters with different upper and lower case in a string.

[CodePen demo link (CodePen's embed code should be inserted here)]

Change character case for string comparison

In many cases, you need to compare strings before executing a block of code. If you have no control over how strings are written, comparing strings without forcing any character case can lead to unexpected results.

Example:

<code class="language-javascript">const str = 'hello';
console.log(str[0].toUpperCase() + str.substring(1).toLowerCase()); // "Hello"</code>

If the user enters Yes instead of yes in the input, the equality condition will fail and an incorrect alert will be displayed.

You can solve this problem by forcing the character case of the string:

<code class="language-javascript">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)); // "Hello World"</code>

Conclusion

Learning how to convert character case of a string in JavaScript is necessary. You often need to use it for many use cases, such as displaying strings in a specific format. You can also use it to reliably compare strings.

Force the character case of the string you are comparing to make sure you can check if the contents of the strings are equal, regardless of how they are written.

(Additional content at the end of the article should be added here, such as FAQs, etc., supplemented according to the original text)

The above is the detailed content of How to Transform the Character Case of a String in JavaScript. For more information, please follow other related articles on the PHP Chinese website!