Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics Working with jQuery Collections Looping through a jQuery collection

Posted by ICHEN WU
ICHEN WU
Courses Plus Student 5,427 Points

Can anyone help explain the following code? append(`(${url})`)?

I learned about ES2015, so I understand the back-ticks part, but I don't understand why is she putting $ and {} inside back-ticks? I thought we only put:

append(`(url)`)

...would be fine, why not?

$('a').each(function(){
  const url = $(this).attr('href');
  $(this).parent().append(`(${url})`);
})

Could someone help explain? thanks!

2 Answers

Osaro Igbinovia
.a{fill-rule:evenodd;}techdegree
Osaro Igbinovia
Full Stack JavaScript Techdegree Student 15,928 Points

Ni hao Wu, template literals makes use of backticks (``) for simpler concatenation. It can further be used with ${} for interpolation. ${} are used to mark the dynamic values in a template literal. Think of it as a form letter with blanks to hold names or numbers that can be filled in later. For example:

var name = 'Ichen Wu';
var greeting = `Hello ${name}, nice to meet you`;
console.log(greeting);

Here I'm interpolating or filling in the variable 'name' into the template literal to be evaluated as 'Ichen Wu' when the program runs. In your console, 'Hello Ichen Wu, nice to meet you' will be logged out.

ICHEN WU
ICHEN WU
Courses Plus Student 5,427 Points

Ni Hao, and thanks Osaro! Very expressive :D Think I didn't learned this part in treehouse courses.... maybe I missed it somewhere!

Nice to meet you too. Happy coding & Merry Christmas

Christian Higgins
Christian Higgins
15,758 Points
Christian Higgins
Christian Higgins
15,758 Points

Just to piggyback off Osaro's great answer because I didn't get this at first either.

In the video about the 4:25 mark, she says "String interpolation is done using a new feature of ES2015 called template literals. And if you're not yet familiar, you can check out a link in the teacher's notes.."

And there's a link to the Template Literals video in the Getting Started with ES2015 course in the Teacher's Notes below.

Jieying Tham
Jieying Tham
16,491 Points

to reply to the extra () that she used, this will allow the url to appear with the parenthesis. No special reason. If you don't like the link to appear in the parenthesis, you can remove it, ${url} and the code will still work.

`(${url})` is equal to "(" + url +")"