Načrtovanje in razvoj spletnih aplikacij

Razred String

Niz v JavaScriptu predstavlja besedilo. Pri delu z nizi največkrat uporabljamo primitivni tip string, JavaScript pa ob dostopu do metod po potrebi začasno uporabi lastnosti in metode razreda String. To pomeni, da lahko metode kličemo neposredno na vrednostih tipa string, na primer "Kranj".length ali "Kranj".toUpperCase().

Pomni: Nizi so v JavaScriptu nespremenljivi. To pomeni, da metode, kot so replace(), slice() ali trim(), ne spremenijo izvirnega niza, ampak vrnejo nov niz.

Osnovna pravila

  • Pri novi kodi praviloma uporabljamo primitivni tip string in ne objekta, ustvarjenega z new String().
  • Prvi znak v nizu ima indeks 0.
  • Večina metod niza vrne nov niz in ne spremeni izvirnika.
  • Pri iskanju v nizu je pogosto koristno razlikovati med položajem in logičnim odgovorom true ali false.
  • Pri delu z Unicode znaki je treba razlikovati med kodo UTF-16 enote in dejansko kodno točko.

Primerjave

Osnovno o nizih

Razred String je objektna različica primitivnega tipa string. V sodobni kodi skoraj vedno uporabljamo primitivne nize, na primer "Kranj", ne pa objektov, ustvarjenih z new String(). Kadar pokličemo metodo na primitivnem nizu, JavaScript to omogoči samodejno.

const kraj = "Kranj";
const dolzina = kraj.length;

Pozor: V sodobni kodi ni priporočljivo ustvarjati nizov z zapisom new String("besedilo"), ker tak zapis ustvari objekt, ne pa navadne primitivne vrednosti niza.

Lastnosti niza

Najpogosteje uporabljena lastnost niza je length, ki vrne dolžino niza v enotah UTF-16. To pomeni, da dolžina ni vedno enaka številu vidnih znakov pri vseh Unicode znakih.

<p id="primer1"></p>
<script>
{
   const txt = "Dolžina niza.";
   document.getElementById("primer1").textContent = txt.length;
}
</script>

Iskanje v nizu

Za iskanje položaja v nizu pogosto uporabljamo metodi indexOf() in lastIndexOf(). Kadar pa želimo le preveriti, ali se določen del pojavi v nizu, je pogosto preglednejša metoda includes(). Za preverjanje začetka ali konca niza uporabljamo startsWith() in endsWith().

<p id="stavek1">Šolski center Kranj je največji center v Kranju.</p>
<button type="button" onclick="najdiPrvo()">Prva pojavitev</button>
<button type="button" onclick="najdiZadnjo()">Zadnja pojavitev</button>
<button type="button" onclick="preveriVsebino()">Preveri vsebino</button>
<p id="primer2"></p>

<script>
function najdiPrvo() {
   const niz = document.getElementById("stavek1").textContent;
   document.getElementById("primer2").textContent = niz.indexOf("center");
}

function najdiZadnjo() {
   const niz = document.getElementById("stavek1").textContent;
   document.getElementById("primer2").textContent = niz.lastIndexOf("center");
}

function preveriVsebino() {
   const niz = document.getElementById("stavek1").textContent;
   document.getElementById("primer2").textContent =
      "includes: " + niz.includes("center")
      + ", startsWith: " + niz.startsWith("Šolski")
      + ", endsWith: " + niz.endsWith("Kranju.");
}
</script>

Šolski center Kranj je največji center v Kranju.

Pomni: Metoda indexOf() vrne položaj prve pojavitve ali -1, metoda includes() pa vrne neposredno vrednost true ali false. Zato je includes() pogosto preglednejša, kadar želimo samo preveriti prisotnost podniza.

Izrezovanje in deljenje

Za izrezovanje dela niza najpogosteje uporabljamo slice() ali substring(). Metoda slice() podpira tudi negativne indekse, zato je v sodobni kodi pogosto bolj uporabna. Za delitev niza na več delov uporabljamo split(). Metoda substr() je starejša in se danes ne priporoča kot osrednja izbira.

<p id="primer3"></p>
<script>
{
   const niz = "Šolski center Kranj.";
   const del1 = niz.slice(7, 13);
   const del2 = niz.substring(7, 13);
   const deli = niz.split(" ");

   document.getElementById("primer3").textContent =
      del1 + " | " + del2 + " | " + deli.join(", ");
}
</script>

Pozor: Metoda slice() omogoča negativne indekse, metoda substring() pa ne. Zato rezultata teh metod nista vedno enaka pri vseh vhodih.

Zamenjava vsebine

Metoda replace() vrne nov niz, v katerem je del besedila zamenjan. Če podamo navaden niz kot vzorec, bo zamenjana samo prva pojavitev. Za zamenjavo vseh pojavitev istega dela je v sodobni kodi zelo uporabna metoda replaceAll().

<p id="primer4">Šolski center Kranj je največji center v Kranju.</p>
<button type="button" onclick="zamenjajPrvo()">Zamenjaj prvo pojavitev</button>
<button type="button" onclick="zamenjajVse()">Zamenjaj vse pojavitve</button>

<script>
function zamenjajPrvo() {
   const niz = document.getElementById("primer4").textContent;
   document.getElementById("primer4").textContent = niz.replace("center", "zavod");
}

function zamenjajVse() {
   const niz = document.getElementById("primer4").textContent;
   document.getElementById("primer4").textContent = niz.replaceAll("center", "zavod");
}
</script>

Šolski center Kranj je največji center v Kranju.

Male in velike črke

Za pretvorbo velikosti črk uporabljamo toUpperCase() in toLowerCase(). Za odstranjevanje praznih znakov z robov niza uporabljamo trim(), na voljo pa sta tudi natančnejši metodi trimStart() in trimEnd().

<p id="primer5"></p>
<script>
{
   const niz = "  Šolski center Kranj.  ";
   document.getElementById("primer5").textContent =
      niz.toUpperCase() + " | " + niz.trim();
}
</script>

Dostop do znakov

Za dostop do posameznega znaka lahko uporabimo charAt() ali sodobnejšo metodo at(). Prednost metode at() je, da podpira tudi negativne indekse. Za številčno vrednost znaka v UTF-16 uporabljamo charCodeAt(), za delo s celotnimi Unicode kodnimi točkami pa je pogosto primernejša metoda codePointAt().

<p id="primer6"></p>
<script>
{
   const niz = "Šolski center Kranj.";
   document.getElementById("primer6").textContent =
      niz.charAt(7) + " | " + niz.at(-1) + " | " + niz.charCodeAt(7);
}
</script>

Pozor: Metodi charAt() in at() vrneta del niza, medtem ko charCodeAt() vrne številsko vrednost UTF-16 enote. Pri nekaterih Unicode znakih je za natančnejšo obravnavo primernejša metoda codePointAt().

Združevanje nizov

Nize lahko združujemo z metodo concat(), zelo pogosto pa tudi z operatorjem + ali s predlogami nizov. V sodobni kodi so predloge nizov pogosto najbolj pregledne.

<p id="primer7"></p>
<script>
{
   const niz1 = "Šolski";
   const niz2 = "center";
   const niz3 = "Kranj.";

   document.getElementById("primer7").textContent =
      niz1 + " " + niz2 + " " + niz3;
}
</script>

Priporočila

  • Pri novi kodi uporabljaj primitivne nize, ne pa objektov z new String().
  • Za preverjanje prisotnosti podniza pogosto uporabi includes().
  • Za zamenjavo vseh pojavitev besedila po potrebi uporabi replaceAll().
  • Za izrezovanje delov niza je pogosto pregledna izbira metoda slice().
  • Pri delu z robnimi praznimi znaki uporabi trim(), trimStart() ali trimEnd().

Pogoste napake

  • Niz se obravnava, kot da ga metode spreminjajo na mestu, čeprav večina metod vrne nov niz.
  • Za zamenjavo vseh pojavitev dela besedila se uporabi replace() z navadnim nizom, čeprav ta pogosto zamenja le prvo pojavitev.
  • Metodi indexOf() in includes() se uporabljata, kot da vračata enak tip rezultata.
  • Metodi slice() in substring() se obravnavata kot popolnoma enaki, čeprav se razlikujeta pri nekaterih vhodih, zlasti pri negativnih indeksih.
  • Pri dostopu do Unicode znakov se brez dodatne razlage uporabi charCodeAt(), čeprav je v določenih primerih primernejša metoda codePointAt().