Template Strings

Question 1

What is the es6 answer to this?

var text = ‘my dog is: ‘ + 5 + ‘ years old’

Answer 1

Template strings

Question 2

What character do template strings use?

Answer 2

`

backtext

Question 3

How do you insert a variable in backtext?

Answer 3

Using ${ variable }

Question 4

Do you need plusses in back text?

Answer 4

No.
let age = 5;
const text = `my dog is: ${age} years old'

Question 5

Can you run any javascript inside of backtext?

Answer 5

Yes
const text = `my dog is: ${age * 7} years old'

Question 6

How does ES6 template string behave in terms of new lines and spacing etc?

Answer 6

You can write them without any \

They preserve new lines and tabbing.

Question 7

Are Template String nestable?

Answer 7

Yes

Question 8

How would you create a list in a template string from an objects data?

Answer 8

const dogs = {
name: hugo,
age: 5,
etc
}

const markup = `
<ul>
    ${dogs.map(dog => `<li>${dog.name} is ${dog.age}</li>`)}
</ul>
`;

Question 9

The output contains comma’s, why is this?

Answer 9

Because map returns an array, we just join with nothing.

const markup = `
<ul>
    ${dogs.map(dog => `<li>${dog.name} is ${dog.age}</li>`).join('')}
</ul>
`;

Question 10

If you need looping inside of a template string what function could you use?

Answer 10

A map arrow function.

Question 11

How would you run an external function to populate some template data?

Answer 11

const template = `
${ renderKeywords(beer.keywords) }
`
The function can then do a map and return the list items from elsewhere

Question 12

How do you use an if statement in a template string?

show only song.featuring when it is present.

Answer 12

Using a ternary operator.

${song.featuring ? ` (featuring ${song.featuring} ` : ‘’ }

Question 13

Name two reasons Tagged template are useful for.

Answer 13

pre-processing the templates information in an external function to embellish or santitize user information.

Question 14

creating an element with javascript?

Answer 14

document.createElement(‘p’);