Műveletek string-ekkel a JavaScript-ben (JS string metódusok, függvények, tulajdonságok)

Ebben a cikkben a string-ekkel kapcsolatos műveleteket, beleértve a JavaScript alap, beépített string-ekre vonatkozó metódusait, függvényeit és tulajdonságait fogjuk bemutatni.

Ingyenes JavaScript leckék, magyarul - JavaScript bejegyzések borítóképe

Műveletek string-ekkel a JavaScript-ben (JS string metódusok, függvények, tulajdonságok)

Mivel a JavaScript-ben nem nagyon kell különös hangsúlyt fektetni egy string létrehozására, így ebben a cikkben leginkább azzal fogunk foglalkozni, hogy milyen műveleteket hajthatunk végre a stringekkel. A JavaScript alap, beépített string-ekre vonatkozó metódusait, függvényeit és tulajdonságait fogjuk bemutatni.

Mi az a string?

Kezdésnek felvetülhet a kérdés, hogy mi az a string? A legtöbb programnyelvben ez a legelső órák egyikén előjön ez a téma, a JavaScript-ben is ugyanúgy jelen vannak, de itt kisebb hangsúlyt kapnak, abból kifolyólag, hogy nem kell a változó deklarálásákor megadni a változó típusát. Szóval ugyanúgy létrehozunk string-eket, csak maximum nem nevezzük a nevükön őket.

Ennyi megjegyzés után következzen, hogy mi is az a string: a programozás területén a karakterek sorozatát string-eknek (vagy magyarul sztringeknek, karakterláncoknak és nagyon ritkán karakterfüzérnek is) nevezzük. Fogalmazhatunk úgyis, hogy a karakterek tárolására alkalmas adattípust nevezzük string-eknek.

String létrehozása JavaScript-ben

Bár fentebb említettük, hogy a JavaScript-ben egyáltalán nem nagy ördöngösség létrehozni egy string-et, de a biztonság kedvéért azért leírjuk szintaktikai szinten, hogy hogyan kell csinálni, ha valaki nem tudná/nem emlékezne rá.

var/let/const VÁLTOZÓNÉV = "ÉRTÉK";
Code language: JavaScript (javascript)

Létrehozunk egy változót vagy konstanst, majd megadjuk a változónevét és egy egyenlőségjel után idézőjelek között az értékét. Itt olvashatsz bővebben a JavaScript változókról.

String értékének módosítása JavaScript-ben

Bár ez sem túl nagy dolog, de azért megmutatjuk. Ha szeretnéd egy string értékét módosítani, akkor nincs más dolgod, mint felülírni a jelenlegi értékét egy újjal.

VÁLTOZÓNÉV = "ÚJ.ÉRTÉK";
Code language: JavaScript (javascript)

Erről is itt olvashatsz bővebben.

Mik azok a metódusok és tulajdonságok?

Nagyon leegyszerűsítve a metódusok a teljes programkód egy apróbb részfeladatát végzik el. A metódus (vagy a függvény) általában valamilyen komplexebb műveletet végez el, például sorba rendezi egy objektum elemeit, míg a tulajdonság csak egy információt ad vissza az objektumról, például, hogy hány elemből áll.

Bővebben itt olvashattok a JavaScript függvényekről, metódusokról.

A string metódusai és tulajdonságai

A leggyakrabban használt JavaScript string metódusok és tulajdonságok:

  • length
  • substring()
  • replace()
  • concat()
  • charAt()
  • split()
  • toUpperCase()
  • toLowerCase()
  • trim()

Lentebb kifejtük az összes működését, megmutatjuk a szintaktikáját, illetve példát is hozunk mindegyikre.

Természetesen ezeken felül még rengeteg string függvény és tulajdonság létezik, amelyekről itt olvashattok.

length

Elsőként következzen egy tulajdonság, mely arra alkalmas, hogy megállapítsa egy string hosszát, azaz visszaadja a szövegben lévő karakterek a számát.


Szintaxis

VÁLTOZÓNÉV.length
Code language: CSS (css)

Mivel ez egy tulajdonság, így a length kulcsszó után nem kell zárójel. Fontos tudni, hogy ez a tulajdonság csak lekéri a string karaktereinek a számát, de sehol sem tárolja és sehova sem íratja ki őket, így azzal még foglalkoznunk kell.

Megjegyzés: A szintaxisokban “VÁLTOZÓ”-t írunk, de egyébként egy sima szövegen is elvégezhetők a műveletek. Írhattunk volna “STRING”-et is, de az angol szó azt sejtetné, hogy ez egy kötelezően használandó kulcsszó, közben nem, szimplán annyit jelent, hogy egy szövegen kell alkalmaznunk.


Példa:

JavaScript + HTML kód

"JavaScript" szöveg karaktereinek száma: <span id="szoveg"></span><br>
<button onclick='document.getElementById("szoveg").innerHTML = "JavaScript".length;'>Karakterek száma</button>
Code language: JavaScript (javascript)

Eredmény

“JavaScript” szöveg karaktereinek száma:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ebben a példában egy gombra tettük rá a JavaScript kódot, és a string-ünket nem egy változóban tároltuk, hanem szimplán idézőjelek közé írtuk.

substring()

A következő vizsgált eszköz egy metódus lesz, mely két paramétert vár: az első paraméter kezdőérték, a második pedig a végérték. Ez a két érték határozza meg, hogy egy stringből mettől meddig vágjon ki karaktereket. Azaz, ha a kezdőértékünk 5, a végértékünk 10, akkor az ötödiktől a tízedikig fogja kivágni a szövegrészletet.


Szintaktika

VÁLTOZÓNÉV.substring(KEZDŐÉRTÉK, VÉGÉRTÉK)
Code language: CSS (css)


Példa:

JavaScript + HTML kód

"JavaScript" substring(4,10): <span id="szoveg"></span><br>
<button onclick='document.getElementById("szoveg").innerHTML = "JavaScript".substring(4,10);'>substring(4,10)</button>
Code language: JavaScript (javascript)

Eredmény

“JavaScript” substring(4,10):


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Mint ahogy a legtöbb programnyelvben itt is nullától indul a számozás, azaz a “JavaScript” szóban az első karakter, a “J” a 0. indexű helyen áll.

replace()

A replace() függvénnyel egy a string-ben szereplő szót cserélhetünk le egy általunk választott szóra.


Szintaktika

VÁLTOZÓNÉV.replace("MIT", "MIRE")
Code language: JavaScript (javascript)


Példa:

JavaScript + HTML kód

Csere előtt: <span id="szovegSPANelott"></span><br>
Csere után: <span id="szovegSPANutan"></span><br>
<button onclick="csere()">replace("HTML", "JS")</button>

<script>
	var szoveg="A kedvenc webnyelvem a HTML.";
	document.getElementById("szovegSPANelott").innerHTML = szoveg;
    
	function csere() {
           document.getElementById("szovegSPANutan").innerHTML = szoveg.replace("HTML", "JS");
        }
</script>
Code language: HTML, XML (xml)

Eredmény

Csere előtt:
Csere után:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A példánkban megadtuk, hogy a “HTML” szót cserélje ki a “JS” szóra. Fontos, hogy ez csak átmenetileg cseréli ki a két szót, ha állandósítani szeretnénk ezt, akkor fontos, hogy a felülírás új eredményét tároljuk el a változónkban.

concat()

A konkatenáció szó magyar körökben is ismert, főleg, ha valaki programozással foglalkozik. Konkrétan azt jelenti, hogy összefűzés. Segítségével számokat, szövegeket, karaktereket szoktunk összefűzni. Jele


Szintaxis

VÁLTOZÓNÉV1.concat("ÖSSZEFŰZŐJEL", VÁLTOZÓNÉV2)
Code language: JavaScript (javascript)

Az összefűzőjel, azaz a szimbólum, karakter, amit a két változó közé rak a program, az elhagyható, de akkor a két string-et szóköz nélkül fűzi össze. Szimplán elhelyezi a két szöveget egymás után.


Példa:

JavaScript + HTML kód

<p>valtozo1: Tanulj</p> 
<p>valtozo2: JavaScript-et!</p>
<p>Összefűzve: <span id="szoveg"></span></p><br>
<button onclick="osszefuz()">valtozo1.concat(" ", valtozo2)</button>

<script>
	function osszefuz() {   
  		var valtozo1 = "Tanulj";
		var valtozo2 = "JavaScipt-et!";
	        document.getElementById("szoveg").innerHTML = valtozo1.concat(" ", valtozo2);
    }
</script>
Code language: HTML, XML (xml)

Eredmény

valtozo1: Tanulj

valtozo2: JavaScript-et!

Összefűzve:



>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

charAt()

A charAt() függvény visszaadja a paraméterként megadott index helyén lévő karaktert.


Szintaxis

VÁLTOZÓNÉV.charAt(INDEX)
Code language: CSS (css)

Ne feledjük, hogy az indexelés nullától kezdődik.


Példa

JavaScript + HTML kód

<p>"JavaScript" charAt(4): <span id="szoveg"></span></p>
<button onclick="karakter()">valtozo1.charAt(4)</button>

<script>
	function karakter() {   
  		var valtozo1 = "JavaScipt";
                document.getElementById("szoveg").innerHTML = valtozo1.charAt(4);
    }
</script>
Code language: HTML, XML (xml)

Eredmény

“JavaScript” charAt(4):


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

split()

A JavaScript split() metódusa egy megadott karakter mentén darabolja fel a szöveget. Azaz, ha van egy szövegünk, amiben szóközzel vannak elválasztva a szövegek, akkor feldarabolhatjuk a szöveget a szóközök mentén. Ennek az lesz az eredménye, hogy létrejön egy tömb, amelyben szerepel az összes olyan szó, amelyet szóközök választottak el.

Szintaxis

VÁLTOZÓNÉV.split("ELVÁLASZTÓ.KARAKTER")
Code language: CSS (css)


Példa

JavaScript + HTML kód

<p>"A JavaScript egy szkriptnyelv." split(" "): </p>
<span id="szoveg"></span>
<button onclick="darabol()">valtozo1.split(" ")</button>

<script>
	function darabol() {   
  	   var valtozo1 = "A JavaScript egy szkriptnyelv.";
           var szavak = valtozo1.split(" ");
           var kiirtSzoveg = "";
           i=0;
        
           while (szavak.length != i) {
               kiirtSzoveg += i + ". index: " + szavak[i] + " <br>";
               i++;
           }

           document.getElementById("szoveg").innerHTML = kiirtSzoveg;
    }
</script>
Code language: HTML, XML (xml)

Eredmény

“A JavaScript egy szkriptnyelv.” split(” “):


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

toUpperCase()/toLowerCase()

Ahogy a nevük is sugallja, a toUpperCase() nagybetűssé, míg a toLowerCase() kisbetűssé teszi a szövegünket.


Szintaxis

VÁLTOZÓNÉV.toUpperCase()
VÁLTOZÓNÉV.toLowerCase()
Code language: CSS (css)

JavaScript + HTML kód

"JavaScript" szöveg karaktereinek naggyá tétele: <span id="szoveg"></span><br>
<button onclick='document.getElementById("szoveg").innerHTML = "JavaScript".toUpperCase();'>toUpperCase()</button>
<button onclick='document.getElementById("szoveg").innerHTML = "JavaScript".toLowerCase();'>toLowerCase()</button>
Code language: JavaScript (javascript)

Eredmény

“JavaScript” szöveg karaktereinek naggyá tétele:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

trim()

A trim() segítségével a “white space”-eket tüntethetjük el a szövegünkből. A “white space”-t magyarul fehér szóköznek vagy üres helynek is szoktuk nevezni. A programozásban elsősorban azokat a karaktereket értjük ezalatt, amelyek nem láthatóak a szövegben.


Szintaktika

VÁLTOZÓNÉV.trim()
Code language: CSS (css)


Példa

JavaScript + HTML kód

<pre>"     Java      Script        " szövegből fehér szóköz eltüntetése: </pre><span id="szoveg"></span><br>
<button onclick='document.getElementById("szoveg").innerHTML = "     Java      Script        ".trim();'>trim()</button>
Code language: HTML, XML (xml)

Eredmény

"     Java      Script        " szövegből fehér szóköz eltüntetése: 


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Látható, hogy a Java és a Script szó között található szóköz nem tűnt el, hiszen az nem egy fehér szóköz, hanem egy valóban szükséges szóköz.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!