If you’ve seen code such as the one below (taken from https:\/\/www.styled-components.com\/docs\/basics)<\/p>\n
\r\nstyled.section`\r\n padding: 4em;\r\n background: papayawhip;\r\n`\r\n<\/pre>\nYou might be interested in the styled.section code. This is a function and uses template literals as input via template literal syntax. In this usage its known as a tagged template or tagged template literals.<\/p>\n
Let’s create our own function to show how this works.<\/p>\n
function tt(literals: any, …substitutions: any) {
\n console.log(literals);
\n console.log(substitutions);
\n}<\/p>\nNote: I’m using TypeScript, hence the use of the any keyword, but just remove this for JavaScript code.<\/em><\/p>\n
If we now run the following code<\/p>\n
\r\nconst name1 = "Scooby";\r\nconst name2 = "Doo";\r\n\r\ntt`Hello ${name1} World ${name2}`\r\n<\/pre>\nThe following will be logged to the console<\/p>\n
\r\n[ 'Hello ', ' World ', '' ]\r\n[ 'Scooby', 'Doo' ]\r\n<\/pre>\nThe first values are an array of the literals<\/em> passed to our function, the second are the substitutions<\/em>. <\/p>\n
Literals will always be an array of substitutions.length + 1 in length. Hence in the example above the literals contains an empty string item at the end to ensure this is the case.<\/p>\n
Note: The last item in the literals array is an empty string but ofcourse if we had a string after the ${name2} then this would be the last item, hence to combine these two arrays into a resultant string would require us to ensure we merge all items.<\/em><\/p>\n
We can therefore combine our two arrays to form a single result using a simple loop, like this<\/p>\n
\r\n\r\nfunction tt(literals: any, ...substitutions: any) {\r\n let s = "";\r\n\r\n for (let i = 0; i < substitutions.length; i++) {\r\n s += literals[i] + substitutions[i];\r\n }\r\n\r\n return s + literals[literals.length - 1];\r\n}\r\n<\/pre>\nIn the above we’re simply returning a string representing the merge of the two arrays. Remember literals.length will be substitutions.length + 1, hence we simply append that after looping through the smaller of the arrays.<\/p>\n
Ofcourse this it not really that useful, if all we wanted to do was return a string we could just create a template literal. Let’s look at a couple of ways of enhancing the functionality.<\/p>\n
The first obvious requirement is that we should be able to pass functions into the templates. For example if we have something like this<\/p>\n
\r\nconst t = tt`\r\n firstName: ${name1};\r\n lastName: ${name2};\r\n preferred: ${choice => (choice ? name1 : name2)};\r\n `;\r\n<\/pre>\nThe choice<\/em> value needs to be supplied by the calling code and in this example code there’s no easy was to pass this data into t<\/em>. So first off we need to wrap the tt<\/em> function within another function and return it, like this<\/p>\n
\r\nfunction tt(literals: any, ...substitutions: any) {\r\n return function(options: any) {\r\n let s = "";\r\n\r\n for (let i = 0; i < substitutions.length; i++) {\r\n s += literals[i];\r\n s += typeof substitutions[i] === "function"\r\n ? substitutions[i](options)\r\n : substitutions[i];\r\n }\r\n return s + literals[literals.length - 1];\r\n };\r\n}\r\n<\/pre>\nIn the above we’ve also added changes to the original tt<\/em> function to detect functions within the substitutions. If a function is found whilst looping then it’s invoked by passing in the supplied options<\/em>. <\/p>\n
This implementation then returns a function which, when invoked by passing in some value (in this case named options), will loop through the literals and substitutions and invoking any functions by forwarding the supplied options.<\/p>\n
Hence we can call the new tt<\/em> method like this, for example<\/p>\n
\r\nt({choice: true});\r\n<\/pre>\nThis would return a string and would return <\/p>\n
\r\nfirstName: Scooby;\r\nlastName: Doo;\r\npreferred: Scooby;\r\n<\/pre>\nSo now for the next enhancement, let’s instead of returning a string, return an object – all we need to do is split on semi-colons to get key\/value items where the key will become the object’s property and the value obviously the value stored within the property.<\/p>\n
We’ll make a slight change to the code above to this<\/p>\n
\r\nfunction tt(literals: any, ...substitutions: any) {\r\n return function(options: any) {\r\n let s = "";\r\n\r\n for (let i = 0; i < substitutions.length; i++) {\r\n s += literals[i];\r\n s += typeof substitutions[i] === "function"\r\n ? substitutions[i](options)\r\n : substitutions[i];\r\n }\r\n\r\n return toObject(s + literals[literals.length - 1]);\r\n };\r\n}\r\n<\/pre>\nThe toObject function has been introduced and it’s purpose is to…<\/p>\n
\n
- Take a string which is semi-colon deliminated for each key\/value pair<\/li>\n
- Extract each key\/value pair which should be deliminated with colons<\/li>\n
- For each entry we will create a property with the name taken from left of the colon on an object and the value right of the colon will be assigned to the property as a value<\/li>\n<\/ul>\n
Here’s the code for toObject<\/p>\n
\r\nconst toObject = (value: any): any =>\r\n value\r\n .split(";")\r\n .map(entry => {\r\n const e = entry.split(":");\r\n if(e.length == 2) {\r\n const key = e[0].trim();\r\n const value = e[1].trim();\r\n return [key, value];\r\n }\r\n return undefined;\r\n })\r\n .filter(entry => entry != undefined)\r\n .reduce((obj, entry) => ({ ...obj, [entry[0]]: entry[1]}), {});\r\n<\/pre>\nThis is not a complete solution as we’re not ensuring validity of the key as a property name. For example you’ll have noticed in styled.component or even React’s styles, that hyphen keys, i.e. background-color or similar would be converted or expected to be backgroundColor. So a simply change would be to convert line 7 to this following<\/p>\n
\r\nconst key = ensureValid(e[0].trim());\r\n<\/pre>\nand now we introduce a new function to handle all our checks, for now we’ll just ensure the hyphen’s or dot’s are removed and replaced by camelCase<\/p>\n
\r\nconst ensureValid = (key: string): string => \r\n key.replace(\/[-.]+\/g, c => c.length > 0 ? c.substr(1).toUpperCase() : '');\r\n<\/pre>\nObviously this function is quite limited, but you get the idea. It can then be used in the toObject function, i.e. <\/p>\n
\r\n\/\/ change\r\nconst key = e[0].trim();\r\n\/\/ to\r\nconst key = ensureValid(e[0].trim());\r\n<\/pre>\nTaking things a little further<\/strong><\/p>\n
The code below is based upon what was discussed in this post, but extended a little, to start with here’s a more complete implementation of the above code<\/p>\n
\r\nconst ensureValid = (key: string): string => \r\n key.replace( \/[-.]+([a-z]|[0-9])|[-.]$\/ig, (_match, character, pos) => {\r\n if(pos == 0) {\r\n return character.toLowerCase();\r\n }\r\n else if(character == null) {\r\n return '';\r\n }\r\n\r\n return character.toUpperCase();\r\n });\r\n\r\nconst toObject = (value: any): any =>\r\n value\r\n .split(";")\r\n .map(entry => {\r\n const e = entry.split(":");\r\n if(e.length == 2) {\r\n const key = ensureValid(e[0].trim());\r\n const value = e[1].trim();\r\n return [key, value];\r\n }\r\n return undefined;\r\n })\r\n .filter(entry => entry != undefined)\r\n .reduce((obj, entry) => ({ ...obj, [entry[0]]: entry[1]}), {});\r\n\r\nfunction tt3(literals: any, ...substitutions: any) {\r\n return function(options: any) {\r\n let s = "";\r\n\r\n for (let i = 0; i < substitutions.length; i++) {\r\n s += literals[i];\r\n s += typeof substitutions[i] === "function"\r\n ? substitutions[i](options)\r\n : substitutions[i];\r\n }\r\n\r\n return toObject(s + literals[literals.length - 1]);\r\n };\r\n}\r\n\r\nconst name1 = "Scooby";\r\nconst name2 = "Doo";\r\n\r\nconst t = tt3`\r\n -First-6name-: ${name1};\r\n last-Name: ${name2};\r\n preferred: ${options => (options.choice ? name1 : name2)};\r\n `;\r\n\r\nconsole.log(t({choice: true}));\r\n<\/pre>\nNow let’s have a bit of fun and refactor things to allow us to extract our object from alternate data representations. We’ll create an ini<\/em> style way to define our objects<\/p>\n
\r\nconst camelCase = (key: string): string => \r\n key.replace( \/[-.]+([a-z]|[0-9])|[-.]$\/ig, (_match, character, pos) => {\r\n if(pos == 0) {\r\n return character.toLowerCase();\r\n }\r\n else if(character == null) {\r\n return '';\r\n }\r\n\r\n return character.toUpperCase();\r\n });\r\n\r\ntype splitterFunc = (value: any) => [{key: any; value: any}|undefined];\r\n\r\nconst standardSplitter = (value: any): [{key: any; value: any}|undefined] =>\r\n value\r\n .split(";")\r\n .map(entry => {\r\n const e = entry.split(":");\r\n if(e.length == 2) {\r\n const key = camelCase(e[0].trim());\r\n const value = e[1].trim();\r\n return [key, value];\r\n }\r\n return undefined;\r\n });\r\n\r\nconst iniSplitter = (value: any): [{key: any; value: any}|undefined] =>\r\n value\r\n .split("\\n")\r\n .map(entry => {\r\n const e = entry.split("=");\r\n if(e.length == 2) {\r\n const key = camelCase(e[0].trim());\r\n const value = e[1].trim();\r\n return [key, value];\r\n }\r\n return undefined;\r\n });\r\n \r\n\r\nconst toObject = (value: any, splitter: splitterFunc = standardSplitter): any =>\r\n splitter(value)\r\n .filter(entry => entry != undefined) \r\n .reduce((obj, entry) => ({ ...obj, [entry![0]]: entry![1]}), {});\r\n\r\n\r\nfunction tt3(literals: any, ...substitutions: any) {\r\n return function(options: any, splitter: splitterFunc = standardSplitter) {\r\n let s = "";\r\n\r\n for (let i = 0; i < substitutions.length; i++) {\r\n s += literals[i];\r\n s += typeof substitutions[i] === "function"\r\n ? substitutions[i](options)\r\n : substitutions[i];\r\n }\r\n\r\n return toObject(s + literals[literals.length - 1], splitter);\r\n };\r\n}\r\n\r\nconst name1 = "Scooby";\r\nconst name2 = "Doo";\r\n \r\nconst t = tt3`\r\n -First-6name-: ${name1};\r\n last-Name: ${name2};\r\n preferred: ${options => (options.choice ? name1 : name2)};\r\n `;\r\n\r\n const t1 = tt3`\r\n -First-6name- = ${name1}\r\n last-Name = ${name2}\r\n preferred = ${options => (options.choice ? name1 : name2)}\r\n `;\r\n\r\nconsole.log(t1({choice: true}, iniSplitter));\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"If you’ve seen code such as the one below (taken from https:\/\/www.styled-components.com\/docs\/basics) styled.section` padding: 4em; background: papayawhip; ` You might be interested in the styled.section code. This is a function and uses template literals as input via template literal syntax. In this usage its known as a tagged template or tagged template literals. Let’s create […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[45,46],"tags":[],"class_list":["post-7404","post","type-post","status-publish","format-standard","hentry","category-javascript","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7404"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7404\/revisions"}],"predecessor-version":[{"id":7453,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7404\/revisions\/7453"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}