{"id":909,"date":"2017-03-25T13:40:17","date_gmt":"2017-03-25T13:40:17","guid":{"rendered":"http:\/\/blog.silverterra.net\/?p=909"},"modified":"2017-03-25T13:45:59","modified_gmt":"2017-03-25T13:45:59","slug":"javascript-multiline-strings-in-the-code","status":"publish","type":"post","link":"https:\/\/blog.silverterra.net\/?p=909","title":{"rendered":"javascript multiline strings in the code"},"content":{"rendered":"<blockquote><p>Goal: use multiline strings in the code<\/p><\/blockquote>\n<p>I have a simple string template. I want to store it in a variable but I want to forget the concatenation.<br \/>\nWe can use the following trick.<\/p>\n<pre><code>\r\n  var itemTemplate = `&lt;li>\r\n      &lt;div class=\"direction-r\">\r\n        &lt;div class=\"flag-wrapper\">\r\n          &lt;span class =\"flag\">${0}&lt;\/span>\r\n          &lt;span class =\"time-wrapper\">${1}&lt;\/span>\r\n        &lt;\/div>\r\n        &lt;div class =\"desc\">${2}&lt;\/div>\r\n      &lt;\/div>\r\n    &lt;\/li>`;\r\n\r\n  console.log(itemTemplate);\r\n<\/code><\/pre>\n<p>the trick is the <b>GRAVE ACCENT<\/b> character -> <b>`<\/b><\/p>\n<blockquote><p>see also: <a href=\"http:\/\/www.fileformat.info\/info\/unicode\/char\/0060\/index.htm\" target=\"_blank\">GRAVE ACCENT<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Goal: use multiline strings in the code I have a simple string template. I want to store it in a variable but I want to forget the concatenation. We can use the following trick. var itemTemplate = `&lt;li> &lt;div class=&#8221;direction-r&#8221;> &lt;div class=&#8221;flag-wrapper&#8221;> &lt;span class =&#8221;flag&#8221;>${0}&lt;\/span> &lt;span class =&#8221;time-wrapper&#8221;>${1}&lt;\/span> &lt;\/div> &lt;div class =&#8221;desc&#8221;>${2}&lt;\/div> &lt;\/div> &lt;\/li>`; console.log(itemTemplate); [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,11],"tags":[],"class_list":["post-909","post","type-post","status-publish","format-standard","hentry","category-javascript","category-tricky"],"_links":{"self":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/909","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=909"}],"version-history":[{"count":4,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/909\/revisions"}],"predecessor-version":[{"id":935,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/909\/revisions\/935"}],"wp:attachment":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}