{"id":3684,"date":"2022-09-09T13:56:21","date_gmt":"2022-09-09T19:56:21","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=3684"},"modified":"2022-09-09T13:56:21","modified_gmt":"2022-09-09T19:56:21","slug":"using-tagged-template-literals","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2022\/09\/09\/using-tagged-template-literals\/","title":{"rendered":"Using tagged template literals"},"content":{"rendered":"<p>This seems obvious in retrospect, but I got this from <a href=\"https:\/\/github.com\/bredele\/tag-reduce\">Olivier Wietrich's tag-reduce<\/a>.<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\">Tagged Literal Templates<\/a> are useful syntactic sugar. I fill out a lot of school physical forms (each school has its own form), so I need strings like <code class=\"language-javascript\" >`Weight: ${data.wt_lb} pounds (${data.wt_kg} kg), ${data.wt_pct} percentile`<\/code>. That works fine if I am evaluating the template string when it is defined.<\/p>\n<p>But I want to defer evaluating those strings until the <code class=\"language-javascript\" >data<\/code> array is filled in (by parsing my EMR's note, a topic for another time).<\/p>\n<p>Mozilla suggests something like<\/p>\n<pre><code class=\"language-javascript\" >\r\nfunction template(strings, ...keys) {\r\n  return (dict) => {\r\n    const result = [strings[0]];\r\n    keys.forEach((key, i) => {\r\n      result.push(dict[key], strings[i + 1]);\r\n    });\r\n    return result.join('');\r\n  };\r\n}\r\n<\/code><\/pre>\n<p>and using as<\/p>\n<pre><code class=\"language-javascript\" >\r\nweightTemplate = template`Weight: ${'wt_lb'} pounds (${'wt_kg'} kg), ${'wt_pct'} percentile`;\r\n\/\/ later in code, when data dictionary is completed\r\nfinalString = weightTemplate (data);\r\n<\/code><\/pre>\n<p>But Olivier Wietrich suggests the much more elegant:<\/p>\n<pre><code class=\"language-javascript\" >\r\nfunction template(strings, ...keys) {\r\n  return (data) => strings.reduce ( (previousValue, currentValue, currentIndex) => previousValue + data[keys[currentIndex-1]] + currentValue);\r\n  \/\/ (I'm using ECMA's parameter names for reduce, which are pretty verbose)\r\n}\r\n<\/code><\/pre>\n<p>using <code class=\"language-javascript\" >Array.prototype.reduce<\/code>, which should have been obvious.<br \/>\nUsing <code class=\"language-javascript\" >template<\/code> is the same as above.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This seems obvious in retrospect, but I got this from Olivier Wietrich's tag-reduce. Tagged Literal Templates are useful syntactic sugar. I fill out a lot of school physical forms (each school has its own form), so I need strings like `Weight: ${data.wt_lb} pounds (${data.wt_kg} kg), ${data.wt_pct} percentile`. That works fine if I am evaluating the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3684"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=3684"}],"version-history":[{"count":4,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3684\/revisions"}],"predecessor-version":[{"id":3688,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3684\/revisions\/3688"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=3684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=3684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=3684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}