js: please explain this variable value with 5 double quotations

Question

Please, take a brief look at the code below:

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul class="recommended">');
 var i;
 var j;
 for (i = 0; i < json.feed.entry.length; i++)
 {
  for (j = 0; j < json.feed.entry[i].link.length; j++) {
   if (json.feed.entry[i].link[j].rel == 'alternate') {
    break;
   }
  }
var postUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var postTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ postUrl + '" target="_blank">' + postTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="https://xxxxxxxxxx.blogspot.com/feeds/posts/summary/-/recommended?max-results=3&alt=json-in-script&callback=recentpostslist"></script>

Background info

I found this somewhere on the Internet yesterday, and have been trying to modify it a bit, since.

Variables i and j were originally declared within the for loop, as in...

for (var i = 0; i < json.feed.entry.length; i++)
{
 for (var j = 0; j < json.feed.entry[i].link.length; j++) {
  if (json.feed.entry[i].link[j].rel == 'alternate') {
   break;
  }
 }

...

...but after doing a bit of (beginners') reading on w3schools.com, I got the impression that they're recommending keeping the variables declaration outside the for loop. My programming skills are scant, at their very best, so truth be told, I have no idea whether my impression was right.

Then I assigned a class to the <ul> element at the beginning (3rd line).

So far, so good. I checked, and the script was still working.

What it does is list the titles of a blog's 3 latest posts that have been labeled "recommended".

Then I made an attempt to assign a class to the <li> element that's declared as a... ehm... part of the value (have I understood that right?) of the item variable on line 15:

var item = "<li>" + "<a href="+ postUrl + '" target="_blank">' + postTitle + "</a> </li>";

But that seems to invalidate the code, which came as no surprise, really, since it did seem like a bit of a long shot.

My question

When taking a closer look at this line of code, however, I must say I was quite baffled by all the quotation marks (single and double).

It would be greatly appreciated if someone could explain
"<a href="+ postUrl + '" target="_blank">'
Why are there 5 double quotations in total? Is it incorrect?
What function does '" target="_blank">' serve?

@Jonasw Thats actually not correct, if you look its not putting quotes around the href in the html it generates. Its actually missing a `\"`. But this doesnt answer the question at hand. — Tom C, Jan 18 '17 at 17:18

score 2 · Answer 1 · answered Jan 18 '17 at 17:19

2

You're using JS to create the string <a href="some-url.html" target="_blank">

All of the quotes are necessary because you're using quotes in JS to define a string literal, but also outputting quotes in the string itself - thus, the use of single quotes around double quotes. '"' in JS creates the string ".

target="_blank" is an HTML attribute that says the target window the hyperlink opens in should be called _blank, aka, a new window.

answered Jan 18 '17 at 17:19

Michael Coker

52,626
5
64
64

+1 for explaining the `target="_blank"` in a straightforward manner and for providing some good reference. Thanks. I'm afraid I'll have to select one of the lengthier answers though. – m.a.a. Jan 19 '17 at 08:29

Tha'er AlAjlouni ثائر العجلوني · Answer 2 · 2017-01-18T17:28:34.907

The "<a href="+ postUrl + '" target="_blank">' as a whole statement is used to dynamically build an anchor tag <a> by reading the postUrl from the feeds json, and then append this <a> tag to your html.

The first two " quotes are used to define a string literal containing the first segment of the <a> tag, while the last two " are to contain the value of the target attribute which will be shown on the final HTML, the one in the middle (the 3rd in order) is used to close the href attribute when viewed on your HTML.

This way the rendered HTML will be as following:

<a href="http://the_postUrl_value_from_feed" target="_blank">

BTW, the statement you're using is wrong, it is missing the starting " quote of the href attribute, try updating it to be as following:

'<a href="' + postUrl + '" target="_blank">'

I believe this is pretty much the same as the first of @chepner's three suggestions. Nice to see two experienced users agree on this. It affords some sense of credibility. And yes, it does clarify the code itself. Thanks. — m.a.a., Jan 18 '17 at 18:14

score 1 · Accepted Answer · edited May 23 '17 at 11:45

1

It's just using single quotes to avoid having to escape the literal double quotes in a double-quoted string.

'" target="_blank"'

vs

"\"target=\"_blank\""

Since the definition of postUrl includes the quotes for the attribute, your definition of item has an extra double quote in it. However, I would recommend not putting those quotes postUrl, because the quotes are not part of the URL.

If you do that, there is a missing double quote earlier in the line. You have

var item = "<li>" + "<a href=" + postUrl + '" target="_blank">' + postTitle + "</a> </li>";

and you should have

var item = "<li>" + '<a href="' + postUrl + '" target="_blank">' + postTitle + "</a> </li>";
                  # ^^^^^^^^^^^
                  # Include a literal " after the =,

(Otherwise, the quote preceding target would be extraneous and need to be removed.)

The line would be a little clearer as

var item = '<li> <a href="'+ postUrl + '" target="_blank">' + postTitle + "</a> </li>";

and you can blame JavaScript for not having a built-in, convenient way to interpolate values into a string. (Although, see How can I do string interpolation in JavaScript?, which suggests that this has been added. Note, I am not a Javascript programmer.

var item = `<li> <a href="${postUrl}" target="_blank">${postTitle}</a> </li>`;

)

edited May 23 '17 at 11:45

Community

1
1

answered Jan 18 '17 at 17:16

chepner

497,756
71
530
681

Template Literals (the ``` syntax you described are relatively new to the language (ES2016). Unless you are transpiling code or do not care if it works on IE 11 and Android I wouldnt recommend you use them. But it does help to understand what its doing. http://kangax.github.io/compat-table/es6/#test-template_literals – Tom C Jan 18 '17 at 17:43
@Tom Could you please clarify which of chepner's 3 suggestions your comment applies to? Thanks in advance. – m.a.a. Jan 18 '17 at 17:53
Having updated my code to the first of your suggestions, should I now be able to assign a class to the `
` element? Or is that out of the question so to speak?

m.a.a.

Jan 18 '17 at 18:25

Both this and @Tha'er's answer were greatly informative. After some contemplation, I'm selecting yours (it being the most thorough one). – m.a.a. Jan 19 '17 at 09:48

@m.a.a. To clarify I was talking about the last suggestion which uses the backtick (`) which is what Javascript (ES2016) uses to denote a template literal. – Tom C Jan 19 '17 at 16:17

@TomC It wasn't clear to me from the newer answers just how new the string interpolation was to Javascript. Definitely something to be aware of. – chepner Jan 19 '17 at 16:26

maxarndt · Answer 4 · 2017-01-18T17:57:42.663

1

Ok, so this line has a messed up quotation mark.

var item = "<li>" + "<a href="+ postUrl + '" target="_blank">' + postTitle + "</a> </li>";

Give it a try with this one:

var item = "<li>" + "<a href="+ postUrl + " target='_blank'>" + postTitle + "</a></li>";

The problem was the single quote after the postUrl +... You are already escaping the URL properly so no need for additional quotes around postUrl.

Give it a try!

edited Jan 18 '17 at 17:57

answered Jan 18 '17 at 17:21

maxarndt

560
7
16

This is worse. Now the URL is not properly quoted, and you are incorrectly using single quotes in the generated HTML. – chepner Jan 18 '17 at 17:25
@chepner what you are saying is not true. Here is the [SGML standard](https://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.2), single quotes are allowed in HTML markup. And the URL is properly quoted, have a look at his source code: `var postUrl = "'" + json.feed.entry[i].link[j].href + "'";` – maxarndt Jan 18 '17 at 17:50
I stand corrected on which type of quotes are allowed, or whether an attribute *must* be quoted. – chepner Jan 18 '17 at 18:12

score 1 · Answer 5 · answered Jan 18 '17 at 17:46

To answer your question I have to explain something about string variables. Lets take a look to the code where you filled your var item:

var item = "<li>" + "<a href="+ postUrl + '" target="_blank">' + postTitle + "</a> </li>";

Here you're making a string variable, so the quote (double or single) has to start and end the string and has to be the same, like this:

var myVar = "My content";

Follwing the code you have a variable that will be put inside another variable, so you have to open the quote, put your string, then close your quote, put the + sinal to concat string and finish (or put another + to concat with another string/var). Example:

var myAge = "23";
var myConcatVar = "I am " + myAge + " years old";

This is the basic, about concat and string.

But you are making a HTML string, and HTML code use quotes. So, yes, you have to use all that quotation (double and single).

Now about your code:

As you presume, you have to start a string with double or single quotation, but you have to keep this quotation when you concat. In the var item you start with double quotation but use single quotation to concat with postUrl var. Your code look like this:

var item = "<li>" + "<a href="+ postUrl + '" target="_blank">' + postTitle + "</a> </li>";

When he must be like this:

var item = "<li>" + "<a href='"+ postUrl + "' target='_blank'>" + postTitle + "</a></li>";

Then when you print this var, the result will be like:

<li><a href='postUrl content' target='_blank'></a></li>

As you see in the result, you have to use the single and double quotation, because the atribute href and target use quotation too. And about the target="_blank", it will send the url in a new tab.

I'm sorry for my bad english haha, and I hope this helps.

YourGoodFriend · Answer 6 · 2017-01-18T17:21:56.980

The original has three " which means one is never closed so it wouldnt work. the correct one would be

" target='_blank'"

verses

'" target="_blank"'

In javascript there are a few ways to make strings two ways are ' ' single ticks and " " double ticks.

Everytime you start a tick (", ') everything inside of it is a string until a corresponding closing tick (", ') so if you need to have a string inside of a string you can accomplish this by doing either single ticks inside of double ticks or double ticks inside of single ticks. Run this in the web console

console.log("hey 'yes'");
console.log('hey "yes"');

verses

    console.log("hey "yes"");
    console.log('hey 'yes'');

the last to will error because you are now saying string of hey and then variable yes with closing empty string

js: please explain this variable value with 5 double quotations

Background info

My question

6 Answers6

Linked