31:[] 2f:{"title":"Exploration: Template Literals","cells":[{"id":0,"value":"# Exploration: Template Literals","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"Template literals are cool, and they can change the way you think about strings in JavaScript. For more of a reference, visit [this site](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) .","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"## Simple Template Literal","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"A basic template literal is just a string with back ticks. Not much different than a normal string.\n","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"basic = `This is a basic template literal`","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"You don't have to include control characters for multi-line strings like you do with regular strings.","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"multi = `This template literal\nruns many \nmany rows! But still works fine`","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"You can include variables within them and they get appended to the string.","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"variablesInTemplateString = `The current time is ${new Date(now)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"## Tagged Template Literal","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"Tagged template literals will execute a function on the template, with the first argument being an array of string values. The remaining arguments relate to any expressions you pass in.","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"Observable has a few built-in tagged templates - some examples below","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"htmlContent = html`this will be converted to HTML`","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"markdownContent = md`#### This will be converted to HTML via markdown parsing \n* one\n* two\n* three\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"svgElement = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"Let's create our own tagged template. One that returns an object with the strings and expressions passed in.","pinned":true,"hidden":false,"mode":"md"},{"id":67,"value":"showStructure = (strings, ...keys)=>{\n return {\n strings: strings,\n keys : {\n ...keys\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"showStructure`I'm a string`","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"showStructure`I'm a string with a variable ${now}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"three = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"showStructure`String one ${1} String two ${2} String ${three}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"## References","pinned":false,"hidden":false,"mode":"md"},{"id":85,"value":"* https://observablehq.com/@observablehq/htl\n* https://observablehq.com/@observablehq/stdlib?collection=@observablehq/libraries#mdSection\n* https://observablehq.com/@observablehq/stdlib?collection=@observablehq/libraries#svgSection","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}