Getting stuck with creating a string using Template Literals

JavaScript
1

Tell us what’s happening:
this is what we get
string interpolation
It allows computation though
so ${person.name} appends a string to the initial string
basicly it means to concat a string plus the dollar sign
what is the dollar sign though
why is there a ` ? instead of the ‘’ or ’ we normally uses?
why did the conact with + go?
the more i try to understand the more it confuses
can someone explain it?

Your code so far


const result = {
 success: ["max-length", "no-amd", "prefer-arrow-functions"],
 failure: ["no-var", "var-on-top", "linebreak"],
 skipped: ["id-blacklist", "no-dup-keys"]
};
function makeList(arr) {
 "use strict";

 // change code below this line
 const resultDisplayArray = null${a + b};
 // change code above this line

 return resultDisplayArray;
}
/**
* makeList(result.failure) should return:
* [ `<li class="text-warning">no-var</li>`,
*   `<li class="text-warning">var-on-top</li>`,
*   `<li class="text-warning">linebreak</li>` ]
**/
const resultDisplayArray = makeList(result.failure);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Safari/605.1.15.

Challenge: Create Strings using Template Literals

Link to the challenge:
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals

3

Yes but, no: I quote " Firstly, the example uses backticks ( ``` ), not quotes ( ' or " ), to wrap the string." it doesn’t tell why the change is made just that it did change. Like they would use the quotes around words to make it a string because, people have being using these into books through the century’s going for the quote marks was a logical choice. And that’s why we use quoting that way into JS.

Quote: ${ and } . Similarly, you can include other expressions in your string literal, for example ${a + b} . This new way of creating strings gives you more flexibility to create robust strings.
Where it comes from and why that is it doesn’t tell us.
The {} can be said to be a replacement of 4 spaces if we did have the curly braces we would have to use the 4 spaces. This is in order to avoid errors because, otherwise the computer would have essentially have trouble reading the code.

This is all explained in detail within the challenge description. No it doesn’t at all it just tell it is not why it is done for that specifiek reason. JS has a reason for everything so far. So somewhere there should be an explanation for this as well.

4

The reason is that is the way template literals are designed to work. You have to surround the overall string with single backticks. You can not use single or double quotes to surround it. If you want to incorporate a variable, function evaluation, or expression, you must prefix it with $ and wrap it in { and }. That is just the way it is. Why they chose this syntax? I have no idea and personally do not care. What is important is that I understand how to use it. It is kind of like asking why did they use [ and ] to designate and an array instead { and }.

The only why I can give you, is the part about flexibility. Instead of having to concatenate a bunch of strings and make my code unreadable, I can use template literals to clean it up.
Without using Template Literal

const firstName = 'Randell';
const lastName = 'Dawson';
const city = 'San Jose';
const sentence = 'There is a mod named ' + firstName + ' ' + lastName + ' ' who lives in ' + city + '.';

Using Template Literal

const firstName = 'Randell';
const lastName = 'Dawson';
const city = 'San Jose';
const sentence = `There is a mod named  ${firstName} ${lastName} who lives in ${city}.`;

I use them all of the time when creating a string of nested html elements:

const firstName = 'Randell';
const lastName = 'Dawson';
const city = 'San Jose';
const html = `
  <div>
    <h1>${firstName} ${lastName}</h1>
    <p>City: ${city}</p>
  </div>
`;

Without using template literal:

const firstName = 'Randell';
const lastName = 'Dawson';
const city = 'San Jose';
let html = '<div>';
html += '<h1>' + firstName + ' ' + lastName + '</h1>';
html += '<p>City: ' + city + '</p>';
html += '</div>';
1 Like