The “${} (dollar sign and curly braces)” in a string acts as a placeholder that interprets the expression placed inside it. Anything that is placed inside “${}” is treated as JavaScript. It plays an important role in referencing the specific expression to a variable instead of concatenation. The “${}” executes the provided variable and replaces it with the computed value that it considers as its output.
This guide explains the use of “${}” (dollar sign and curly braces) in a string using JavaScript.
How to Use “${} (dollar sign and curly braces)” in a String Using JavaScript?
The “${}” is used as a template literal to specify JavaScript expressions i.e., arithmetic operations, variables, etc. The expression placed inside the “${}” placeholder is executed at runtime. Its standard output is returned as a string value to template literals.
Syntax
The “${}” accepts only one argument “JavaScript expression” that executes at run time.
Let’s implement the above syntax to explain the practical implementation of “${}” in a string using JavaScript with the help of various practical examples.
Example 1: Use “${}” to Invoke a Variable (Computing the Square)
This example applies “${}” to invoke the variable computing the square. The “${}” will replace the variable value and return the standard output.
JavaScript Code
Consider the following code snippet:
let side = 6;
let area = side*side;
console.log(`The area of square is: ${area}.`);
</script>
In the above code:
- Declare the “side” variable that stores an integer value.
- Another variable “area” specifies the square area formula.
- Lastly, the “console.log()” method uses the “${}” placeholder having the “area” variable in the curly braces to return its calculated value.
Output
The output displays the computed area of a square without returning any error.
Example 2: Use “${}” to Execute an Arithmetic Expression
The “${}” template literals also accept the arithmetic expression and return its result as a string. It is used in the following example to compute the sum of two numbers:
let x = 2;
let y = 4;
console.log(`The sum of numbers is: ${x+y}.`);
</script>
In the above lines of code:
- The variables “x” and “y” are defined with the keyword “let” containing the integer values.
- The “console.log()” method applies the “${}” template literal to invoke the defined integer values, apply the specified arithmetic expression and return the calculated value.
Output
As seen, the output shows the sum of specified numbers.
Example 3: Use “${}” to Invoke a User-Defined Function
In this example, the “${}” invokes the user-defined function to perform the specified task:
function recarea(length,width){
return length*width;
}
let length = 7;
let width = 5;
console.log(`The area of rectangle is: ${recarea(length,width)}`);
</script>
In the above code snippet:
- Define a function named “recarea()” having two arguments “length” and “width”.
- This function returns the computed rectangle area using its formula.
- After that, the “length” and “width” variables are declared outside the function that specifies the integer values.
- Lastly, the “console.log()” method invokes the user-defined function inside the “${}” template literal to calculate the rectangular area based on the defined integer values.
Output
The outcome returns the calculated rectangle area accordingly.
Conclusion
JavaScript provides the placeholder “${}” for embedding the JavaScript expression, invoking a user-defined function, etc. It treats the expression as a literal and computes its value. It executes the provided expression at runtime and returns the output as a string value. This guide demonstrated the complete usage of the “${}” in a string using JavaScript.
