{"id":1665,"date":"2016-12-21T16:13:06","date_gmt":"2016-12-21T21:13:06","guid":{"rendered":"http:\/\/www.a2life.info\/w\/?p=1665"},"modified":"2016-12-21T16:13:49","modified_gmt":"2016-12-21T21:13:49","slug":"constructing-long-string-with-javascript","status":"publish","type":"post","link":"https:\/\/www.a2life.info\/w\/?p=1665","title":{"rendered":"constructing long string with Javascript"},"content":{"rendered":"<p>There is a time you need to construct a string (for instance, to create a html block) in your code.<\/p>\n<p>In the simpliest approach, youcan constract the string variable\u00a0 like so<\/p>\n<p>var html='&lt;head&gt;&lt;body&gt;&#8217;+contentVariable+&#8217;more stuff&#8217; + &#8216;&lt;\/body&gt;&lt;\/head&gt;&#8217;;<\/p>\n<p>this becomes very messy quickly once more variables, more nested construction is needed.<\/p>\n<p>I used to keep concatinating the string, like so<\/p>\n<p>var html='&lt;head&gt;&lt;\/body&gt;&#8217;;<\/p>\n<p>html +=\u00a0 contentVariable;<\/p>\n<p>html += &#8216; more Stuff&#8217;;<\/p>\n<p>html += &#8216;&lt;\/body&gt;&lt;\/head&gt;&#8217;;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Then I saw a pattern in the couple of codes from internet;<\/p>\n<p>var h=[&#8216;&lt;head&gt;&lt;body&#8217;];<\/p>\n<p>h.push(contentVariable);<\/p>\n<p>h.push(&#8216;more Stuff&#8217;);<\/p>\n<p>h.push(&#8216;&lt;\/head&gt;&lt;\/body&gt;&#8217;);<\/p>\n<p>var html=h.join(&#8221;);<\/p>\n<p>The More concatenation needed, the more convinient the last method becomes. Key is to join the array element with null delimiter.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There is a time you need to construct a string (for instance, to create a html block) in your code. In the simpliest approach, youcan constract the string variable\u00a0 like so var html='&lt;head&gt;&lt;body&gt;&#8217;+contentVariable+&#8217;more stuff&#8217; + &#8216;&lt;\/body&gt;&lt;\/head&gt;&#8217;; this becomes very messy quickly once more variables, more nested construction is needed. I used to keep concatinating the string, like so var html='&lt;head&gt;&lt;\/body&gt;&#8217;; html +=\u00a0 contentVariable; html += &#8216; more Stuff&#8217;; html += &#8216;&lt;\/body&gt;&lt;\/head&gt;&#8217;; &nbsp; &nbsp; Then I saw a pattern in the couple of codes from internet; var h=[&#8216;&lt;head&gt;&lt;body&#8217;]; h.push(contentVariable); h.push(&#8216;more Stuff&#8217;); h.push(&#8216;&lt;\/head&gt;&lt;\/body&gt;&#8217;); var html=h.join(&#8221;); The More concatenation needed, the more convinient the last method becomes. Key is to join the array &hellip; <a href=\"https:\/\/www.a2life.info\/w\/?p=1665\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48,3],"tags":[38],"class_list":["post-1665","post","type-post","status-publish","format-standard","hentry","category-programming","category-web-making","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=\/wp\/v2\/posts\/1665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1665"}],"version-history":[{"count":2,"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=\/wp\/v2\/posts\/1665\/revisions"}],"predecessor-version":[{"id":1668,"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=\/wp\/v2\/posts\/1665\/revisions\/1668"}],"wp:attachment":[{"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.a2life.info\/w\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}