2e:null 2f:["$","title",null,{"children":"Exploration: Template Literals | Andrew Wooldridge | Observable"}] 34:[] 32:{"id":"dfab102e39ab0657","slug":"exploration-template-literals","title":"Exploration: Template Literals","thumbnail":"6df963c7aee4c835d375052a108f9b90cd5467241c80ddbe93862f9bdb718b7a","access_level":"public","create_time":"$D2021-11-09T20:28:50.154Z","update_time":"$D2021-11-10T22:25:14.196Z","view_time":null,"first_public_time":"$D2021-11-10T22:12:38.135Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":"starter_2024"},"version":95,"publish_version":95,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null}],"members":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"bef3cf5a9bdfd5d0","slug":"tips-and-utilities","title":"Tips and Utilities","owner":{"id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge"}},"type":"notebook","body":{"title":"Exploration: Template Literals","cells":[{"id":0,"value":"# Exploration: Template Literals","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"## Simple Template Literal","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"basic = `This is a basic template literal`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"multi = `This template literal\nruns many \nmany rows! But still works fine`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"You can include variables within them and they get appended to the string.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"variablesInTemplateString = `The current time is ${new Date(now)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"## Tagged Template Literal","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"Observable has a few built-in tagged templates - some examples below","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"htmlContent = html`this will be converted to HTML`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"svgElement = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"showStructure = (strings, ...keys)=>{\n return {\n strings: strings,\n keys : {\n ...keys\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"showStructure`I'm a string`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"showStructure`I'm a string with a variable ${now}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"three = 3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"showStructure`String one ${1} String two ${2} String ${three}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"## References","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"