${} is just a lot cleaner to insert variable in a string then using + : let x = 5; console. log("hello world " + x + " times"); console. log(`hello world ${x} times`); for ${} to work, the string needs to be enclosed in backticks.
The ${} syntax allows us to put an expression in it and it will produce the value, which in our case above is just a variable that holds a string! There is something to note here: if you wanted to add in values, like above, you do not need to use a Template Literal for the name variable.
Curly braces { } are special syntax in JSX. It is used to evaluate a JavaScript expression during compilation. A JavaScript expression can be a variable, function, an object, or any code that resolves into a value.
It's called template literals, It is a feature of ECMASCRIPT6 (ECMASCRIPT2015)
You're talking about template literals.
They allow for both multiline strings and string interpolation.
Multiline strings:
console.log(`foo
bar`);
// foo
// bar
String interpolation:
var foo = 'bar';
console.log(`Let's meet at the ${foo}`);
// Let's meet at the bar
As mentioned in a comment above, you can have expressions within the template strings/literals. Example:
const one = 1;
const two = 2;
const result = `One add two is ${one + two}`;
console.log(result); // output: One add two is 3
You can also perform Implicit Type Conversions with template literals. Example:
let fruits = ["mango","orange","pineapple","papaya"];
console.log(`My favourite fruits are ${fruits}`);
// My favourite fruits are mango,orange,pineapple,papaya
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With