Tagged Template Literals

challenge.js

(a=>{console.log(a[0])})

`test`

expanded.js

((strings) => { // tag for template literal
  console.log(strings[0]) // log first string
})`test` // immediatley use as a tagged template literal

invalid.js

tag;
`text`

normal.js

let a = 1
let b = '1'
console.log(`the value of a is ${a} and the value of b === a is ${b === a}.`)

Tagged Template Literals.carbide.md

Tagged Template Literals

This Gist was automatically created by Carbide, a free online programming environment.

You can view a live, interactive version of this Gist here.

tagOne.js

function tagOne(strings, ...expressions) {
  strings = Array.from(strings)
  let output = strings[0]
  for (let i in expressions) {
    i = Number(i)
    let expression = expressions[i]
    output += `${typeof expression} ${expression}`
    output += strings[i + 1]
  }
  return output
}

console.log(tagOne`string example: ${'test' + 'ing'}, number example: ${1 + 2}, the end.`)
// string example: string testing, number example: number 3, the end.

usage.js

function tag(strings, ...expressions) {
  // strings is an array-like object with all the string fragments
  // see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates:~:text=Tags%20allow,expressions.
  // expressions is an array of all the expressions within ${}
}
tag`string1${'expression1'}string2${'expression2'}string3`

valid.js

tag `text`

tag
`text`