Why should we use template literals?

Why can’t we use template literals (``) all the time instead of normal string quotes ("" / ‘’)?

1 Like

We can use back ticks on all strings, with a few exceptions.

aString = `this is a valid string`
4 Likes

why would you go through the trouble of adding the money sign and curly brackets when you could just use plus signs?
('My name is ’ + myName + ’ My favorite city is ’ + myCity);
the output is exactly the same. are there instances where the plus signs wont work and you have to us ${}?

8 Likes

No. Both will work, but sometimes the 'bla bla' + 'bla bla (' + someVariable +') bla bla' OR
"bla bla " + someVariable + " bla 'direct quote' " + "bla bla" OR
using variables to build a path to a file: 'C:\'+someUser+'\'+someFolder+'\'+someSubFolder+'\'+someFileName
Can all be confusing. You can use the method you prefer, but you should be familiar with both. Also in JavaScript the \ is an escape character, so the code I wrote above would not produce the desired outcome. You could use double \\ 's to produce a \, or this:

`C:\${someUser}\${someFolder}\${someSubFolder}\${someFileName}`
26 Likes

Three things are made possible with this new syntax:

let backTick = `\` \``
let singleString = `
1. A single set of back ticks (${backTick}) to enclose the entire line. 
2. Direct interpolation of a variable, in place in the string.
3. The ability to write multiple lines in a single string.
`
console.log(singleString)
1. A single set of back ticks (` `) to enclose the entire line. 
2. Direct interpolation of a variable, in place in the string.
3. The ability to write multiple lines in a single string.

Apart from that there are other considerations.

  • No need to use standard quotes anywhere in the script. Back ticks can be used on all strings (with few possible exceptions).
  • Since the interpolation accepts all expressions, we can use template literals within the { }'s.
33 Likes

wow, that actually makes a lot more sense now, thanks

3 Likes

as there is string concatenation why we again going for string interpolation

String interpolation makes things so much simpler.

  • only one pair of quotes (back-ticks)
  • embedded (interpolated) variables and expressions
  • multiple lines within the quotes (pre-formatted text)
  • treated like strings so can be assigned or be a return value
let r;
r = prompt("Enter a radius")
console.log(`A circle of radius, ${r} has a diameter, ${2 * r}, a circumference, ${Math.PI * 2 * r}, and an area, ${Math.PI * r ** 2}.`);

Without string interpolation we would need four pairs of quotes and seven plus signs, and would need to be mindful of white space. Lots of room for error which the above clearly avoids.

41 Likes

The way I conceptualized this exercise is that we can use the back-tick to create a string out of combined variables. Instead of having to worry about adding quotes on numbers and not on strings, we simply turn the whole statement into a string, and simply create a container for the variable names ${myVariable}

3 Likes

Bear in mind that not only variables, but expressions may be written in the placeholder.

4 Likes

Thanks, I’d like to ask another question, unrelated to this matter, if you don’t mind.

I am taking this course in beginning JavaScript, as well as working through some other guides online. I can tell that in the future, to really be able to really implement the full power of JS there will be math involved. I am an older student (53) and my math skills are rusty (which is an understatement.)

If I wanted to take some remedial classes alongside this course, do you recommend any? Which math skills should I re-learn that are most common to writing code?

3 Likes

There is some overlap between programming and math, but not a large prerequisite syllabus.

If you have time and patience and are willing to put in the hours, Khan Academy has an excellent Math module from elementary right up to college.

We don’t necessarily need any math skills to learn basic programming. Syntax, variables, data types, operations, loops and basic logic can all be learned without knowing arithmetic. However, some of the problems do involve simple math.

+  => addition
-  => subtraction
*  => multiplication
/  => division
** => exponentiation
%  => modulo (remainder)

If you can get your hands on some middle school (Gr. 7, 8, 9) math texts and go through them to pick up the basics on algebra and geometry, that would be a good place to start. In Canada we have GED, which book is also a good examination of core arithmetic/mathematics concepts.

Ultimately, programming allows us to use the computer to handle math operations of all sorts, depending on the objective of the program.

Once you get a handle on the core algebra and geometry concepts, look to cover the basics of trigonometry. It’s a real eye-opener, but from my experience a lot of people struggle with it.

Bottom line, push ahead with learning the basics and if a math problem comes up that you do not quite understand, we’re here to help.

8 Likes

When to use string variables vs template literals?

Back ticks seem to be more useful. Why can’t we use them all the time instead of single quotes?

We can, in most instances. Must admit, though, habit has me using conventional quotes a lot, even now. Experiment. Use them every chance you get and report to us any instances where it throws an error. We can all learn from this data. I’m totally on board with relegating the other quotes to printable characters.


Don’t forget, when HTML is generated in JavaScript is takes a string representation.

div = document.createElement(`div`)

Look for the quotes above.

3 Likes

Oh, wow. That’s awesome.

1 Like

Alright, will try iy out.

2 Likes

Why do we have to use template literals when its easier to use single or double quotations.

Template literals are a huge leap over the old style concatenation method. They offer so much convenience, free up both standard quotes and allow interpolation in nested expressions. No why about it. They are way easier to use and more than just a convenience.

1 Like

Template literals are very useful as they allow you to interpolate variables and expression into a string. They also free up the single and double quotes. I will probably start using template literals more often, but I am used to the standard quotes