Concatenation in Javascript Demystifying various method in strings and inserting HTML code

[codeispoetry]

I often get confused when passing HTML in JS variables/objects.

If I start with a relevant example:

var message = data.name.first+' '+data.name.last ;

My Point of confusion:

Are we interchangeably using the + sign?

In the above example I tried to add an image:

var message = data.name.first+''+data.name.last + '<br><img src="+data.picture.large+" alt="">';

But this actually didn’t work.

I also have seen a few code writers using {} brackets to do the same. Can we also discuss that

Can we discuss this, the best practice and usage of " ", '', + sign when to use how to insert strings and how to insert HTML code?

[James_Hibbard]

@codeispoetry

I also have seen a few code writers using {} brackets to do the same. Can we also discuss that

For string concatenation you should probably be using template literals, unless you have to support legacy browsers (in which case, bad luck).

So this:

var message = data.name.first+' '+data.name.last ;

Becomes:

const fullName = `${data.name.first} ${data.name.last}`;

Also, this:

var message = data.name.first+''+data.name.last + '<br><img src="+data.picture.large+" alt="">';

is a nightmare to read/maintain.

This is much cleaner:

const fullName = `${data.name.first} ${data.name.last}`;
const htmlSting = `
  <p>${fullName}<p>
  <img src="${data.picture.large}" alt="${fullName}">
`;

[m_hutley]

@James_Hibbard

support legacy browsers (in which case, bad luck).

its worth pointing out here that ‘legacy browsers’ includes any version of Internet Explorer.

[Paul_Wilkins]

Yep, it’s still going.

[James_Hibbard]

@m_hutley

its worth pointing out here that ‘legacy browsers’ includes any version of Internet Explorer .

If you have to support IE and write more than a handful of JavaScript, use Babel.

[codeispoetry]

@James_Hibbard

const fullName = ${data.name.first} $ {data.name.last};

Yoou have given a spacebar after 2nd $ to give a real space on live webpage or that is a typo?

[James_Hibbard]

Typo. Sorry.