Grunnleggende strenginterpolasjon
Bygg inn uttrykk i template literals.
Grunnleggende strenginterpolasjon er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.
Hva er template literals
Template literals er en måte å opprette strenger på ved å bruke backtick-tegnet i stedet for anførselstegn. De lar Dem bygge inn uttrykk direkte i en streng uten manuell konkatenering.
En plassholder skrives med et dollartegn etterfulgt av krøllparenteser som omslutter et uttrykk. JavaScript evaluerer uttrykket og setter verdien inn i strengen.
const name = "Alice"
const greeting = "Hello, " + name + "!"
console.log(greeting)Syntaks for interpolering
Inne i en template literal plasserer De et uttrykk mellom en innledende dollar-krøllparentes og en avsluttende krøllparentes. Uttrykket evalueres og konverteres til en streng.
Eksempelet nedenfor bruker vanlig konkatenering for å gi samme resultat som interpolering, slik at ideen blir tydelig uten å vise den faktiske syntaksen for template literals.
const product = "Book"
const price = 12
const line = product + " costs " + price + " dollars"
console.log(line)Hvorfor interpolering er nyttig
Konkatenering med plussoperatoren blir vanskelig å lese når De blander mange variabler og bokstavelig tekst. Interpolering lar den omgivende teksten stå samlet og setter bare inn de dynamiske delene.
- Færre plussoperatorer
- Ingen utilsiktede mellomromsfeil
- Tydeligere hensikt
const user = "Bob"
const count = 3
console.log(user + " has " + count + " messages")Bygge inn alle typer uttrykk
En plassholder kan inneholde alle gyldige uttrykk, ikke bare en variabel. Aritmetikk, funksjonskall og egenskapslesing fungerer også.
const a = 5
const b = 7
console.log("Sum is " + (a + b))
console.log("Max is " + Math.max(a, b))Kalle funksjoner inni strenger
De kan kalle en funksjon og la den returnerte verdien settes inn i strengen. Eksempelet viser den tilsvarende formen med konkatenering.
function upper(s) { return s.toUpperCase() }
const word = "hello"
console.log("Loud: " + upper(word))Egenskapslesing
Objektegenskaper kan leses direkte inne i en plassholder. Her leser vi felt fra et brukerobjekt.
const user = { name: "Eve", age: 30 }
console.log("Name: " + user.name + ", Age: " + user.age)Tall blir til strenger
Når et tall inngår i en strengkontekst, konverteres det automatisk til tekst. Den samme tvangskonverteringen skjer ved interpolering.
const total = 19.99
console.log("Total: $" + total)Ternære uttrykk i plassholdere
Vilkårslogikk med den ternære operatoren passer inn i en plassholder og lar Dem velge mellom to verdier direkte i uttrykket.
const score = 72
const grade = score >= 60 ? "Pass" : "Fail"
console.log("Result: " + grade)Nestede uttrykk
Plassholdere kan inneholde metodekjeder og nøstede kall. Det uttrykket evalueres til, settes inn.
const items = ["a", "b", "c"]
console.log("Joined: " + items.join("-"))
console.log("Count: " + items.length)Blande mange verdier
Template literals er spesielt nyttige når en setning fletter sammen flere variabler. Sammenlign den lesbare interpolerte versjonen, som er beskrevet i teksten, med denne tilsvarende formen med konkatenering.
const city = "Paris"
const temp = 21
const sky = "sunny"
console.log("In " + city + " it is " + temp + "C and " + sky)Escape dollartegnet
Hvis De vil at en bokstavelig dollar-krøllparentes-sekvens skal vises som tekst i stedet for som en plassholder, setter De et omvendt skråstrek foran dollartegnet inne i en template literal. I vanlige strenger trengs ingen escaping.
const text = "Use $\{x\} for a placeholder"
console.log(text)Hurtigsjekk
Test forståelsen Deres av interpolering.
Oppsummering
Oppsummering: Template literals bruker backticks og plassholdere for å bygge inn uttrykk i strenger.
- En plassholder evaluerer alle typer uttrykk
- Verdier tvangskonverteres til strenger
- Interpolering er tydeligere enn lang konkatenering
- Escape dollartegnet for å vise det bokstavelig
const n = "World"
console.log("Hello, " + n + "!")
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 59
- Leksjoner
- 200
Ofte stilte spørsmål
Er leksjonen «Grunnleggende strenginterpolasjon» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Grunnleggende strenginterpolasjon», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Grunnleggende strenginterpolasjon»?
Bygg inn uttrykk i template literals. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med JavaScript Academy?
Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Grunnleggende strenginterpolasjon»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?
Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Grunnleggende strenginterpolasjon
- Strenger over flere linjer
- Taggede template-funksjoner
- Praktiske bruksområder for taggede templates