Why do template literals like 'some ${string}' or "some ${string}" not actually insert the values of mentioned expressions?

Question

I wanted to try using template literals and it’s not working: it’s displaying the literal variable names, instead of the values. I am using Chrome v50.0.2 (and jQuery).

Example

console.log('categoryName: ${this.categoryName}\ncategoryElements: ${this.categoryElements} ');

Output

${this.categoryName}
categoryElements: ${this.categoryElements}

Use grave-accents ` and not single-quotes ' or double-quotes ". — Soubhik Mondal
– Soubhik Mondal, Commented May 16, 2016 at 2:04

Tim Grant · Accepted Answer · 2020-11-25 02:37:26Z

211

+50

JavaScript template literals require backticks, not straight quotation marks.

You need to use backticks (otherwise known as "grave accents" - which you'll find next to the 1 key if you're using a QWERTY keyboard) - rather than single quotes - to create a template literal.

Backticks are common in many programming languages but may be new to JavaScript developers.

Example:

categoryName="name";
categoryElements="element";
console.log(`categoryName: ${this.categoryName}\ncategoryElements: ${categoryElements} `)

Output:

VM626:1 categoryName: name 
categoryElements: element

See:

Usage of the backtick character (`) in JavaScript

edited Nov 25, 2020 at 2:37

answered May 16, 2016 at 2:13

Tim Grant

3,4664 gold badges25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andrew T Finnell Over a year ago

Wow, you wouldn't believe how long it took me to find this. It is incredibly not evident this was the problem, especially sense the back tick is used to CREATE code segments in Markdown and the like. It's really easy to just think the back tick was a code marker and then mentally translate it to a single tick. Thank you, thank you kindly.

Amadan Over a year ago

"If you're using a QWERTY keyboard" ...with a US layout. Some QWERTY layouts (e.g. QWERTY JIS) do not place the backtick there.

starball Over a year ago

spec link: tc39.es/ecma262/multipage/…

Lloyd Dominic · Accepted Answer · 2021-02-15 00:31:55Z

3

There are three quotation marks, but just one entrance is working which we can use as TEMPLATE LITERALS:

" " (é key on keyboard) is not working:

console.log("Server is running on port: ${PORT}")

' ' (Shift + 2 key on keyboard) is not working:

console.log('Server is running on port: ${PORT}')

` ` (Alt + Num96 key on keyboard) is working:

console.log(`Server is running on port: ${PORT}`)

Screenshot of console.log(Server is running on port: ${PORT})

edited Feb 15, 2021 at 0:31

Lloyd Dominic

8089 silver badges26 bronze badges

answered Feb 14, 2021 at 15:01

ilyas

711 silver badge3 bronze badges

1 Comment

phuzi Over a year ago

Be careful, there are many different keyboard layouts! The British QWERTY layout has " as shift + 2 with both ' and ` having their own keys where no modifier is needed.

Collectives™ on Stack Overflow

Why do template literals like 'some ${string}' or "some ${string}" not actually insert the values of mentioned expressions?

Example

Output

2 Answers 2

JavaScript template literals require backticks, not straight quotation marks.

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Example

Output

2 Answers 2

JavaScript template literals require backticks, not straight quotation marks.

3 Comments

1 Comment

Linked

Related