JavaScript String Properties and Methods: startsWith()

The startsWith() method returns true if a string starts with a specified value; otherwise, it returns false. The method is case-sensitive.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>startsWith()</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: startsWith(searchString, position = 0) -->
    <div class="code-example">
        <span class="info-title">Basic usage: String.prototype.startsWith()</span>
        <span class="info-sub">Returns a boolean indicating whether the string starts with the search substring. The 
        default start is at index 0.</span>
        <span class="info-sub">Original text: Welcome to the JavaScript tutorial!</span>
        <span id="a" class="result"></span>
    </div>

    <!-- B) Using a starting index (position) -->
    <div class="code-example">
        <span class="info-title">Starting index: startsWith(searchString, position)</span>
        <span class="info-sub">You can provide the starting index from which to check the beginning.</span>
        <span id="b" class="result"></span>
    </div>

    <!-- C) Case sensitivity and a “case-insensitive” example -->
    <div class="code-example">
        <span class="info-title">Case sensitivity</span>
        <span class="info-sub">startsWith() is case-sensitive. For a case-insensitive check, normalize both strings 
        first.</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 “boolean”; the original string is not modified.</span>
        <span id="bool" class="result"></span>
    </div>
</div>

<script>
    // A) Basic usage (default position = 0)
    const original = "Welcome to the JavaScript tutorial!";
    const aRes = original.startsWith("Welcome");
    document.getElementById("a").textContent = 
        `startsWith("Welcome") → ${aRes}`;
    
    // B) Using a starting index (position)
    const textB = "Welcome to the JavaScript tutorial!";
    const needleB = "JavaScript";
    const posB = textB.indexOf("JavaScript"); // example: start checking at the index where "JavaScript" appears
    const bRes = textB.startsWith(needleB, posB);
    document.getElementById("b").textContent = 
        `startsWith("${needleB}", ${posB}) → ${bRes}`;
    
    // C) Case sensitivity and a “case-insensitive” approach
    const cmp = "Istanbul";
    const plain = cmp.startsWith("i"); // false due to the capital I
    // Simple case-insensitive approach: normalize both strings
    const ci = cmp.toLocaleLowerCase().startsWith("i");
    document.getElementById("c").textContent = 
        `startsWith("i") → ${plain} | case-insensitive → ${ci}`;
    
    // D) Result type and original
    const sample = "Sample";
    const check = sample.startsWith("Sam");
    const type = typeof check; // "boolean"
    document.getElementById("bool").textContent = 
        `result typeof: ${type}; original: "${sample}"`;
</script>
</body>
</html>

RESULT

In this interactive example, you can check whether a string starts with a selected prefix. Enter the desired beginning in the field and see the result and explanation in the “Results” area. You can also click the prepared examples (Good, day, GOOD, !) or try practical scenarios below for email addresses, URLs, and file names. Keep in mind that startsWith() is case-sensitive; for a case-insensitive check, normalize both strings first (e.g., with toLocaleLowerCase()).

Check the beginning of a text

Enter the beginning of the text you want to check

Try these examples:

Practical examples:

Email check:

URL check:

File check: