{"id":20059,"date":"2020-11-25T02:34:17","date_gmt":"2020-11-25T10:34:17","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=20059"},"modified":"2023-12-01T04:04:58","modified_gmt":"2023-12-01T12:04:58","slug":"javascript-string-interpolation","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-string-interpolation\/","title":{"rendered":"JavaScript String Interpolation: A Beginner\u2019s Guide"},"content":{"rendered":"\n

JavaScript string interpolation is the process of embedding an expression into part of a string. A template literal is used to embed expressions. You can add values such as variables and mathematical calculations into a string using interpolation.<\/em><\/p>\n\n\n\n

Do you need to add a value inside a JavaScript string? The template literal syntax has you covered. Template literals make it easier to work with multiline strings and embed values inside a JavaScript string. Template literals are the JavaScript string interpolation syntax.<\/p>\n\n\n\n

In this guide, we\u2019re going to talk about JavaScript string interpolation. We\u2019ll discuss what it is, how it works, and walk through an example of string interpolation to help you get started.<\/p>\n\n\n\n

Without further ado, let\u2019s begin!<\/p>\n\n\n\n

JavaScript String Interpolation<\/h2>\n\n\n\n

You can add values into a JavaScript string using a template literal. This is a dollar sign followed by a pair of curly brackets. Within the curly brackets should be the expression whose value you want to embed in the string.<\/p>\n\n\n\n

Template literals let you embed values into a string without relying on concatenation. To declare a template literal, your string must be enclosed in back ticks (“) instead of quotation marks.<\/p>\n\n\n\n

Consider the following syntax:<\/p>\n\n\n\n

`This is a string. Here is the value of 9 + 10: ${9 + 10}.`<\/pre><\/div>\n\n\n\n
We have declared a template literal. Our expression is:<\/p>\n\n\n\n
${9 + 10}<\/pre><\/div>\n\n\n\n
This expression evaluates 9 + 10. The result of this expression is added to the end of our string, before the full stop. This is because we have written our expression before the full stop.<\/p>\n\n\n\n
JavaScript String Interpolation Example<\/h2>\n\n\n\n
Template literals allow you to embed values directly into a string. Consider this code:<\/p>\n\n\n\n
const address_number = "10 Downing Street";\nconst prime_minister_address = `The Prime Minister's address is ${address_number}.`;\nconsole.log(prime_minister_address)<\/pre><\/div>\n\n\n\n
The first line of code defines the Prime Minister\u2019s address number. Next, we use template literals to create the full address. The ${} syntax is used to embed a value into our string. We have added the value of \u201caddress_number\u201d into the string.<\/p>\n\n\n\n
Let\u2019s run our code:<\/p>\n\n\n\n
The Prime Minister's address is 10 Downing Street<\/pre><\/div>\n\n\n\n
Our code has merged our two strings.<\/p>\n\n\n\n
When you are using template literals, you can embed any value inside the literal. This includes a string, a number, or a the result of a JavaScript math calculation<\/a>. You don\u2019t need to embed a template literal inside a template literal.<\/p>\n\n\n\n
One of the major advantages of string literals is that its syntax is clear. We can embed our JavaScript code directly into our string.<\/p>\n\n\n\n
Merge Strings Using Concatenation<\/h3>\n\n\n\n
We can merge strings using concatenation. Let\u2019s say that we have two strings:<\/p>\n\n\n\n
const full_address = `The Prime Minister's address is `;\nconst address_number = `10 Downing Street`;<\/pre><\/div>\n\n\n\n
You can do concatenate two strings using the plus sign (+):<\/p>\n\n\n\n
const prime_minister_address = full_address + address_number + ".";\nconsole.log(prime_minister_address);<\/pre><\/div>\n\n\n\n
The JavaScript console<\/a> prints out the following value:<\/p>\n\n\n\n
The Prime Minister's address is 10 Downing Street<\/pre><\/div>\n\n\n\n
We have successfully created a string that combines our two strings. At the end, we use the concatenation operator to add a full stop (\u201c.\u201d) to our sentence.<\/p>\n\n\n\n
But, this syntax has a drawback: we can only add values to the end of a string. This is a big reason behind the introduction of template literal syntax. It is now easier to add values in the middle of a string.<\/p>\n\n\n\n
String Interpolation JavaScript: Calculations<\/h2>\n\n\n\n
The code inside a template literal is a JavaScript statement. This means that you can use template literals to perform calculations<\/a> and embed their values into a program.<\/p>\n\n\n\n
Let\u2019s create a string that calculates the price of two drinks at a caf\u00e9 and places the result inside a string:<\/p>\n\n\n\n
var drink1 = 2.30;\nvar drink2 = 2.20;\n\nvar bill = `The total cost of your drinks is $${drink1 + drink2}.`;<\/pre><\/div>\n\n\n\n
Inside the ${} syntax, we have added a calculation. This calculation adds the values of two JavaScript variables together. Our variables are drink1 (2.30) and drink2 (2.20) together. Our code returns a string with the sum of these values:<\/p>\n\n\n\n
The total cost of your drinks is $4.50.<\/pre><\/div>\n\n\n\n
String Interpolation JavaScript: Ternary Operators<\/h2>\n\n\n\n
JavaScript ternary operators<\/a> let you evaluate whether a statement is True or False. They are a more concise way of writing an if statement. Ternary operators are particularly useful if the result of an if<\/em> statement is only going to take up one line of code.<\/p>\n\n\n\n
If a customer spends over $4.00 on their coffees, they should be presented with their bill. Then, they should be asked to join the coffee loyalty card club. Otherwise, they should just be presented with their bill. We could use a ternary operator to check the cost of a customer\u2019s bill:<\/p>\n\n\n\n
var drink1 = 2.30;\nvar drink2 = 2.20;\nvar total = drink1 + drink2;\n\nvar bill = `The total cost of your drinks is $${total}. ${total > 4.00 ? "Would you like to join our coffee club? It will earn you a free coffee for every ten that you buy." : ""}`;\nconsole.log(bill);<\/pre><\/div>\n\n\n\n
Our template literal contains two embedded expressions. First, we embed the value of \u201ctotal\u201d inside our string. Next, we use a ternary operator to check whether a customer should be asked to join the coffee house\u2019s loyalty card club.<\/p>\n\n\n\n
If the total purchase price is over $4.00, the following message is printed to the console:<\/p>\n\n\n\n
The total cost of your drinks is $4.50. Would you like to join our coffee club? It will earn you a free coffee for every ten that you buy.<\/pre><\/div>\n\n\n\n
Otherwise, our ternary operator will return the value after the colon (\u201c:\u201d). This is the value that is returned when an expression evaluates to False.<\/p>\n\n\n\n
In our example, the value after the colon is an empty string. This means that if a customer\u2019s purchase is under $4.00, only the first sentence of our template literal is returned:<\/p>\n\n\n\n
The total cost of your drinks is $4.50.<\/pre><\/div>\n\n\n\n