2. blokk · Építőkövek · 8. fejezet
Egy szerver adatainak nagy része szöveg: URL-ek, fájlnevek, e-mail-címek, keresőkifejezések, a felhasználó által beírt bármi. A JavaScript gazdag eszköztárat ad a szövegek vizsgálatára és átalakítására: keresés, kivágás, csere, darabolás, kitöltés. Ebben a fejezetben végigvesszük a leggyakoribb string-metódusokat — és a legfontosabb szabályt: a szöveg nem változik meg, minden metódus újat ad vissza.
A szöveg (string) karakterek sorozata idézőjelek ("…"), aposztrófok
('…') vagy backtick (`…`) között. A szövegeken — a tömbökhöz hasonlóan —
metódusok hívhatók a pont után. A .length a karakterek számát adja, az egyes karaktereket
pedig 0-tól induló indexszel érjük el:
let szo = "alma"; console.log(szo.length); // 4 console.log(szo[0]); // "a" — az első karakter console.log(szo.charAt(1)); // "l" — ugyanaz, metódussal console.log(szo[szo.length - 1]); // "a" — az utolsó karakter console.log(szo[10]); // undefined — nincs ilyen index
Ha minden karakterre kell valamit tenni, a 4. fejezetből ismert for…of a legkényelmesebb —
nem kell indexet számolni:
let szo = "körte"; let db = 0; for (let betu of szo) { if ("aeiouáéíóöőúüű".includes(betu)) { // magánhangzó? db++; } } console.log(db); // 2
A length, az indexelés, a for…of, az indexOf,
az includes és a slice a tömbön és a szövegen ugyanúgy működik.
Ami különbözik: a szöveg elemeit nem írhatod át (szo[0] = "A" nem csinál semmit), és nincs
push/pop.
let nev = "Anna Kovács"; console.log(nev.toUpperCase()); // "ANNA KOVÁCS" console.log(nev.toLowerCase()); // "anna kovács"
Az ékezetes betűkkel is jól bánnak. A leggyakoribb használat: kis/nagybetűre nem érzékeny összehasonlítás — mindkét szöveget ugyanarra az esetre hozzuk, és úgy vetjük össze:
let kereses = "EGÉR"; let termek = "Vezeték nélküli egér"; console.log(termek.toLowerCase().includes(kereses.toLowerCase())); // true
| Metódus | Mit ad vissza | Példa |
|---|---|---|
includes(x) | true/false — tartalmazza-e | "alma".includes("lm") → true |
startsWith(x) | ezzel kezdődik-e | "alma".startsWith("al") → true |
endsWith(x) | erre végződik-e | "kep.png".endsWith(".png") → true |
indexOf(x) | az első előfordulás indexe, vagy -1 | "alma".indexOf("a") → 0 |
lastIndexOf(x) | az utolsó előfordulás indexe, vagy -1 | "alma".lastIndexOf("a") → 3 |
let fajl = "jelentes.2026.pdf"; console.log(fajl.indexOf(".")); // 8 — az első pont console.log(fajl.lastIndexOf(".")); // 13 — az utolsó pont (a kiterjesztés előtt) console.log(fajl.indexOf("docx")); // -1 — nincs benne console.log(fajl.endsWith(".pdf")); // true
Ha csak azt kérdezed, benne van-e, az includes olvashatóbb. Az indexOf akkor kell,
ha hol van — pl. hogy utána a slice-nak megadd a pozíciót. Mindegyik kis/nagybetű-érzékeny.
A slice(kezdet, vég) egy részletet ad vissza: a kezdő index beletartozik, a vég már nem.
A vég elhagyható (a szöveg végéig), és negatív index a végéről számol:
let szo = "JavaScript"; console.log(szo.slice(0, 4)); // "Java" (0,1,2,3 indexű karakterek) console.log(szo.slice(4)); // "Script" (a 4. indextől a végéig) console.log(szo.slice(-6)); // "Script" (az utolsó 6 karakter) console.log(szo.slice(2, -2)); // "vaScri"
Az indexOf + slice páros a klasszikus „vágd le a … utáni részt" feladat megoldása:
let fajl = "jelentes.2026.pdf"; let pont = fajl.lastIndexOf("."); console.log(fajl.slice(pont + 1)); // "pdf" — a kiterjesztés console.log(fajl.slice(0, pont)); // "jelentes.2026" — a név
A substring(kezdet, vég) majdnem ugyanaz, két különbséggel: a negatív számot 0-nak veszi, és ha a kezdet
nagyobb a végnél, megcseréli őket. A gyakorlatban a slice bőven elég — azt használd.
A replace csak az első előfordulást cseréli, a replaceAll mindet:
let mondat = "alma, alma, körte"; console.log(mondat.replace("alma", "banán")); // "banán, alma, körte" console.log(mondat.replaceAll("alma", "banán")); // "banán, banán, körte" console.log(mondat.replaceAll(" ", "")); // "alma,alma,körte" — törlés = csere üresre
A trim() a szöveg két végéről vágja le a szóközöket (és a sortöréseket); a
trimStart() csak az elejéről, a trimEnd() csak a végéről:
let bemenet = " Anna@Példa.hu "; console.log(bemenet.trim()); // "Anna@Példa.hu" console.log(bemenet.trimStart()); // "Anna@Példa.hu " console.log(bemenet.trimEnd()); // " Anna@Példa.hu" // a tipikus tisztító lánc: vágás + kisbetűsítés let email = bemenet.trim().toLowerCase(); console.log(email); // "anna@példa.hu"
Egy Express API-ban minden, ami kintről jön, szöveg: az URL darabjai (/termekek/egerpad), a lekérdezés
(?kereses=Egér ), az űrlapmezők, a fájlnevek. Feldolgozás előtt tisztítani kell:
req.query.kereses.trim().toLowerCase(), aztán includes-szal keresünk a terméknevekben;
egy fájlnévről endsWith(".png")-vel döntjük el, kép-e; az e-mailt includes("@")-val
ellenőrizzük durván. Ezek a metódusok naponta többször kellenek szerveroldalon.
A split(elválasztó) egy szöveget tömbbé darabol az elválasztó mentén; a tömb
join(összekötő) metódusa (6. fejezet) pedig visszafűzi szöveggé:
let csv = "alma,körte,szilva"; let lista = csv.split(","); // ["alma", "körte", "szilva"] — tömb! console.log(lista.length); // 3 console.log(lista[1]); // "körte" console.log(lista.join(" - ")); // "alma - körte - szilva" console.log(lista.join("")); // "almakörteszilva" console.log("alma".split("")); // ["a", "l", "m", "a"] — karakterekre bontás console.log("egy kis alma".split(" ")); // ["egy", "kis", "alma"] — szavakra bontás
Ez a páros nyit ajtót a tömb-eszköztárnak: a szöveget tömbbé alakítod, ott rendezel, szűrsz, megfordítasz —
majd join-nal visszaalakítod. Például megfordítani egy szöveget három lépésben:
let szo = "alma"; let forditott = szo.split("").reverse().join(""); // a reverse() a tömböt fordítja meg console.log(forditott); // "amla"
A "a b".split(" ") eredménye ["a", "", "b"] — a két szóköz közé üres szöveg kerül.
Szószámlálásnál ezért előbb trim(), aztán a darabok közül csak a nem üreseket számold.
A repeat(n) a szöveget n-szer ismétli. A padStart(hossz, kitöltő) és a
padEnd(hossz, kitöltő) addig tölti ki a szöveget elöl vagy hátul, amíg el nem éri
a kívánt hosszt — ez a klasszikus „vezető nulla" és a táblázatos igazítás eszköze:
console.log("=".repeat(20)); // "====================" console.log("ab".repeat(3)); // "ababab" let ora = 9, perc = 5; let ido = String(ora).padStart(2, "0") + ":" + String(perc).padStart(2, "0"); console.log(ido); // "09:05" console.log("Egér".padEnd(12, ".") + "6990 Ft"); // "Egér........6990 Ft" console.log("Monitor".padEnd(12, ".") + "45990 Ft"); // "Monitor.....45990 Ft"
A padStart szöveg-metódus — számon nem működik. Alakítsd át előbb: String(9)
vagy (9).toString() vagy "" + 9. Ha a szöveg már hosszabb a kért hossznál, változatlan marad.
A legfontosabb szabály: a string-metódusok sosem módosítják az eredeti szöveget, hanem új szöveget adnak vissza. Az eredményt el kell tárolni (vagy rögtön felhasználni):
let nev = "anna"; nev.toUpperCase(); // ez NEM változtatja meg a nev-et! console.log(nev); // "anna" — maradt kisbetűs nev = nev.toUpperCase(); // az eredményt vissza kell írni a változóba console.log(nev); // "ANNA"
Sokan azt hiszik, a bemenet.trim() „megtisztítja" a bemenet változót. Nem! A sor önmagában
nem csinál semmit. Helyesen: bemenet = bemenet.trim(); — vagy egy új változó: const tiszta = bemenet.trim();.
A \ (backslash) után álló karakter különleges jelentést kap: \n sortörés,
\t tabulátor, \" idézőjel az idézőjeles szövegben, \\ maga a backslash:
console.log("Első sor\nMásodik sor"); // két sorba írja console.log("Név:\tAnna"); // tabulátorral console.log("Azt mondta: \"szia\""); // Azt mondta: "szia" console.log("C:\\Users\\anna"); // C:\Users\anna // template literál: többsoros, behelyettesítéssel — nem kell \n let nev = "Anna", db = 3; let uzenet = `Kedves ${nev}! A kosaradban ${db} termék van. Üdv: a webshop`; console.log(uzenet);
Az === pontos egyezést néz (kis/nagybetű is számít). A < és >
karakterkód szerint hasonlít — ez az angol ábécénél „ábécérend", de a nagybetűk a kisbetűk elé, az ékezetesek pedig
minden ékezet nélküli után kerülnek. Magyar szövegek rendezéséhez a localeCompare való:
console.log("alma" < "körte"); // true — a < k console.log("Zoli" < "anna"); // true — a nagy Z kódja kisebb a kis a-nál! console.log("árvíz" < "zebra"); // false — az á kódja nagyobb a z-nél // localeCompare: -1 ha előbb van, 1 ha később, 0 ha egyezik — a magyar szabályok szerint console.log("árvíz".localeCompare("zebra", "hu")); // -1 — az á az a-hoz tartozik, a z előtt console.log("alma".localeCompare("alma", "hu")); // 0
Az URL-ből és az űrlapról érkező számok is szövegek. A 2. fejezetből ismerős átalakítók:
console.log(Number("42")); // 42 console.log(Number(" 42 ")); // 42 — a szóközöket elnézi console.log(Number("42 Ft")); // NaN — nem szám console.log(parseInt("42 Ft")); // 42 — az elejéről kiolvassa, amennyit tud console.log(String(42) + 1); // "421" — szöveg + szám = összefűzés!
Kísérletezz a string-metódusokkal! Írd át a szövegeket, próbálj ki negatív indexet a slice-ban,
fűzz több metódust egymás után. A kimenet úgy jelenik meg, ahogy Node-ban a console.log mutatná.
Válassz mintát vagy írj sajátot — majd Futtatás (Ctrl+Enter) ↓
Szövegfeldolgozó függvények — csak az eddig tanultakkal (ciklus, elágazás, tömb-alapok, string-metódusok). Minden feladatban egy adott nevű függvényt írsz; az Ellenőrzés több bemenettel meghívja, és a visszatérési értéket hasonlítja a várttal. Figyelj a szélső esetekre: üres szöveg, egy karakter, több szóköz.
⭐ alap · ⭐⭐ haladó · ⭐⭐⭐ kihívás — a haladásod ebben a böngészőben megmarad.
1) Döntsd el, karakterenként (for…of) vagy szavanként (split(" ")) kell-e dolgozni.
2) Kell-e előbb „normalizálni" — trim, toLowerCase? 3) Ha új szöveget építesz, indulj
üres szövegből és +=-zel fűzd; ha tömböd van, join-nal zárd. 4) Ne felejtsd:
az eredményt vissza kell adni (return)!
length a karakterszám; a karakterek s[i] vagy charAt(i) indexszel érhetők el (0-tól), az utolsó s[s.length - 1]; for…of végigjár.toUpperCase, toLowerCase — érzéketlen összehasonlításhoz mindkét oldalt hozd ugyanarra.includes, startsWith, endsWith (logikai); indexOf, lastIndexOf (index vagy -1).slice(kezdet, vég) — a vég nem tartozik bele, negatív index a végéről számol.replace (első), replaceAll (mind), trim / trimStart / trimEnd.split darabol, join összefűz; split("") karakterekre bont.repeat, padStart/padEnd (előbb String()-gé alakíts!).\n \t \" \\; többsoros szöveghez template literál. Magyar rendezéshez localeCompare.Ezzel megvannak az építőkövek: függvények, tömbök, objektumok, szövegek. A 3. blokk a modern JavaScriptről szól —
a következő fejezetben azokat az ES6+ szintaktikai elemeket tanuljuk meg (destrukturálás, spread, ?.,
??), amelyekkel minden Express-kód tele van, és amelyek nélkül egy mai kódbázist olvasni sem lehet.