What does this ${} syntax do?

Question

From this lesson, you need to understand what ${} syntax is. How does it work and how is it used?

Answer

Sometimes called template literals or template strings, this format is another way to type out a string making use of `` (called a backtick or grave accent). It can be used easily as a replacement.

'Hello'
"Hello"
`Hello`

These are all valid strings, however it adds a couple additional features that make it very useful. First by using backticks, words with an apostrophe can be easily incorporated into the string without use an \ escape character. (note that in the example the second line is valid)

'I haven't seen that'
'I haven\'t seen that'
`I haven't seen that`

Secondly it allows for the introduction of a variable without concatenating (which is what you will use it for in this lesson). This is done using ${var} to add the variable string in-line to your current string.

let captain = 'Jean-luc'
console.log('Paging ' + captain + ' to report to the bridge.')
console.log(`Paging ${captain} to report to the bridge.`)

This is especially helpful if you wish to print out complex statements comparing various variables for example.

Hope this helps, please discuss below. This concept is introduced in Introduction to Javascript - String Interpolation.

3 Likes

What does the tt${}: (I replaced grave accent ` as tt to prevent markup) mean in console.log(tt${crewMember}: ${spaceship.crew[crewMember].name}tt)?

3 Likes

I’m puzzled. The examples introduce formatting/syntax that are new to me but go unexplained. Why are the backticks necessary in the console.log statement, and where do the dollar signs come from? (Maybe that has been explained in very early lessons that I finished a long time a go, but I’ve reviewed every lesson now that I’ve returned to learning javascript, star). Also: where does this dollar sign come from all of a sudden? Why is ‘crewMember’ surrounded with accolades at first and then with square brackets?
Update (while writing): after reviewing earlier lessons, it appears that these back ticks and dollar signs are explained in the ‘Variables’ lesson, at ‘8. String interpolation’. I don’t think they have made an appearance in any subsequent lesson until now. I may not be the first person who’s thrown off by their sudden reappearance.

10 Likes

${} 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.

6 Likes

I think it would be a lot more helpful for people who are trying to learn JS through these lessons to introduce new concepts instead of just throwing them at people and hoping that they will go to the forums to investigate. Template literals or the fact that a ‘for…in’ loop iterator returns a string were not explained in this or the previous lessons which created a lot of unnecessary confusion.

Correction: They do mention that keys are strings in Lesson 2 of the Module and introduce template literals at the very start of the course however it would be good to repeat that in a ‘Don’t forget that keys are strings!’ form that some educational books use in the margins. It also seems that some people don’t really understand or grasp what a datatype is aside from the superficial visual distinction of it being in quotation marks. Maybe an additional explanation would be good when introducing them.

As well, I think it would be good to add that a for…in loop only iterates over the keys of an object and it knows nothing about the object otherwise. This would clear up people’s assumptions that if you can iterate over the keys of an object then you must be able to do other things with it.