Grunderna i stränginterpolering
Bädda in uttryck i template literals.
Grunderna i stränginterpolering är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad är mallsträngar
Mallsträngar är ett sätt att skapa strängar med backtick-tecknet i stället för citattecken. De gör det möjligt att bädda in uttryck direkt i en sträng utan manuell sammanfogning.
En platshållare skrivs med ett dollartecken följt av klamrar som omsluter ett uttryck. JavaScript utvärderar uttrycket och infogar dess värde i strängen.
const name = "Alice"
const greeting = "Hello, " + name + "!"
console.log(greeting)Interpoleringssyntax
I en mallsträng placerar du ett uttryck mellan en inledande dollar-klammer och en avslutande klammer. Uttrycket utvärderas och omvandlas till en sträng.
Exemplet nedan använder vanlig sammanfogning för att skapa samma resultat som interpolering, så att idén blir tydlig utan att den faktiska syntaxen för mallsträngar visas.
const product = "Book"
const price = 12
const line = product + " costs " + price + " dollars"
console.log(line)Varför interpolering hjälper
Sammanfogning med plusoperatorn blir svår att läsa när många variabler och fasta textdelar blandas. Med interpolering kan den omgivande texten vara intakt, medan endast de dynamiska delarna byts ut.
- Färre plusoperatorer
- Inga oavsiktliga mellanslagsfel
- Tydligare avsikt
const user = "Bob"
const count = 3
console.log(user + " has " + count + " messages")Bädda in godtyckliga uttryck
En platshållare kan innehålla vilket giltigt uttryck som helst, inte bara en variabel. Aritmetik, funktionsanrop och egenskapsåtkomst fungerar också.
const a = 5
const b = 7
console.log("Sum is " + (a + b))
console.log("Max is " + Math.max(a, b))Anropa funktioner inuti
Du kan anropa en funktion och låta dess returvärde infogas i strängen. Exemplet visar den motsvarande formen med sammanfogning.
function upper(s) { return s.toUpperCase() }
const word = "hello"
console.log("Loud: " + upper(word))Egenskapsåtkomst
Objektegenskaper kan läsas direkt i en platshållare. Här läser vi fält från ett användarobjekt.
const user = { name: "Eve", age: 30 }
console.log("Name: " + user.name + ", Age: " + user.age)Tal blir strängar
När ett tal hamnar i ett strängsammanhang omvandlas det automatiskt till textform. Samma typomvandling sker vid interpolering.
const total = 19.99
console.log("Total: $" + total)Ternära uttryck i platshållare
Villkorslogik med den ternära operatorn får plats i en platshållare, så att du kan välja mellan två värden direkt i uttrycket.
const score = 72
const grade = score >= 60 ? "Pass" : "Fail"
console.log("Result: " + grade)Nästlade uttryck
Platshållare kan innehålla metodkedjor och nästlade anrop. Det som uttrycket utvärderas till infogas.
const items = ["a", "b", "c"]
console.log("Joined: " + items.join("-"))
console.log("Count: " + items.length)Blanda många värden
Mallsträngar är särskilt användbara när en mening väver samman flera variabler. Jämför den läsbara interpolerade versionen, som beskrivs med ord, med denna motsvarande form med sammanfogning.
const city = "Paris"
const temp = 21
const sky = "sunny"
console.log("In " + city + " it is " + temp + "C and " + sky)Escapa dollartecknet
Om du vill att en ordagrann dollar-klammer-sekvens ska visas som text i stället för som en platshållare escaper du dollartecknet med ett omvänt snedstreck i en mallsträng. I vanliga strängar behövs ingen escaping.
const text = "Use $\{x\} for a placeholder"
console.log(text)Snabb kontroll
Testa dina kunskaper om interpolering.
Sammanfattning
Sammanfattning: Mallsträngar använder backticks och platshållare för att bädda in uttryck i strängar.
- En platshållare utvärderar vilket uttryck som helst
- Värden omvandlas till strängar
- Interpolering är tydligare än lång sammanfogning
- Escapa dollartecknet för att visa det ordagrant
const n = "World"
console.log("Hello, " + n + "!")
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”Grunderna i stränginterpolering” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Grunderna i stränginterpolering”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Grunderna i stränginterpolering”?
Bädda in uttryck i template literals. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Grunderna i stränginterpolering”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Grunderna i stränginterpolering
- Flerradiga strängar
- Taggade template-funktioner
- Praktiska användningsområden för taggade templates