Lesson 08
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: