{"id":61497,"date":"2024-06-26T03:01:14","date_gmt":"2024-06-25T17:01:14","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=61497"},"modified":"2024-06-26T08:46:35","modified_gmt":"2024-06-25T22:46:35","slug":"template-literal-backtick-syntax-quote-delimitation-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/template-literal-backtick-syntax-quote-delimitation-tutorial\/","title":{"rendered":"Template Literal Backtick Syntax Quote Delimitation Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/xcv.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Template Literal Backtick Syntax Quote Delimitation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/template_literal_backtick_quote_relaxation.jpg\" title=\"Template Literal Backtick Syntax Quote Delimitation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Template Literal Backtick Syntax Quote Delimitation Tutorial<\/p><\/div>\n<p>We spend quite a sizeable proportion of our programmatical coding time working out string variable creation where quotes, be they &#8230;<\/p>\n<ul>\n<li>&#8220;<\/li>\n<li>&#8216;<\/li>\n<\/ul>\n<p>Here&#8217;s an example of a complex scenario from some Javascript code &#8230;<\/p>\n<p><code><br \/>\n var lastcursor=\"Url(\\\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,0,255,0.3);fill:black;font-family:Verdana;font-size:17px;'&gt;&lt;text y='80%'&gt;Alt\\\\01f3d5&lt;\/text&gt;&lt;\/svg&gt;\\\") 16 0, progress\";<br \/>\n<\/code><\/p>\n<p> &#8230; which the Template Literal backtick syntax can simplify to &#8230;<\/p>\n<p><code><br \/>\n var lastcursor=`Url(\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,0,255,0.3);fill:black;font-family:Verdana;font-size:17px;'&gt;&lt;text y='80%'&gt;Alt\\\\01f3d5&lt;\/text&gt;&lt;\/svg&gt;\") 16 0, progress`;<br \/>\n<\/code><\/p>\n<p> &#8230; with no backslashes needed to achieve the same result.  This is a simple example, but please see a Javascript function reworked from that within the recent <a title='Form or Prompt Output Tagged Template Literal Tutorial' href='#fpottlt'>Form or Prompt Output Tagged Template Literal Tutorial<\/a> blog posting thread.<\/p>\n<p>Here&#8217;s the HTML and Javascript behind the iframe content below &#8230;<\/p>\n<p><code><br \/>\n&lt;html&gt;&lt;head&gt;&lt;script type=text\/javascript&gt;<br \/>\n var millis=7656757543;<br \/>\n var strings=[''], rest=';'<br \/>\n<br \/>\nfunction myTag(strings, beingExp, ageExp, secondageExp, breedExp, streetExp, suburbExp, stateExp) {<br \/>\n  let str0 = '';<br \/>\n  let str1 = '';<br \/>\n  let str2 = '';<br \/>\n  let str3 = '';<br \/>\n  let str4 = '';<br \/>\n  let str5 = '';<br \/>\n  let str6 = '';<br \/>\n  let str7 = '';<br \/>\n  <br \/>\n  for (var ii=0; ii&lt;strings.length; ii++) {<br \/>\n    if (ii &gt; 7) {<br \/>\n     rest+=' ' + strings[ii];<br \/>\n    } else {<br \/>\n     eval(\"str\" + ii + ' = \"' + strings[ii] + '\"');<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  let ageStr;<br \/>\n  if (ageExp &gt; 99){<br \/>\n    ageStr = 'centenarian';<br \/>\n  } else {<br \/>\n    ageStr = 'youngster';<br \/>\n  }<br \/>\n<br \/>\n  \/\/ We can even return a string built using a template literal<br \/>\n  return `${str0}${beingExp}${str1}${ageExp}${str2}${secondageExp}${str3}${breedExp}${str4}${streetExp}${str5}${suburbExp}${str6}${stateExp}${str7}` + rest;<br \/>\n}<br \/>\n<br \/>\nif (document.URL.indexOf('?') != -1) {<br \/>\nalert(myTag([\"one'str\",2,3,4], \"two'str\", \"III\", \"iv\", 'seven\"str', \"six'str\", \"VII\", \"viii\"));<br \/>\nalert(`seconds elapsed = ${Math.floor(millis \/ 1000)}`);<br \/>\n} else {<br \/>\nconsole.log(myTag([\"one'str\",2,3,4], \"two'str\", \"III\", \"iv\", 'seven\"str', \"six'str\", \"VII\", \"viii\"));<br \/>\nconsole.log(`seconds elapsed = ${Math.floor(millis \/ 1000)}`);<br \/>\n}<br \/>\n&lt;\/script&gt;&lt;\/head&gt;&lt;body&gt;&lt;a style=text-decoration:underline; onclick='location.href=document.URL + String.fromCharCode(63);''=&gt;Click to show backtick calculations to two alert popups&lt;\/a&gt;&lt;\/body&gt;&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; <\/p>\n<p><iframe src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/xcv.html\" id=myxcv><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/template-literal-backtick-syntax-quote-delimitation-tutorial\/'>Template Literal Backtick Syntax Quote Delimitation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fpottlt'>Previous relevant <a target=_blank title='Form or Prompt Output Tagged Template Literal Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/form-or-prompt-output-tagged-template-literal-tutorial\/'>Form or Prompt Output Tagged Template Literal Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tagged_template_literal.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Form or Prompt Output Tagged Template Literal Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tagged_template_literal.jpg\" title=\"Form or Prompt Output Tagged Template Literal Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Form or Prompt Output Tagged Template Literal Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Scrolling Logging Template Literals Primer Tutorial' href='#sltlpt'>Scrolling Logging Template Literals Primer Tutorial<\/a> was the precursor to discussing &#8220;<a target=_blank title='Tagged Template Literals' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates'>Tagged<\/a> <a target=_blank title='Tagged Template Literals' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals'>Template Literals<\/a>&#8221; &#8230; <\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates'><p>\nA more advanced form of template literals are tagged templates.<br \/>\n<br \/>\nTags allow you to parse template literals with a function. The first argument of a tag function contains an array of string values. The remaining arguments are related to the expressions.<br \/>\n<br \/>\nThe tag function can then perform whatever operations on these arguments you wish, and return the manipulated string. (Alternatively, it can return something completely different, as described in one of the following examples.)\n<\/p><\/blockquote>\n<p> &#8230; we&#8217;ve adapted into an HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tagged_template_literal.html_GETME\">tagged_template_literal.html<\/a> codebase <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tagged_template_literal.html\" title=\"Click picture\">proof of concept<\/a> web application closely using the start the webpages above started us with &#8230; thanks.<\/p>\n<p>These <font color=blue>&#8220;Tagged Template&#8221; logics<\/font> helped us separate the <font color=olive>chaff<\/font> (small words magically handled via &#8220;Tagged Template&#8221; usage) from the wheat (form or prompt arguments formalized by our interactive input) in the English sentence &#8230; such as (today&#8217;s default) &#8230;<\/p>\n<blockquote><p>\n<font color=olive>That <\/font>Nala<font color=olive> is a wonderful <\/font>9<font color=olive> year ( <\/font>81<font color=olive> in K9 years ) old <\/font>Golden Retriever<font color=olive> who lives at <\/font>33 Charles Street<font color=olive>, <\/font>Lawson<font color=olive>, <\/font>State of Wow<font color=olive>.<\/font>\n<\/p><\/blockquote>\n<p> &#8230; we produce as a result of all the efforts, here.<\/p>\n<p><code><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;Tagged Template Literals - RJM Programming - July, 2022 ... thanks to https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals&lt;\/title&gt;<br \/>\n&lt;style&gt; input { width: 20%; } &lt;\/style&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h2 title='A Tagged Template Literal regimen is dealing with all the little word stuff between the arguments.'&gt;Tagged Template Literals&lt;\/h2&gt;<br \/>\n&lt;h3&gt;RJM Programming - July, 2022&lt;\/h3&gt;<br \/>\n&lt;h3&gt;Thanks to &lt;a target=_blank title='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals' href='\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals'&gt;https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals&lt;\/a&gt;&lt;\/h3&gt;<br \/>\n<br \/>\n&lt;p id=blurb&gt;&lt;\/p&gt;<br \/>\n<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\nconst prompt = location.search.split('prompt=')[1] ? (one,two) =&gt; {     return window.prompt(one,two); } : (one,two) =&gt; {     return two; };<br \/>\nconst alert = location.search.split('prompt=')[1] ? (one) =&gt; { document.getElementById('blurb').innerHTML=one;  return one;    } : (one) =&gt; {  return window.alert(one); };<br \/>\nlet being = location.search.split('being=')[1] ? prompt('Being', decodeURIComponent(location.search.split('being=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : prompt('Being', 'Nala');<br \/>\nlet age = location.search.split('age=')[1] ? prompt('Age',decodeURIComponent(location.search.split('age=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : prompt('Age','9');<br \/>\nlet breed = location.search.split('breed=')[1] ? prompt('Breed',decodeURIComponent(location.search.split('breed=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : prompt('Breed','Golden Retriever');<br \/>\nlet street = location.search.split('street=')[1] ? prompt('Street',decodeURIComponent(location.search.split('street=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : prompt('Street','33 Charles Street');<br \/>\nlet suburb = location.search.split('suburb=')[1] ? prompt('Suburb',decodeURIComponent(location.search.split('suburb=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : prompt('Suburb','Lawson');<br \/>\nlet state = location.search.split('state=')[1] ? prompt('State',decodeURIComponent(location.search.split('state=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : prompt('State','State of Wow');<br \/>\nlet secondage = location.search.split('secondage=')[1] ? prompt('K9 Age', decodeURIComponent(location.search.split('secondage=')[1].split('&')[0]).replace(\/\\+\/g,' ')) : prompt('K9 Age', '' + eval(eval('' + age) * 9));<br \/>\nlet rest = location.search.split('rest=')[1] ? decodeURIComponent(location.search.split('rest=')[1].split('&')[0]) : '';<br \/>\n<br \/>\nfunction doform() {<br \/>\n  var ideas=['Being [' + being + ']', 'Age [' + age + ']', 'K9 Age [' + secondage + ']', 'Breed [' + breed + ']', 'Street [' + street + ']', 'Suburb [' + suburb + ']', 'State [' + state + ']'];<br \/>\n  var aform='&lt;form method=GET onsubmit=\"checkis();\" action=.\/tagged_template_literal.html&gt;&lt;br&gt;&lt;br&gt;&lt;input type=submit value=Show&gt;&lt;\/input&gt;&lt;br&gt;&lt;br&gt;&lt;input type=submit name=prompt id=prompt value=Prompt&gt;&lt;\/input&gt;&lt;\/form&gt;';<br \/>\n  for (var jj=eval(-1 + ideas.length); jj&gt;=0; jj--) {<br \/>\n    aform=aform.replace('&gt;', '&gt;&lt;input type=text onblur=\"if (this.value.length == 0) { this.value=this.placeholder.split(String.fromCharCode(91))[1].split(String.fromCharCode(93))[0];  }\" id=' + ideas[jj].split('[')[0].toLowerCase().replace('k9 age', 'secondage') + ' name=' + ideas[jj].split('[')[0].toLowerCase().replace('k9 age', 'secondage') + ' placeholder=\"' + ideas[jj] + '\" value=\"\"&gt;&lt;\/input&gt;&lt;br&gt;');<br \/>\n  }<br \/>\n  document.body.innerHTML+='&lt;br&gt;&lt;br&gt;' + aform;<br \/>\n  \/\/alert(aform);<br \/>\n  \/\/document.getElementById(ideas[0].split('[')[0].toLowerCase().replace('k9 age', 'secondage')).focus();<br \/>\n  window.setTimeout(function () {<br \/>\n    document.getElementById('being').focus();<br \/>\n}, 1000);<br \/>\n}<br \/>\n<br \/>\nfunction checkis() {<br \/>\n  var eis=document.getElementsByTagName('input');<br \/>\n  for (var jis=0; jis&lt;eis.length; jis++) {<br \/>\n    if (eis[jis].value == '' && ('' + eis[jis].placeholder).indexOf('[') != -1) {<br \/>\n      eis[jis].value=eis[jis].placeholder.split(String.fromCharCode(91))[1].split(String.fromCharCode(93))[0];<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction myTag(strings, beingExp, ageExp, secondageExp, breedExp, streetExp, suburbExp, stateExp) {<br \/>\n  let str0 = '';<br \/>\n  let str1 = '';<br \/>\n  let str2 = '';<br \/>\n  let str3 = '';<br \/>\n  let str4 = '';<br \/>\n  let str5 = '';<br \/>\n  let str6 = '';<br \/>\n  let str7 = '';<br \/>\n<br \/> <br \/>\n  for (var ii=0; ii&lt;strings.length; ii++) {<br \/>\n    if (ii &gt; 7) {<br \/>\n     rest+=' ' + strings[ii];<br \/>\n    } else {<br \/>\n     eval(\"str\" + ii + ' = \"' + strings[ii] + '\"');<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  let ageStr;<br \/>\n  if (ageExp &gt; 99){<br \/>\n    ageStr = 'centenarian';<br \/>\n  } else {<br \/>\n    ageStr = 'youngster';<br \/>\n  }<br \/>\n<br \/>\n  <font color=blue>\/\/ We can even return a string built using a template literal<br \/>\n  return `${str0}${beingExp}${str1}${ageExp}${str2}${secondageExp}${str3}${breedExp}${str4}${streetExp}${str5}${suburbExp}${str6}${stateExp}${str7}` + rest;<\/font><br \/>\n}<br \/>\n<br \/>\n<font color=blue>let output = myTag`That ${ being } is a wonderful ${ age } year ( ${ secondage } in K9 years ) old ${ breed } who lives at ${ street }, ${ suburb }, ${ state }.`;<\/font><br \/>\n<br \/>\nif (document.URL.indexOf('being=') != -1) {<br \/>\n  alert(output);<br \/>\n  \/\/ That Mike is a youngster.<br \/>\n}<br \/>\n<br \/>\ndoform();<br \/>\n&lt;\/script&gt;<br \/>\n<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/form-or-prompt-output-tagged-template-literal-tutorial\/'>Form or Prompt Output Tagged Template Literal Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sltlpt'>Previous relevant <a target=_blank title='Scrolling Logging Template Literals Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/scrolling-logging-template-literals-primer-tutorial\/'>Scrolling Logging Template Literals Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/console_override.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Scrolling Logging Template Literals Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/console_override.jpg\" title=\"Scrolling Logging Template Literals Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Scrolling Logging Template Literals Primer Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank title='Screen Capture API Download Video Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/screen-capture-api-download-video-tutorial\/'>Screen Capture API Download Video Tutorial<\/a>&#8216;a web application code, thanks to <a target=_blank href='\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Screen_Capture_API\/Using_Screen_Capture' title='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Screen_Capture_API\/Using_Screen_Capture'>Using Screen Capture<\/a>, used interesting Javascript <a target=_blank title='Tagged Template Literals' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals'>Template Literals<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals'><p>\nTemplate literals are literals delimited with backtick (`) characters, allowing for multi-line strings, for string interpolation with embedded expressions, and for special constructs called tagged templates.<br \/>\n<br \/>\nTemplate literals are sometimes informally called template strings, because they are used most commonly for string interpolation (to create strings by doing substitution of placeholders). However, a tagged template literal may not result in a string; it can be used with a custom tag function to perform whatever operations you want on the different parts of the template literal.\n<\/p><\/blockquote>\n<p> &#8230; <font color=blue>we&#8217;ve adapted<\/font> for use today in our very simple &#8220;Scrolling Logging&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/console_override.html_GETME\" title=\"console_override.html\">console_override.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/console_override.html\" title=\"Click picture\">web application<\/a> that scrolls like for a command line interactive terminal session &#8230;<\/p>\n<p><code><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;Console Message Override - RJM Programming - July, 2022&lt;\/title&gt;<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n var logElem=null;<br \/>\n var firstisnot=false;<br \/>\n var ii=0;<br \/>\n<br \/>\nfunction onl() {<br \/>\n  logElem=document.getElementById('log');<br \/>\n<br \/> <br \/>\n<font color=blue>console.log = msg =&gt; logElem.innerHTML += (firstisnot ? '&lt;span id=span' + ii + '&gt;&lt;\/span&gt;' + document.getElementById('topbit').innerHTML : '') + `${msg}&lt;br&gt;Brought to you via console.log at ` + new Date() + `&lt;br&gt;&lt;br&gt;`;<br \/>\nconsole.error = msg =&gt; logElem.innerHTML += `&lt;span class=\"error\"&gt;${msg}&lt;br&gt;Brought to you via console.error at ` + new Date() + `&lt;\/span&gt;&lt;br&gt;&lt;br&gt;`;<br \/>\nconsole.warn = msg =&gt; logElem.innerHTML += `&lt;span class=\"warn\"&gt;${msg}&lt;br&gt;Brought to you via console.warn at ` + new Date() + `&lt;span&gt;&lt;br&gt;&lt;br&gt;`;<br \/>\nconsole.info = msg =&gt; logElem.innerHTML += `&lt;span class=\"info\"&gt;${msg}&lt;br&gt;Brought to you via console.info at ` + new Date() + `&lt;\/span&gt;&lt;br&gt;&lt;br&gt;`;<\/font><br \/>\n<br \/>\n console.log('A console.log message.');<br \/>\n console.error('A console.error message.');<br \/>\n console.warn('A console.warn message.');<br \/>\n console.info('A console.info message.');<br \/>\n<br \/> <br \/>\n if (firstisnot) {<br \/>\n   document.getElementById('span' + ii).scrollIntoView();<br \/>\n }<br \/>\n ii++;<br \/>\n firstisnot=true;<br \/>\n<br \/> <br \/>\n setTimeout(onl, 4045);<br \/>\n}<br \/>\n<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload='onl();'&gt;<br \/>\n&lt;div id=topbit&gt;<br \/>\n&lt;h2&gt;Console Message Override&lt;\/h2&gt;<br \/>\n&lt;h3&gt;RJM Programming - July, 2022&lt;\/h3&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;h4 id=log&gt;&lt;\/h4&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; <a onclick=\"document.getElementById('ifdn').src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/console_override.html'; document.getElementById('ifdn').style.display='block'; \" style=\"cursor:pointer;text-decoration:underline;\">in action below<\/a> &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/About_Us.html\" id=\"ifdn\"  style=\"display:none;width:100%;height:900px;\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56293' onclick='var dv=document.getElementById(\"d56293\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scrolling\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56293' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d563023' onclick='var dv=document.getElementById(\"d56302\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/form\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56302' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61497' onclick='var dv=document.getElementById(\"d61497\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/template-literal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61497' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We spend quite a sizeable proportion of our programmatical coding time working out string variable creation where quotes, be they &#8230; &#8220; &#8216; Here&#8217;s an example of a complex scenario from some Javascript code &#8230; var lastcursor=&#8221;Url(\\&#8221;data:image\/svg+xml;utf8,&lt;svg xmlns=&#8217;http:\/\/www.w3.org\/2000\/svg&#8217; width=&#8217;66&#8217; height=&#8217;48&#8217; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/template-literal-backtick-syntax-quote-delimitation-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[4177,3221,2276,2147,3186,576,587,652,997,998,3184,3185,2386,4014,1319,1721],"class_list":["post-61497","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-backslash","tag-backtick","tag-delimitation","tag-delimiter","tag-double-quote","tag-html","tag-iframe","tag-javascript","tag-programming","tag-programming-tutorial","tag-quote","tag-single-quote","tag-syntax","tag-template-literal","tag-tutorial","tag-variable"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61497"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=61497"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61497\/revisions"}],"predecessor-version":[{"id":64026,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61497\/revisions\/64026"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=61497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=61497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=61497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}