Lastnosti in Metode JavaScript Niza: substr()

Metoda substr() se začne na določenem mestu in vrne določeno število znakov, in ne spremeni izvirnega niza.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>substr()</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;
        }
        .note {
            color: #8d6e63;
            font-size: 0.92em;
        }
    </style>
</head>
<body>
<div class="demo-container">
    <!-- A) Osnovna uporaba: substr(start, length?) -->
    <div class="code-example">
        <span class="info-title">Osnovna uporaba: String.prototype.substr()</span>
        <span class="info-sub">Vrne podniz, ki se začne na indeksu <code>start</code> in ima največ <code>length</code> 
        znakov (če je podan).</span>
        <span class="info-sub">Originalno besedilo: Dobrodošli v JavaScript vadnici!</span>
        <span id="a" class="result"></span>
    </div>

    <!-- B) Negativni začetek (štetje od konca niza) -->
    <div class="code-example">
        <span class="info-title">Negativni začetek: substr(negativenStart, length)</span>
        <span class="info-sub">Če je <code>start</code> negativen, se izhodišče računa od konca niza (npr. -5 pomeni 5 
        znakov pred koncem).</span>
        <span id="b" class="result"></span>
    </div>

    <!-- C) Dolžina je opcijska; preseganje meja je “varno” -->
    <div class="code-example">
        <span class="info-title">Opcijska dolžina in preseganje meja</span>
        <span class="info-sub">Brez <code>length</code> vrne do konca. Če <code>length</code> preseže razpoložljive znake, 
        vrne le obstoječe.</span>
        <span id="c1" class="result"></span><br>
        <span id="c2" class="result"></span>
    </div>

    <!-- D) Tip rezultata in nespremenjen izvirnik -->
    <div class="code-example">
        <span class="info-title">Tip rezultata in nespremenjen izvirnik</span>
        <span class="info-sub">Rezultat je tipa “string”; izvirni niz ostane nespremenjen.</span>
        <span id="d" class="result"></span>
    </div>

    <!-- Opomba o uporabi -->
    <div class="code-example">
        <span class="info-title">Opomba</span>
        <span class="info-sub note">substr() je zgodovinska metoda in je lahko označena kot zastarela. Za novejšo kodo 
        se običajno uporablja <code>slice()</code> ali <code>substring()</code>.</span>
    </div>
</div>

<script>
    // Skupni izvirni niz
    const original = "Dobrodošli v JavaScript vadnici!";
    
    // A) Osnovna uporaba: substr(start, length?)
    const partA = original.substr(0, 7); // "Dobrodo"
    document.getElementById("a").textContent = 
        `substr(0, 7) → "${partA}"`;
    
    // B) Negativni začetek (od konca)
    const partB = original.substr(-10, 10); // zadnjih 10 znakov
    document.getElementById("b").textContent = 
        `substr(-10, 10) → "${partB}"`;
    
    // C1) Brez length → do konca
    const startC1 = original.indexOf("JavaScript"); // poiščemo začetek "JavaScript"
    const partC1 = original.substr(startC1);
    document.getElementById("c1").textContent = 
        `substr(${startC1}) → "${partC1}"`;
    
    // C2) Preseganje length preko konca niza
    const partC2 = original.substr(11, 999); // varno, ne bo napake
    document.getElementById("c2").textContent = 
        `substr(11, 999) → "${partC2}"`;
    
    // D) Tip rezultata in nespremenjen izvirnik
    const outD = original.substr(0, 5);
    const typeD = typeof outD; // "string"
    document.getElementById("d").textContent = 
        `typeof rezultata: ${typeD}; rezultat: "${outD}"; izvirnik: "${original}"`;
</script>
</body>
</html>

REZULTAT

Spodaj je interaktivni prikaz metode substr(). V polje vnesi začetni indeks (lahko tudi negativen za štetje od konca) in po želji dolžino izreza. Izbrani del niza bo vizualno označen, spodaj pa boš videl rezultat in njegovo dolžino. Z gumbi lahko hitro preizkusiš pogoste primere (prvih 10 znakov, od 11. znaka naprej, zadnjih 10 znakov, ipd.). Dodani so tudi praktični primeri uporabe, kot so izluščenje uporabniškega imena iz e‑pošte, domene brez protokola ali predpone telefonske številke. Opomba: substr() je zgodovinska metoda; v novejšem kodu se pogosteje uporablja slice() ali substring(), vendar je tukaj uporabljena za lažje učenje.

Lastnosti in Metode JavaScript Niza: substr()

Preizkusi substr() metodo

Preizkusi te primere:

Praktični primeri: