JavaScript Basics

JavaScript Advanced

JavaScript Arrays

JavaScript Functions

JavaScript Objects

JavaScript DOM

JavaScript String

What is ${} in JavaScript?

${} is a placeholder that is used in template literals. You can use any valid JavaScript expression such as variable, arithmetic operation, function call, and others inside ${}. The expression used inside ${} is executed at runtime, and its output is passed as a string to template literals.

For your better understanding of what is ${} in JavaScript, you must be familiar with template literals and string interpolation. In case you are not, then visit the following pages:

How to use variables in template literals?

Instead of using string concatenation, you should use template literals to create the string that involves variables. To use variables inside template literals, you have to write the variable inside ${}. And when you execute the code, ${variable} will be replaced with that variable's value.

//JavaScript program to calculate the area of circle.
let radius = 4;
let area = Math.PI*radius*radius;
console.log(`The radius of circle is ${radius}.`);
console.log(`The area of circle is ${area}.`);

Output

"The radius of circle is 4."
"The area of circle is 50.26548245743669."

How to do arithmetic operations inside template literals?

You can easily perform arithmetic operations inside template literals. All you have to do is write a valid arithmetic operation inside ${}. At runtime, the arithmetic operation is performed, and its result is returned as a string. Let's understand it by calculating the area and perimeter of a rectangle.

//JavaScript program to calculate the area and perimeter of rectangle.
let length = 4;
let width = 3;
console.log(`The area of rectangle is ${length*width}.`);
console.log(`The perimeter of rectangle is ${2*(length+width)}.`);

Output

"The area of rectangle is 12."
"The perimeter of rectangle is 14."

How to call a function from template literals?

From within the template literals, you have to call a function in a way you used to call the function. At runtime, ${functioncall()} will be replaced by the result returned by the function.

//JavaScript program to calculate the area of square.
function area(side){
	return side*side;
}
let side = 9;
console.log(`The area of square is ${area(side)}`);

Output

"The area of square is 81"