1.4 Variabler med strenger

Som vi har sett tidligere, kan vi lagre tekst i variabler. Datatypen til slike variabler heter string. Vi må skrive teksten vi vil lagre mellom to anførselstegn "". Teksten mellom to anførselstegn omtales ofte som en tekststreng, eller bare streng.

Når vi definerer tekstvariabler, skriver vi teksten vi vil lagre mellom to anførselstegn.

let tekstStreng = "alt vi skriver, blir lagret"

Alle tegnene mellom anførselstegnene blir lagret, inkludert eventuelle mellomrom.

Vi kan lagre alle mulige tegn som i en tekstvariabel. Det gjelder også tall, for eksempel "25", men da lagrer vi bare tegnene 2 og 5. Da kan vi ikke uten videre bruke tallet i utregninger.

EKSEMPEL

Fargevelger

I koden nedenfor lager vi et inputfelt der en bruker kan skrive inn et fargenavn for å endre fargen på teksten.

1 <script> 2 let farge = "black" 3 </script>

4 5 <label> 6 Skriv inn et fargenavn på engelsk: <br />

7 8 9 10 11 <input bind:value={farge}> </label> <p style="color: {farge};"> Prøv ut forskjellige farger! </p>

SKJØTE SAMMEN TEKSTSTRENGER

I koden nedenfor har vi lagret noen forskjellige ord som vi også viser frem på en nettside.

<script> let subjekt = "Lisa" let verbal = "gikk" let toOrd = "til skolen" let tekstTall = "7" </script>

<p>Her vises de lagrede strengene:</p> <p>{subjekt} {verbal} {toOrd}. Hun er {tekstTall} år.</p>

Når resultatet blir 4, vet vi at strengen "2" har blitt konvertert til tallverdien 2. Dersom vi ønsker å skjøte sammen tekstvariabler til en lenger tekststreng, gjør vi det med plusstegnet, slik:

subjekt + verbal + toOrd

Da får vi tekststrengen "Lisagikktil skolen". Om vi ønsker å legge til mellomrom mellom ordene Lisa, gikk og til, gjør vi det slik:

subjekt + " " + verbal + " " + toOrd

Vi kan lagre den skjøtede strengen i en variabel i script-elementet eller skrive hele uttrykket mellom to krøllparenteser i HTML-koden for å vise frem resultatet. Å skjøte sammen strenger med plusstegnet på denne måten kaller vi konkatenering.

Plusstegnet skjøter sammen strenger.

"En " + "setning " + "blir til."

Resultatet blir strengen

"En setning blir til."

KONVERTERE MELLOM STRING OG NUMBER

Dersom vi har lagret et tall som en streng i en variabel, og ønsker å bruke tallverdien i beregninger, kan vi konvertere variabelen til datatypen number på flere måter. Vi kan bruke funksjonen Number() eller parseInt(). Mellom parentesene skriver vi variabelnavnet. Det fins også en funksjon som heter String() som konverterer en tallverdi til en streng. Vi demonstrer bruken av disse funksjonene i koden nedenfor.

1 <script> 2 let tekstTall = "2" 3 let tallverdi = Number(tekstTall) 4 </script>

5 6 <p> tekstTall + tekstTall gir: {tekstTall + tekstTall}. </p> 7 <p> tallverdi + tallverdi gir: {tallverdi + tallverdi}. </p> 8 <p> 9 parseInt(tekstTall) + parseInt(tekstTall) gir: 10 {parseInt(tekstTall) + parseInt(tekstTall)} 11 </p> 12 <p> 13 String(tallverdi) + String(tallverdi) gir: 14 {String(tallverdi) + String(tallverdi)}</p>

Funksjonene Number() og parseInt() konverterer en streng med talltegn til en tallverdi.

Funksjonen String() konverterer en tallverdi til en streng.

Dersom vi er usikre på datatypen til en variabel, kan vi bruke funksjonen typeof, som returnerer navnet på datatypen til en variabel. Om vi hadde skrevet {typeof tekstTall i HTML-koden ovenfor, ville resultatet blitt string. {typeof tallverdi} ville gitt number.

STRING-METODER

JavaScript har innebygde metoder, eller funksjoner, som vi kan bruke på tekststrenger. Vi kan for eksempel undersøke om en streng inneholder et spesifikt tegn eller kombinasjoner av tegn, gjøre alle bokstavene store eller små og bytte ut deler av strengen med noe annet.

Metoden toUpperCase() gjør alle små bokstaver i en streng store. For å bruke denne metoden skriver vi en tekststreng etterfulgt av punktum foran metodenavnet slik: "fint".toUpperCase(). Dersom strengen hadde vært lagret i en variabel med navnet kommentar, ville vi skrevet variabelnavnet etterfulgt av punktum og

meto-denavnet slik: kommentar.toUpperCase().

Metodene endrer ikke den lagrede verdien i en variabel. De tar bare inn strengen som er lagret, og returnerer et resultat som kan vises frem. Om vi ønsker å bruke en metode til å endre en variabel, kan vi gjøre det slik:

1 <script> 2 let kommentar = "fint" 3 kommentar = kommentar.toUpperCase() //Gir kommentar ny verdi. 4 </script>

I koden nedenfor demonstrerer vi flere nyttige string-metoder.

1 <script> 2 let kommentar = "KjempeFint" 3 </script>

4 5 <ul> 6 <li>kommentar.toLowerCase() returnerer: {kommentar.toLowerCase()}</li> 7 <li>kommentar.length() returnerer antall tegn: {kommentar.length}</li> 8 <li>kommentar.charAt(0) viser den første bokstaven: {kommentar.charAt(0)}</li> 9 <li>kommentar.replace("Fint", "bra") gir: {kommentar.replace("Fint", "bra")}</li> 10 <li>kommentar.substring(6, 9) gir: {kommentar.substring(6, 9)}</li> 11 <li>kommentar.slice(1, 5) gir: {kommentar.slice(1, 5)}</li> 12 </ul>

DISKUTER

Studer koden ovenfor. Hva gjør hver av metodene? Definer en variabel med verdien " Det var en gang " og prøv ut disse kodene: substr(2, 2), substr(-4) og trim(). Hva gjør de?