Text interpolation with {} in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Svelte component display?

Consider this Svelte component code. What text will appear on the page?

Svelte

<script>
  let name = 'Alice';
  let age = 30;
</script>

<p>Hello, {name}! You are {age} years old.</p>

A Hello, Alice! You are 30 years old.

B Hello, {name}! You are {age} years old.

C Hello, Alice! You are {age} years old.

D Hello, {name}! You are 30 years old.

💡 Hint

Remember that Svelte replaces expressions inside curly braces with their values.

Svelte replaces {name} and {age} with their current values, so the output is 'Hello, Alice! You are 30 years old.'

📝 Syntax

intermediate

Which option correctly uses text interpolation in Svelte?

Choose the option that correctly shows the user's score stored in a variable called score.

Svelte

let score = 85;

A <p>Your score is %score%.</p>

B <p>Your score is {score}.</p>

C <p>Your score is {{score}}.</p>

D <p>Your score is ${score}.</p>

💡 Hint

Svelte uses curly braces {} for interpolation, not other symbols.

In Svelte, you use {variable} inside markup to show the variable's value. Other syntaxes are invalid.

❓ state_output

advanced

What is the output after clicking the button twice?

This Svelte component increments a counter when the button is clicked. What text is shown after two clicks?

Svelte

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>Click me</button>
<p>Clicked {count} times.</p>

A Clicked 0 times.

B Clicked 1 times.

C Clicked 2 times.

D Clicked count times.

💡 Hint

Each click increases count by 1, and the text shows the current count.

After two clicks, count is 2, so the text shows 'Clicked 2 times.'

🔧 Debug

advanced

Why does this Svelte component show {message} literally instead of the message value?

Look at this code snippet. Why does the page show '{message}' instead of 'Hello World'?

Svelte

<script>
  let message = 'Hello World';
</script>

<p>{'{message}'}</p>

A Because the curly braces are inside quotes, so Svelte treats it as plain text.

B Because message variable is not defined.

C Because Svelte requires double curly braces for interpolation.

D Because the script tag is missing the lang attribute.

💡 Hint

Check how the curly braces are used inside the paragraph tag.

The curly braces are inside quotes, so Svelte outputs them as text, not as an expression to evaluate.

🧠 Conceptual

expert

What happens if you use a JavaScript expression inside Svelte interpolation?

Consider this code snippet. What will be displayed?

Svelte

<script>
  let a = 5;
  let b = 3;
</script>

<p>{a > b ? 'a is greater' : 'b is greater or equal'}</p>

A b is greater or equal

B SyntaxError

C {a > b ? 'a is greater' : 'b is greater or equal'}

D a is greater

💡 Hint

Svelte supports JavaScript expressions inside curly braces.

The expression evaluates to true since 5 > 3, so 'a is greater' is displayed.