Loading
Lesson 08
Courses / JavaScript for Complete Beginners
String Interpolation in JavaScript

Summary

# MBK Attack World: String Interpolation in JavaScript

Welcome back! This lesson is a follow-up to the previous one on string concatenation in JavaScript. Today, we'll explore **string interpolation**, introduced in ES6 (ECMAScript 2015). This method simplifies the process of including variable values in strings, aligning with patterns found in other programming languages.

## Key Points

- **String concatenation** requires breaking the string into parts using the plus sign (`+`). For example:
  ```javascript
  console.log('Hello, my name is ' + name + ' and I am ' + age + ' years old.');
  • String interpolation: Using backticks (`) instead of single quotes allows for easier variable substitution without breaking the string apart. Here's how it works:
    • Use backticks to enclose the string.
    • Substitute variables within the string using the syntax: ${variable}.

Example

Given variables:

const name = 'My Name';
const age = 35;

Using string interpolation:

console.log(`Hello, my name is ${name} and I am ${age} years old.`);

This outputs:

Hello, my name is My Name and I am 35 years old.

Important Notes

  • Always use backticks (`) for string interpolation.
  • Ensure you are using a modern browser that supports ES6 features. Older browsers may not support this syntax.

Thank you for watching! Please like and subscribe, and see you next time!

Video Transcript

Welcome back to MBK attack world. This lesson is a follow-up to the previous lesson about string concatenation in JavaScript. I would like to give you an alternative for a string concatenation and that is the string interpolation. The string interpolation is something actually new in the JavaScript version ES6 so-called acromascript 2015 and it makes things a little bit more convenient and follow other programming languages patterned for a string interpolation. So let's have a look at it. So we're gonna do the same example we had before. If you don't remember let me recall here we had this message hello my name is whatever and I am whatever your zone and where these values were actually blanks that we had to substitute with the value coming from a variable in this case the variable for the name and the variable for the age. So we wanted to display this message in the console and we use console log to do that. Now what we did before was using concatenation using the plus sign right so we have to break things apart have this string here followed by the variable followed by a string followed by the variable followed by the string. So there's actually a way now to do that in JavaScript so that you don't have to break the string apart into smaller pieces to actually substitute the value of a variable right here okay. So the way we're gonna do that it's called a string interpolation okay interpolation and to do that we will not use a single quote for the string instead we're gonna use the back tick. If you have an American keyboard the back tick is the one right under the tilde which happens to be typically under the escape key in the case of for the Mac next to the number one key okay so it's this guy right here you see the back tick so we're gonna use that guy instead of the single quote okay because the back tick in JavaScript will allow us to have to do the string interpolation so if you don't have that it will not work. So make sure you're typing the back tick back back tick. So let's go so we're gonna do the following we're gonna do the console log as we did before and instead of using the single quote we're gonna use the back tick. Back tick face the text you want to print to the console and then what we're doing the blanks is the following you go to the blank whatever value from a variable you want substitute and you're gonna do the following you're gonna put a dollar sign open braces curly braces and you inside this curly braces you have to say the name of the variable whose value you want to substitute here in this case the variable is called name okay we define it previously if you go up here we define name a constant name as my name or your name whatever you want and concepts age I made it up 35 okay and then we use those variables here and their values are going to be substituted here where this dollar sign with the curly braces is okay so let's do the same for the other blank the other blank is for the age dollar sign over and close curly braces and then inside you give you have to say the name of the variable this case the variable is called age so age holds the value right now 35 so you expect to 35 to be substituted here for name my variable has the value my name which will be substituted here okay so this is called string interpolation let's finish it up with the closing oops actually already had it another line finish it up and enter okay so hello my name is my name and I am 35 notice the value of the variable age is substituted here years old okay so this is string interpolation using the back tick and JavaScript ES6 okay make sure when you try this you always have the latest version of a modern browser because they should support the ES6 notation okay if you are using a really old version of a browser that does not even support ES6 you might this might not work okay anyway so that's the string interpolation of the back tick and with that we end this lesson thank you so much for watching and please like and subscribe and until the next time bye
No comments yet (loading...)
No comments yet (loading...)
Did you like the lesson? 😆👍
Consider a donation to support our work: