Text interpolation with {} in Svelte - Mini Project: Build & Apply

Text interpolation with {} in Svelte

📖 Scenario: You are building a simple Svelte component that shows a greeting message with a user's name.

🎯 Goal: Create a Svelte component that uses text interpolation with {} to display a greeting message including a user's name.

📋 What You'll Learn

Create a variable called name with the exact value 'Alice'.

Create a variable called greeting with the exact value 'Hello'.

Use text interpolation with {} inside the <p> tag to show the full greeting message combining greeting and name.

Ensure the Svelte component renders the greeting message correctly.

💡 Why This Matters

🌍 Real World

Text interpolation is used in web apps to show dynamic data like user names, dates, or messages inside the page content.

💼 Career

Knowing how to use text interpolation in Svelte is essential for frontend developers building interactive user interfaces.

1

Create the name variable

Create a variable called name and set it to the string 'Alice' inside the <script> tag.

Svelte

  // Create a variable called name and set it to 'Alice'
  

Hint

Use let name = 'Alice'; inside the <script> tag.

2

Create the greeting variable

Add a variable called greeting and set it to the string 'Hello' inside the existing <script> tag.

Svelte

  let name = 'Alice';
  // Create a variable called greeting and set it to 'Hello'

Hint

Add let greeting = 'Hello'; inside the <script> tag below name.

3

Use text interpolation to show the greeting message

Inside the <p> tag, use text interpolation with {} to display the combined message: greeting followed by a space and then name.

Svelte

  let name = 'Alice';
  let greeting = 'Hello';



  

Hint

Write {greeting} {name} inside the <p> tag to combine the two variables.

4

Complete the Svelte component

Ensure the Svelte component includes the <script> tag with both variables and the <p> tag with the interpolated greeting message exactly as shown.

Svelte

  let name = 'Alice';
  let greeting = 'Hello';


{greeting} {name}

Hint

Check that your component has the variables and the <p> tag with interpolation exactly as required.

Practice

1. In Svelte, how do you display the value of a variable name inside your HTML?

easy

A. Use {name} inside the HTML to show the variable's value.

B. Use <name> tags around the variable.

C. Use $name directly in the HTML.

D. Use $(name) inside the HTML.

Solution

1. Step 1: Understand Svelte's text interpolation syntax

   Svelte uses curly braces {} to insert variables or expressions inside HTML. To display the value of name, write {name} inside the HTML.

2. Final Answer:

   Use {name} inside the HTML to show the variable's value. -> Option A

3. Quick Check:

   Text interpolation = {name} [OK]

Hint: Remember: Curly braces {} show variables in Svelte [OK]

Common Mistakes:

• Using $name instead of {name}
• Trying to use HTML tags like <name>
• Using parentheses like $(name)

2. Which of the following is the correct syntax to show the result of 2 + 3 inside a Svelte component?

easy

A. $(2 + 3)

B. {{2 + 3}}

C. {2 + 3}

D. <2 + 3>

Solution

1. Step 1: Recall Svelte's expression interpolation

   Svelte allows expressions inside curly braces {} to be evaluated and shown. Only {2 + 3} correctly uses curly braces for expression evaluation; others are invalid.

2. Final Answer:

   {2 + 3} -> Option C

3. Quick Check:

   Expression in {} = {2 + 3} [OK]

Hint: Use curly braces {} for expressions, not $ or double braces [OK]

Common Mistakes:

• Using $(2 + 3) which is invalid in Svelte
• Using double curly braces {{}} like in other frameworks
• Using angle brackets around expressions

3. What will be displayed when this Svelte code runs?

<script>
  let count = 5;
</script>
<p>Count is: {count * 2}</p>

medium

A. Count is: 10

B. Count is: count * 2

C. Count is: 5

D. Count is: {count * 2}

Solution

1. Step 1: Evaluate the expression in the component

   The variable count is 5, and count * 2 equals 10, so "Count is: 10" is displayed.

2. Final Answer:

   Count is: 10 -> Option A

3. Quick Check:

   count * 2 = 10 [OK]

Hint: Calculate expressions inside {} before display [OK]

Common Mistakes:

• Showing the expression text instead of its value
• Not multiplying and showing just the variable
• Leaving braces visible in output

4. Identify the error in this Svelte code snippet:

<script>
  let message = 'Hello';
</script>
<p>{message</p>

medium

A. Use parentheses instead of braces (message)

B. Variable 'message' is not declared

C. Curly braces should be double like {{message}}

D. Missing closing brace '}' after {message}

Solution

1. Step 1: Check the interpolation syntax

   The code opens { but lacks closing } after message. Proper syntax is {message}.

2. Final Answer:

   Missing closing brace '}' after {message} -> Option D

3. Quick Check:

   Interpolation needs matching {} [OK]

Hint: Always close your curly braces {} in interpolation [OK]

Common Mistakes:

• Forgetting the closing brace '}'
• Using double braces {{}} which is invalid in Svelte
• Not declaring the variable before use

5. You want to display a user's full name by combining firstName and lastName inside a Svelte component. Which code correctly shows "Full Name: John Doe" if firstName = 'John' and lastName = 'Doe'?

hard

A. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName, ' ', lastName}</p>

B. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName + ' ' + lastName}</p>

C. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName & lastName}</p>

D. <script>
let firstName = 'John';
let lastName = 'Doe';
</script>
<p>Full Name: {firstName.concat(lastName)}</p>

Solution

1. Step 1: Identify correct string concatenation

   Svelte evaluates JS expressions in {}. Use +: {firstName + ' ' + lastName} gives "John Doe". Commas invoke comma operator (returns lastName), & is bitwise, concat(lastName) gives "JohnDoe" (no space).

2. Final Answer:

   Full Name: {firstName + ' ' + lastName} -> Option B

3. Quick Check:

   Use + to join strings inside {} [OK]

Hint: Use + to join strings inside {} for full text [OK]

Common Mistakes:

• Using commas instead of + for concatenation
• Using & which is a bitwise operator
• Forgetting space between names