Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission.
Bliv en strengmester med denne JavaScript-guide til formatering, interpolation og mere.
I JavaScript er en streng en gruppe af tegn omgivet af enten et par enkelte eller dobbelte anførselstegn. Der er mange måder at formatere strenge på i JavaScript.
Du kan bruge bestemte metoder eller operatorer til at kombinere strenge. Du kan endda udføre specifikke handlinger for at bestemme, hvilken streng der skal vises hvor og hvornår.
Lær, hvordan du formaterer dine JavaScript-strenge ved hjælp af sammenkædningsmetoder og skabelonliteral.
Sammenkædning af strenge
JavaScript giver dig mulighed for at sammenkæde strenge ved hjælp af flere tilgange. En nyttig tilgang er concat() metode. Denne metode bruger to eller flere strenge. Den bruger en enkelt kaldende streng og tager en eller flere strenge som argumenter.
const fornavn = "John";
const efternavn = "Doe";lade strengVal;
stringVal = fornavn.concat("", efternavn);
konsol.log (stringVal);
Her forbinder concat strengargumenterne (et tomt mellemrum og efternavn) til den kaldende streng (fornavn). Koden gemmer derefter den resulterende nye streng i en variabel (stringVal) og udskriver den nye værdi til browserkonsollen:
En anden måde at sammenkæde en samling af strenge på er ved at bruge plus-operatoren. Denne metode giver dig mulighed for at kombinere strengvariabler og strengliteraler for at skabe nye strenge.
const fornavn = "John";
const mellemnavn = "Mike";
const efternavn = "Doe";lade strengVal;
stringVal = fornavn + "" + mellemnavn + "" + efternavn;
konsol.log (stringVal);
Koden ovenfor udskriver følgende output til konsollen:
En tredje tilgang til at sammenkæde dine JavaScript-strenge kræver brugen af et plus- og lighedstegn. Denne metode giver dig mulighed for at tilføje en ny streng til slutningen af en eksisterende.
const fornavn = "John";
const efternavn = "Doe";lade strengVal;
stringVal = fornavn;
stringVal += "";
stringVal += efternavn;
konsol.log (stringVal);
Denne kode tilføjer et tomt mellemrum og værdien af lastName-variablen til firstName-variablen, hvilket producerer følgende output:
Skabelon bogstaver
Skabelonliterals er en ES6-funktion, der giver dig mulighed for at formatere JavaScript-strenge. En skabelon literal bruger et par backticks (`) til at vise strenge. Denne metode til strengformatering giver dig mulighed for at vise renere flerliniestrenge i JavaScript.
lade html;html = `<ul>
<li> Navn: John Doe </li>
<li> Alder: 24 </li>
<li> Job: Softwareingeniør </li>
</ul>`;
dokument.body.innerHTML = html;
JavaScript-koden ovenfor bruger HTML for at udskrive en liste over tre elementer i browseren:
For at opnå det samme output uden skabelonliteral (eller før skabelonliterals), skal du bruge anførselstegn. Du ville dog ikke være i stand til at udvide koden over flere linjer, som du kan med skabelonliteral.
lade html;html = "<ul><li>Navn: John Doe</li><li>Alder: 24</li><li>Job: Softwareingeniør</li></ul>";
dokument.body.innerHTML = html;
Strenginterpolation
Skabelonliteraler lader dig bruge udtryk i dine JavaScript-strenge gennem en proces kaldet interpolation. Med strenginterpolation kan du indlejre udtryk eller variable i dine strenge ved hjælp af ${expression} pladsholder. Det er her, værdien af bogstaver i JavaScript-skabelonen virkelig bliver tydelig.
lad brugernavn = "Jane Doe";
lade alder = 21;
lad job = "Web-udvikler";
lade erfaring = 3;lade html;
html = `<ul>
<li> Navn: ${userName} </li>
<li> Alder: ${age} </li>
<li> Jobtitel: ${job} </li>
<li> Års erfaring: ${experience} </li>
<li> Udviklerniveau: ${experience < 5? "Junior til Mellem": "Senior"} </li>
</ul>`;
dokument.body.innerHTML = html;
Koden ovenfor producerer følgende output i konsollen:
De første fire argumenter i ${expression} pladsholder er strengvariable, men den femte er et betinget udtryk. Udtrykket er afhængig af værdien af en af variablerne (erfaring), for at diktere, hvad den skal vise i browseren.
Formatering af elementer på din webside med JavaScript
Udover dets funktionelle tilknytning til websideudvikling, arbejder JavaScript med HTML for at påvirke design og layout af en webside. Det kan manipulere teksten, der vises på en webside, som det er tilfældet med skabeloner.
Det kan endda konvertere HTML til billeder og vise dem på en webside.
