meaning of javascript sign $?

Question

scuse me , what does that mean inside of a javascript program text

console.log(`${ingredientAmount} ${unit} ${name}`); ?

This is the textprogram containing the line mentioned before:

const hummus = function(factor) {
  const ingredient = function(amount, unit, name) {
    let ingredientAmount = amount * factor;
    if (ingredientAmount > 1) {
      unit += "s";
    }
    console.log(`${ingredientAmount} ${unit} ${name}`);
  };
  ingredient(1, "can", "chickpeas");
  ingredient(0.25, "cup", "tahini");
  ingredient(0.25, "cup", "lemon juice");
  ingredient(1, "clove", "garlic");
  ingredient(2, "tablespoon", "olive oil");
  ingredient(0.5, "teaspoon", "cumin");
};

It says it right in that message: separate blocks of code by blank lines and indent 4 spaces. — Pointy, Sep 12 '18 at 17:35
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals — robertklep, Sep 12 '18 at 17:37
Those are [template literals/string templates](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) — Dom, Sep 12 '18 at 17:37

Danziger · Answer 1 · 2018-09-12T17:45:00.283

1

That's a template literal / template string, the ${ and } are the tokens to define placeholders that would be replaced by the value of the expression inside them.

So this:

console.log(`${ ingredientAmount } ${ unit } ${ name }`);

With a normal string would be:

console.log(ingredientAmount + ' ' + unit + ' ' + name);

edited Sep 12 '18 at 17:45

answered Sep 12 '18 at 17:38

Danziger

19,628
4
53
83

*"That's a template literal/string"* No, it's a template literal (no "/string"). When it's evaluated without a tag function, it produces a string. But when used with a tag function, the result isn't necessarily a string. – T.J. Crowder Sep 12 '18 at 17:40
They were called `template strings` in previous versions of the specification, so it's still worth mentioning both names as there are resources available that call them like that. For example: https://developers.google.com/web/updates/2015/01/ES6-Template-Strings – Danziger Sep 12 '18 at 17:43
Anyway, it might be confusing the way it was written. Now it should be clearer. – Danziger Sep 12 '18 at 17:45
1

They weren't called template strings in any of the specifications, going back to ES2015 (it's unfortunate Addy Osmani made that mistake in that article). Perhaps early on in the strawman, but only early on. The less people call them "template strings," the better for comprehension... – T.J. Crowder Sep 12 '18 at 17:59
The first attempt to ask something on stackoverflow = the first bann in asking more questions. That is a help from one-billion-medals-guys to a beginner. – Marius Sep 13 '18 at 09:39

connexo · Answer 2 · 2018-09-12T17:45:07.140

${} in Javascript's ES6 world signals Javascript that while parsing that literal, it's going to find an expression to evaluate inside the curly brackets, which means that when creating a String from the template literal, these parts are going to be replaced by whatever value the expression inside evaluates to at the time of parsing. Backticks enclose the template literal:

`** literal here**`

The expression can not only be variables like shown by you, it could as well be something other like

`Today's date is ${new Date()}. Have a beautiful day!`

or

`The random number of the moment is ${Math.random()}.`

meaning of javascript sign $?

2 Answers2