javascript - what does ${} do?

Question

I have seen ${ } being used in many javascript codes. What exactly does this do?

For example:

 updateDisplay(){
        if(this.operation != null){
            this.previousOperandTextElement.innerText = ${this.previousOperand} ${this.operation};
        }
        this.currentOperandTextElement.innerText = this.currentOperand;
    }

Why would we not use + to concatenate in this case?

`${ }` called [Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) - Very brief explanation in this link - Also, *Template literals are enclosed by the backtick (` `)* — Always Helping, Aug 12 '20 at 02:27
Are you sure there is not ` backticks ` around those? The code you have posted is a syntax error. — Adrian Brand, Aug 12 '20 at 02:30

Richie Bendall · Answer 1 · 2020-08-12T02:32:45.287

1

It's called a template literal. It achieves the same thing as concatenation but in a more readable manner:

const a = "Hello"
const b = "."

console.log(`${a} World${b}`)

edited Aug 12 '20 at 02:32

answered Aug 12 '20 at 02:27

Richie Bendall

3,783
2
24
36

Are there any differences between using template literals and using '+' to combine the strings? Is there any case where it would be preferable to use one over the other? – chibiw3n Aug 12 '20 at 02:30
Using templates is vastly more readable that string concatenation. – Adrian Brand Aug 12 '20 at 02:31

javascript - what does ${} do?

1 Answers1