String interpolation in JavaScript
In JavaScript, there are three ways to create strings, or string literals.
We can use single quotes:
const hello = 'Hello, World!';
We can use double quotes:
const hello = "Hello, World";
We can use a pair of backticks, which permits string interpolation.
const hello = `Hello, World!`;
String Interpolation
String interpolation consists of replacing placeholders with values in a string.
String interpolation in JavaScript is done by using template literals or template strings. These are strings with placeholders within the backticks.
const value = 10;
const message = `The value is ${value}.`;
console.log(message); // The value is 10.
The Placeholder
The placeholder can contain string variables.
const hello = 'Hello';
const world = 'World';
const message = `${hello}, ${world}!`;
console.log(message); // Hello, World!
The placeholder can contain operators.
const first = 2;
const second = 3;
const message = `The sum of ${first} and ${second} is ${first + second}.`;
console.log(message); // The sum of 2 and 3 is 5.
The placeholder can contain function calls.
function sum(first, second) {
return first + second;
}
const first = 2;
const second = 3;
const message = `Sum: ${sum(first, second)}.`;
console.log(message); // Sum: 5.
Placeholder String Conversion
The expression in a placeholder is implicitly converted to a string.
A number in a placeholder is transformed into a string:
const value = 11.2;
const message = `Number is ${value}.`;
console.log(message); // Number is 11.2.
The expression in the placeholder ${value}
is transformed into a string and inserted into the interpolation.
If the placeholder contains an object, the object is converted to a string as well. The toString()
method of the object is called to get the string representation of the object.
What if we insert an array into a template string?
const myArray = [2, 4, 6];
const message = `The array values are ${myArray}.`;
console.log(message); // The array values are 2,4,6.
The toString()
method on an array will do a join(',')
on the array when it is converted to a string.
Escaping placeholders
Since the placeholder ${}
holds a special meaning in interpolated strings, if we want to use a sequence of characters with ${}
, they must be escaped.
const mySymbol = `Symbol ${xyz}`;
console.log(mySymbol); // ReferenceError: xyz is not defined
Using ${xyz}
directly will throw an error because ${xyz}
is expected to be a placeholder. Adding a backslash \
before the placeholder will treat it as a sequence of characters instead.
const mySymbol = `Symbol \${xyz}`;
console.log(mySymbol); // Symbol ${xyz}
The same is true for the following sequences of characters.
const mySymbols = `Symbols \${xyz} \${xyz \${`;
console.log(mySymbols); // Symbols ${xyz} ${xyz ${