Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon.
Bli en strengmester med denne JavaScript-veiledningen til formatering, interpolering og mer.
I JavaScript er en streng en gruppe tegn omgitt av enten et par enkle eller doble anførselstegn. Det er mange måter å formatere strenger på i JavaScript.
Du kan bruke spesifikke metoder eller operatorer for å kombinere strenger. Du kan til og med utføre spesifikke operasjoner for å bestemme hvilken streng som skal vises hvor og når.
Lær hvordan du formaterer JavaScript-strengene dine ved å bruke sammenkoblingsmetoder og bokstavmaler.
Sammenknytting av strenger
JavaScript lar deg sette sammen strenger ved hjelp av flere tilnærminger. En nyttig tilnærming er concat() metode. Denne metoden bruker to eller flere strenger. Den bruker en enkelt kallestreng og tar en eller flere strenger som argumenter.
const fornavn = "John";
const etternavn = "Doe";la stringVal;
stringVal = fornavn.concat("", etternavn);
konsoll.log (stringVal);
Her kobler concat sammen strengargumentene (et tomt mellomrom og etternavn) til den kallende strengen (fornavn). Koden lagrer deretter den resulterende nye strengen i en variabel (stringVal) og skriver ut den nye verdien til nettleserkonsollen:
En annen måte å sette sammen en samling strenger på er å bruke plussoperatoren. Denne metoden lar deg kombinere strengvariabler og strengliteraler for å lage nye strenger.
const fornavn = "John";
const mellomnavn = "Mike";
const etternavn = "Doe";la stringVal;
stringVal = fornavn + "" + mellomnavn + "" + etternavn;
konsoll.log (stringVal);
Koden ovenfor skriver ut følgende utdata til konsollen:
En tredje tilnærming til å sammenkoble JavaScript-strengene dine krever bruk av pluss- og likhetstegn. Denne metoden lar deg legge til en ny streng på slutten av en eksisterende.
const fornavn = "John";
const etternavn = "Doe";la stringVal;
stringVal = fornavn;
stringVal += "";
stringVal += etternavn;
konsoll.log (stringVal);
Denne koden legger til et tomt mellomrom og verdien av lastName-variabelen til firstName-variabelen, og produserer følgende utdata:
Malbokstaver
Literal mal er en ES6-funksjon som lar deg formatere JavaScript-strenger. En bokstavmal bruker et par backticks (`) for å vise strenger. Denne metoden for strengformatering lar deg vise renere flerlinjestrenger i JavaScript.
la html;html = `<ul>
<li> Navn: John Doe </li>
<li> Alder: 24 </li>
<li> Jobb: Programvareingeniør </li>
</ul>`;
dokument.body.innerHTML = html;
JavaScript-koden ovenfor bruker HTML for å skrive ut en liste over tre elementer i nettleseren:
For å oppnå samme utdata uten mal-literal (eller før mal-literals), må du bruke anførselstegn. Du vil imidlertid ikke kunne utvide koden over flere linjer som du kan med bokstavmaler.
la html;html = "<ul><li>Navn: John Doe</li><li>Alder: 24</li><li>Jobb: Programvareingeniør</li></ul>";
dokument.body.innerHTML = html;
Strengeinterpolasjon
Literal mal lar deg bruke uttrykk i JavaScript-strengene dine gjennom en prosess som kalles interpolering. Med strenginterpolasjon kan du legge inn uttrykk eller variabler i strengene dine ved å bruke ${expression} plassholder. Det er her verdien av bokstaver i JavaScript-maler blir virkelig tydelig.
la brukernavn = "Jane Doe";
la alder = 21;
la jobb = "Webutvikler";
la erfaring = 3;la html;
html = `<ul>
<li> Navn: ${userName} </li>
<li> Alder: ${age} </li>
<li> Stillingstittel: ${job} </li>
<li> År med erfaring: ${experience} </li>
<li> Utviklernivå: ${experience < 5? "Junior til Middels": "Senior"} </li>
</ul>`;
dokument.body.innerHTML = html;
Koden ovenfor produserer følgende utgang i konsollen:
De fire første argumentene til ${expression} plassholder er strengvariabler, men den femte er et betinget uttrykk. Uttrykket er avhengig av verdien av en av variablene (erfaring), for å diktere hva den skal vise i nettleseren.
Formatering av elementer på nettsiden din med JavaScript
Bortsett fra den funksjonelle tilknytningen til nettsideutvikling, fungerer JavaScript med HTML for å påvirke utformingen og utformingen av en nettside. Det kan manipulere teksten som vises på en nettside, slik tilfellet er med bokstavmaler.
Den kan til og med konvertere HTML til bilder og vise dem på en nettside.
