JavaScript String: toUpperCase() – uppercase conversion

JavaScript String Properties and Methods: toUpperCase()

The toUpperCase() method returns a new string in which all characters are converted to uppercase. The original string remains unchanged. The conversion follows Unicode rules and is not locale-sensitive. For locale-sensitive conversions (e.g., Turkish İ/ı), use toLocaleUpperCase(locale). Calling it on null or undefined throws a TypeError.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toUpperCase()</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.55;
        }
        .demo-container {
            border-radius: 10px;
            padding: 20px;
            margin: 0 auto 18px;
            border: 1px solid;
            max-width: 860px;
        }
        .code-example {
            padding: 12px 14px;
            border-radius: 8px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
            margin: 12px 0;
            border: 1px solid;
        }
        .result {
            color: #1e88e5;
            font-weight: 700;
            display: inline-block;
            word-break: break-word;
        }
        .info-title {
            display: block;
            font-family: Arial, sans-serif;
            font-weight: 600;
            margin-bottom: 6px;
        }
        .info-sub {
            display: block;
            font-size: 0.95em;
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
<div class="demo-container">
    <!-- A) Basic usage -->
    <div class="code-example">
        <span class="info-title">Basic usage: String.prototype.toUpperCase()</span>
        <span class="info-sub">The original string is not modified; the method returns a new uppercased string.</span>
        <span class="info-sub">Original text: Welcome to the JavaScript tutorial!</span>
        <span id="a" class="result"></span>
    </div>

    <!-- B) Locale-aware conversion (Turkish as an example) -->
    <div class="code-example">
        <span class="info-title">Locale-aware: toLocaleUpperCase('tr-TR')</span>
        <span class="info-sub">Specifics: "i" → "İ", "ı" → "I" (correct Turkish I/İ handling).</span>
        <span id="b" class="result"></span>
    </div>

    <!-- C) Special characters: ß → SS, etc. -->
    <div class="code-example">
        <span class="info-title">Special characters: German "ß" example</span>
        <span class="info-sub">Some characters expand: "Straße → groß" becomes "STRASSE → GROSS".</span>
        <span id="c" class="result"></span>
    </div>

    <!-- D) Result type and unchanged original -->
    <div class="code-example">
        <span class="info-title">Result type and unchanged original</span>
        <span class="info-sub">The result is always of type "string"; the original value is not changed.</span>
        <span id="bool" class="result"></span>
    </div>
</div>

<script>
    // A) Basic usage
    const original = "Welcome to the JavaScript tutorial!";
    const aRes = original.toUpperCase();
    document.getElementById("a").textContent = aRes;

    // B) Locale-aware (Turkish)
    const tur = "Istanbul from İnegöl – i ı I İ";
    const bRes = tur.toLocaleUpperCase('tr-TR');
    document.getElementById("b").textContent = bRes;

    // C) Special characters (ß)
    const special = "Straße → groß";
    const cRes = special.toUpperCase(); // "STRASSE → GROSS"
    document.getElementById("c").textContent = cRes;

    // D) Result type + unchanged original
    const sample = "Sample";
    const up = sample.toUpperCase();
    const type = typeof up; // "string"
    const unchanged = (sample === up) ? "YES" : "NO"; // "NO", result is a new string
    document.getElementById("bool").textContent = 
        `typeof result: ${type}; original unchanged: ${unchanged}`;
</script>
</body>
</html>

RESULT

Below is an interactive example of changing letter case. Enter any text to see the result of toUpperCase() and the locale‑aware toLocaleUpperCase(locale). With the “Locale” selector you can check language‑specific behaviors (for example, Turkish: "i" → "İ", "ı" → "I"). The original value is not modified; results update live, and there is also an indicator showing whether the outputs are equal. Note: calling toUpperCase() or toLocaleUpperCase() on null/undefined throws a TypeError — always ensure you have a valid string first.

Enter text Hint: Turkish distinguishes “i/İ” and “ı/I”.

Original string:

typeof(original):

toUpperCase():

toLocaleUpperCase(locale):

Results are equal:

Notes

toUpperCase() does not take arguments; it returns a new string and leaves the original unchanged.
toLocaleUpperCase(locale) is locale‑sensitive; for example, in Turkish "i" → "İ" and "ı" → "I".
Calling it on null or undefined throws a TypeError — ensure a valid string first.