Concatenation and Interpolation | Bondar Academy
Course: JavaScript for Testers
Module: JavaScript Fundamentals
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore concatenation and interpolation , two techniques for modifying and combining string values in programming. Key Concepts Concatenation : This involves breaking a string into smaller parts and combining them using the + operator. Interpolation : This method allows you to embed variables directly within a string using a specific syntax. Example Scenario Imagine we are working on a shopping cart for a website. We want to display a message like: The price for your cup is $50. Here, the variables cup and 50 will change based on user selection. Concatenation Process Create variables for the item and price: let price = 50; let itemName = "cup"; Combine strings using concatenation: let message = "The price for your " + itemName + " is $" + price; This results in the message being dynamically generated based on the variables. Interpolation Process Use backticks to create a template string: let message = `The price for your ${itemName} is $${price}`; Interpolation provides a cleaner syntax and is commonly used in JavaScript. Conclusion Both concatenation and interpolation are essential for combining values into strings. The choice between them often comes down to personal preference and the specific requirements of the code.
Video Transcript
In this lesson, we will talk about concatenation and interpolation. So both of those techniques is the approach how you can modify the strings and combine the strings values together. So concatenation and interpolation has just a slightly different syntax, but essentially have the same result. And combining different strings and combining values together into the new value is also one of the basics, which is important to know in the programming language. So let's get into it. So let's imagine a situation that we work on the website. In our shopping cart, we want to print the message, message to print something like this. The price for your cup is $50. The variables cup and 50 will be changed, right? If we want to buy a table, but not a cup, of course, this text should be different and the price 50 also should be different. So we want to replace cup and 50 with the variables and the rest of the text we want to keep as is. So how to do that? First of all, let me create those two variables that will represent our product and the price for our product. Price equals to 50 and the second variable item name equals to cup. And since this is a string, I put it into the double quotes. Let me print console.log message to print. Let me quickly to print this message to see that it is displayed correct. And here we go. The message is printed. So let's replace cup with a variable item name and price with variable price. How to do that? With the concept called concatenation, we need to break our string into a smaller strings and combine them together. So how to do that? So let me break this string first, right? So now I have two strings together. This is a string number one plus string number two. And as a result, they will give me exactly the same string as my initial string, but without the value cup. Now let me add the item name into this string plus item name plus. I print it one more time and now we have the price for your cup. We are missing this space is $50. So I'm adding this space over here, printing one more time. Now we have the string how we had it before, but the cup is replaced with a variable. Now let's do exactly the same thing with the price. So we're breaking the string into the two strings. Okay, I remove dollars and then through the plus, I'm adding price plus dollars. And I'm printing. Here we go. And now we have a message. Your price for your cup is $50. Now we can replace cup with a table and change the price and print it one more time. And now we have a new message. The price for your table is $80. So that's the approach number one called concatenation. The syntax rule is simple. So you take several strings and combine those strings using the plus sign and you will get a new result string which we are saving into the new variable. The second concept called interpolation. Let me create a second variable, message to print. And in order to create the same message with the variables, the syntax for interpolation is a little bit different. I create a string using a backtick, this symbol. So the symbol is located on the left from the key with number one on your keyboard under escape button, and I print the same message, the price for your. And then item name, how to provide the item name variable. So we do not use plus here as in concatenation. The syntax is a little bit different. So I use dollar sign, I use curly braces and then put the item name is, then the second variable, price and dollars, okay? And I'm doing message to print, message to print two, message to print two, so we need to have unique variable names. And here we go. You see, okay, I made a little misspell. The price for your item is $80. So we can see that the strings are identical. So, sorry, I make a few mistakes. One more time, here we go. The strings are absolutely identical, but the syntax is a little bit different. And the second approach called interpolation, that's it. So the concatenation, this type of the format, is very typical for all programming languages. When you take the string, then use a plus sign to combine the variables and this result into a new value that you can send in the variable. Interpolation approach is very typical for a JavaScript, when the difference is that you create a single string, but replace a needed section of your string with the variables. And variable is defined inside of the string with a dollar sign and curly braces. So the concatenation or interpolation is very useful when you need to combine several values into a new one and use it for later on in your code. Later in the class, we will use this concept many times, and it's up to you which approach you will choose. It's just a preference in the syntax. All right, that's it, guys, and see you in the next lesson.