Grundlæggende om strenginterpolation
Indlejr udtryk i template literals.
Grundlæggende om strenginterpolation er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Hvad er skabelonstrenge
Skabelonstrenge er en måde at oprette strenge på ved hjælp af backtick-tegnet i stedet for anførselstegn. De lader dig indsætte udtryk direkte i en streng uden manuel sammenkædning.
En pladsholder skrives med et dollartegn efterfulgt af krøllede parenteser omkring et udtryk. JavaScript evaluerer udtrykket og indsætter dets værdi i strengen.
const name = "Alice"
const greeting = "Hello, " + name + "!"
console.log(greeting)Syntaks for interpolation
I en skabelonstreng placerer du et udtryk mellem en indledende dollar-krølleparentes og en afsluttende krølleparentes. Udtrykket evalueres og konverteres til en streng.
Eksemplet nedenfor bruger almindelig sammenkædning til at skabe det samme resultat, som du ville få med interpolation, så ideen står klart uden at vise selve skabelonstrengsyntaksen.
const product = "Book"
const price = 12
const line = product + " costs " + price + " dollars"
console.log(line)Hvorfor interpolation hjælper
Sammenkædning med plusoperatoren bliver svær at læse, når du blander mange variable og bogstavelig tekst. Interpolation bevarer den omgivende tekst og indsætter kun de dynamiske dele.
- Færre plusoperatorer
- Ingen fejl med overflødige mellemrum
- Tydeligere hensigt
const user = "Bob"
const count = 3
console.log(user + " has " + count + " messages")Indsættelse af alle slags udtryk
En pladsholder kan indeholde ethvert gyldigt udtryk, ikke kun en variabel. Aritmetik, funktionskald og egenskabsopslag fungerer alle sammen.
const a = 5
const b = 7
console.log("Sum is " + (a + b))
console.log("Max is " + Math.max(a, b))Kald af funktioner indeni
Du kan kalde en funktion og lade dens returnerede værdi blive indsat i strengen. Eksemplet viser den tilsvarende form med sammenkædning.
function upper(s) { return s.toUpperCase() }
const word = "hello"
console.log("Loud: " + upper(word))Egenskabsopslag
Objektegenskaber kan læses direkte i en pladsholder. Her læser vi felter fra et brugerobjekt.
const user = { name: "Eve", age: 30 }
console.log("Name: " + user.name + ", Age: " + user.age)Tal bliver til strenge
Når et tal indgår i en strengsammenhæng, konverteres det automatisk til tekst. Den samme typekonvertering sker med interpolation.
const total = 19.99
console.log("Total: $" + total)Ternære udtryk i pladsholdere
Betinget logik med den ternære operator passer ind i en pladsholder, så du kan vælge mellem to værdier direkte i udtrykket.
const score = 72
const grade = score >= 60 ? "Pass" : "Fail"
console.log("Result: " + grade)Indlejrede udtryk
Pladsholdere kan indeholde metodekæder og indlejrede kald. Det, som udtrykket evalueres til, bliver indsat.
const items = ["a", "b", "c"]
console.log("Joined: " + items.join("-"))
console.log("Count: " + items.length)Blanding af mange værdier
Skabelonstrenge er særligt nyttige, når en sætning fletter flere variable sammen. Sammenlign den læsbare interpolerede version, som beskrives med ord, med denne tilsvarende version med sammenkædning.
const city = "Paris"
const temp = 21
const sky = "sunny"
console.log("In " + city + " it is " + temp + "C and " + sky)Escaping af dollartegnet
Hvis du vil have en bogstavelig dollar-krølleparentes-sekvens vist som tekst i stedet for som en pladsholder, escaper du dollartegnet med en backslash i en skabelonstreng. I almindelige strenge er escaping ikke nødvendigt.
const text = "Use $\{x\} for a placeholder"
console.log(text)Hurtigt tjek
Kontrollér din forståelse af interpolation.
Opsummering
Opsummering: Skabelonstrenge bruger backticks og pladsholdere til at indsætte udtryk i strenge.
- En pladsholder evaluerer ethvert udtryk
- Værdier konverteres til strenge
- Interpolation er tydeligere end lang sammenkædning
- Escap dollartegnet for at vise det bogstaveligt
const n = "World"
console.log("Hello, " + n + "!")
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 59
- Lektioner
- 200
Ofte stillede spørgsmål
Er lektionen “Grundlæggende om strenginterpolation” gratis?
Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Grundlæggende om strenginterpolation”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Grundlæggende om strenginterpolation”?
Indlejr udtryk i template literals. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på JavaScript Academy?
Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Grundlæggende om strenginterpolation”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?
Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Grundlæggende om strenginterpolation
- Strenge over flere linjer
- Tagged template-funktioner
- Praktiske anvendelser af tagged templates