diff --git a/curriculum/challenges/english/blocks/lecture-working-with-strings-in-javascript/673263d58da27ea7809963bf.md b/curriculum/challenges/english/blocks/lecture-working-with-strings-in-javascript/673263d58da27ea7809963bf.md index e49021ace8c..1b680a8e269 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-strings-in-javascript/673263d58da27ea7809963bf.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-strings-in-javascript/673263d58da27ea7809963bf.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: what-are-template-literals-and-what-is-string-interpolation --- -# --description-- +# --interactive-- In JavaScript, template literals are a powerful and flexible way to work with strings. Unlike regular strings, which use single (`'`) or double (`"`) quotes, template literals are defined with backticks (`` ` ``). @@ -13,37 +13,55 @@ They allow for easier string manipulation, including embedding variables directl Template literals make it easier to create strings that span multiple lines or include expressions (like variables or even JavaScript code) directly within the string. -Here's a basic example of a template literal: +Here's an example of a template literal: + +:::interactive_editor ```js -let name = "Alice"; -let greeting = `Hello, ${name}!`; // Output: "Hello, Alice!" +const name = "Alice"; +const greeting = `Hello, ${name}!`; + +console.log(greeting); ``` +::: + Notice the use of backticks instead of single or double quotes. The `${name}` syntax is an example of string interpolation, where the value of the variable `name` is directly inserted into the string. String interpolation allows you to embed variables and expressions inside a string. This is a significant improvement over the older method, where you would concatenate strings and variables using the `+` operator. Here is an example using string concatenation and the plus (`+`) operator: +:::interactive_editor + ```js -let name = "Alice"; -let age = 25; -let message = "My name is " + name + " and I am " + age + " years old."; -console.log(message); // Output: "My name is Alice and I am 25 years old." +const name = "Alice"; +const age = 25; +const message = "My name is " + name + " and I am " + age + " years old."; +console.log(message); ``` +::: + And here is an example using template literals and string interpolation: +:::interactive_editor + ```js -let message = `My name is ${name} and I am ${age} years old.`; -console.log(message); // Output: "My name is Alice and I am 25 years old." +const name = "Alice"; +const age = 25; +const message = `My name is ${name} and I am ${age} years old.`; +console.log(message); ``` +::: + As you can see, string interpolation with template literals is much cleaner and easier to read, especially when you're working with multiple variables. Another great feature of template literals is that they support multiline strings. With regular strings, you would need to use escape characters (`\n`) to create new lines. With template literals, you can simply write the string across multiple lines, and the formatting is preserved: +:::interactive_editor + ```js let poem = `Roses are red, Violets are blue, @@ -53,15 +71,24 @@ And so are you.`; console.log(poem); ``` -The output will retain the line breaks as written: +::: -```md -Roses are red, -Violets are blue, -JavaScript is fun, -And so are you. +Another feature of template literals is that they allow you to embed JavaScript expressions directly within the string, like in this example: + +:::interactive_editor + +```js +const song = "Bohemian Rhapsody"; +const score = 9.5; +const highestScore = 10; +const output = `One of my favorite songs is "${song}". I rated it ${ + (score / highestScore) * 100 +}%.`; +console.log(output); ``` +::: + Template literals are particularly useful when you need to include variables or expressions in strings, format complex strings, or work with multiline text. They are more concise and readable compared to traditional string concatenation. # --questions--