Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Strings

JavaScript String Case

Written by Published

toUpperCase and toLowerCase return a new string in a different case.

Neither one changes the original, because strings cannot be changed.

The most common use is comparing text without caring about case.

Example

Example

javascript

const name = "Ada";

console.log(name.toUpperCase());
console.log(name);

The original is untouched, as always with strings.

Changing Case

toUpperCase() returns an upper case copy.

toLowerCase() returns a lower case copy.

Both leave digits and punctuation alone.

Syntax

Syntax

javascript

text.toUpperCase();
text.toLowerCase();

They take no arguments.

Case-Insensitive Comparison

Lowercase both sides before comparing.

Example

Example

javascript

const entered = "ADA";
const stored = "ada";

console.log(entered === stored);
console.log(entered.toLowerCase() === stored.toLowerCase());

The output is false then true.

Searching Without Case

The same trick works for includes.

Example

Example

javascript

const title = "JavaScript Basics";

console.log(title.includes("basics"));
console.log(title.toLowerCase().includes("basics"));

The output is false then true.

Capitalising a Word

There is no built-in method, so combine the first letter with the rest.

Example

Example

javascript

const word = "ada";

const capitalised = word[0].toUpperCase() + word.slice(1);

console.log(capitalised);

The output is Ada.

Only Letters Change

Numbers and symbols are returned as they are.

Example

Example

javascript

console.log("ada-42!".toUpperCase());

Only the letters were affected.

The Original Is Safe

This is worth proving to yourself once.

Example

Example

javascript

const name = "ada";

name.toUpperCase();

console.log(name);

The result must be stored or used; it does not change the variable.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript String Case</title>
</head>
<body>

  <h1>String Case</h1>

  <input id="name" value="ADA lovelace">

  <p id="out"></p>

  <script>
    const entered = document.getElementById("name").value;
    const lower = entered.toLowerCase();
    const capitalised = lower[0].toUpperCase() + lower.slice(1);

    document.getElementById("out").innerHTML =
      "Upper: " + entered.toUpperCase() +
      "<br>Lower: " + lower +
      "<br>Capitalised: " + capitalised;
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try mixed case:

Type a name in any case and see all three versions.

Important Points

  • toUpperCase and toLowerCase return new strings.
  • The original is never changed.
  • Lowercase both sides for a case-insensitive comparison.
  • Digits and punctuation are left alone.
  • There is no built-in capitalise method.

Conclusion

Changing case is most often about comparing text fairly.

Remember to use the returned value; the original stays as it was.

Capitalising a word takes one line of slicing.

PreviousJavaScript String Escape CharactersNextJavaScript String Search