Start learning free

LESSON 71 OF 348 · STRINGS I

Uppercase and Lowercase in TypeScript: toUpperCase and toLowerCase

Lesson Read the full explanation

In JavaScript, strings have built-in methods to change their case:

s.toUpperCase()   // converts all characters to uppercase
s.toLowerCase()   // converts all characters to lowercase

Here are some examples:

let word = "Hello World";
console.log(word.toUpperCase());  // "HELLO WORLD"
console.log(word.toLowerCase());  // "hello world"

let name = "ALICE";
console.log(name.toLowerCase());  // "alice"

These methods return a new string — the original is not modified.


Assignment
Follow the Coding Tutorial and convert word to both uppercase and lowercase!

Hint
Use word.toUpperCase() and word.toLowerCase().

STEP 1 OF 2
    Ctrl + Enter to check

    TYPESCRIPT · STRINGS I

    String Upper Lower in TypeScript, explained

    Changing the case of a string

    Two string methods change letter case:

    s.toUpperCase()   // converts all characters to uppercase
s.toLowerCase()   // converts all characters to lowercase

    Each one returns a new string. The original is not modified, because strings can't be changed after they are created:

    let word: string = "Hello World";

console.log(word.toUpperCase());  // HELLO WORLD
console.log(word.toLowerCase());  // hello world
console.log(word);                // Hello World

    Characters that aren't letters, such as digits, spaces and punctuation, pass through unchanged: "abc123!".toUpperCase() is "ABC123!".

    The exercise

    The starting code defines one variable:

    let word: string = "Hello World";

    The task has two steps, and each one creates a new variable.

    1. Uppercase. Below word, declare upper with let and the type string, and assign it word.toUpperCase().
    2. Lowercase. Below that, declare lower the same way and assign it word.toLowerCase().

    The finished code:

    let word: string = "Hello World";

let upper: string = word.toUpperCase();
let lower: string = word.toLowerCase();

    Afterwards upper is "HELLO WORLD" and lower is "hello world". Both calls start from word, which still holds "Hello World". The second call doesn't see the result of the first, so the order of the two lines doesn't matter.

    Why case conversion is useful

    Text comparison is case-sensitive, so "Yes" and "yes" are different strings. When you want to treat them as the same, convert both sides to one case before comparing:

    const a: string = "Yes";
const b: string = "yes";

console.log(a === b);                                  // false
console.log(a.toLowerCase() === b.toLowerCase());      // true

    It is common to convert to lowercase for comparisons and searches, and to uppercase for labels and codes. The same idea helps with indexOf and includes, which are also case-sensitive.

    The methods can be combined with others. To capitalize only the first letter of a word, upper-case the first character and lower-case the rest:

    const w: string = "tYPEscript";
const capitalized: string = w[0].toUpperCase() + w.slice(1).toLowerCase();

console.log(capitalized); // Typescript

    A good way to remember which method does what is to read the name aloud: "to upper case" and "to lower case". Both names capitalize each word after the first (toUpperCase), the usual style for method names. When a call fails, check the spelling and capitals first.

    Converting only once

    Because a conversion builds a whole new string, it is worth doing it once and reusing the result, rather than repeating it inside a loop that runs many times. If you compare a user's text against several options, convert the user's text to lowercase one time and keep it in a variable. Then every comparison uses the same prepared value, and the code reads more clearly too.

    These methods exist only on strings. A number has no toUpperCase, so (5).toUpperCase() is a compile error. If a value might not be a string, convert it with String(value) first or check its type.

    Gotchas

    • Forgetting to keep the result. A bare word.toUpperCase(); does nothing visible. Assign it to a variable, or assign it back with word = word.toUpperCase(); when word is declared with let.
    • Forgetting the parentheses. word.toUpperCase without () is the function itself, not the converted text. The brackets are what call it.
    • The letter count can change. The conversion follows Unicode rules, and a few letters turn into two. "ß".toUpperCase() is "SS", so "straße" becomes "STRASSE" and gets one character longer.
    • Method names are case-sensitive too. toUppercase() or touppercase() doesn't exist, and the compiler reports the error right away.
    • Language-specific rules. The plain methods use the language-neutral rules. For rules of a particular language, such as the Turkish dotless i, there are toLocaleUpperCase and toLocaleLowerCase, which take a locale. Most programs never need them.

    Key takeaways

    • toUpperCase() and toLowerCase() return the string converted to one case.
    • They return a new string and leave the original unchanged, so store the result.
    • Convert both sides to the same case to compare text without caring about capitals.
    • Non-letters stay as they are, and a few letters change the length of the string.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free