28

In GraphQL you can write something like this to define a query:

const USER_QUERY = gql`
  {
    user(id: 2) {
      name
    }
  }
`

In styled components you can define a styled component like this:

const Button = styled.button`
    background-color: papayawhip;
`

What is this syntax? I know with template literals you can sub in variables with this syntax: ${foo} but I have never seen this used. Any guidance would be appreciated.

Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
Kurt William
  • 555
  • 5
  • 10
  • 2
    Where is this example coming from? – Hogan Nov 27 '18 at 20:54
  • 1
    these are examples of how queries and styled components can be instantiated via those libraries, to exemplify the question on this syntax – Dacre Denny Nov 27 '18 at 20:56
  • 3
    [Tagged template literals?](https://wesbos.com/tagged-template-literals/) – HynekS Nov 27 '18 at 20:57
  • [Backticks calling a function](https://stackoverflow.com/questions/29660381/backticks-calling-a-function) || [What is the usage of the backtick symbol (`) in JavaScript?](https://stackoverflow.com/questions/27678052/what-is-the-usage-of-the-backtick-symbol-in-javascript) (which mentions tagged template literal, but not in the first answer) – user202729 Nov 28 '18 at 04:25

2 Answers2

28

These are tagged template literals. The part before the backpacks is a reference to a function that will be called to process the string.

The function is passed the variables (the ${} parts) as arguments as well as the pieces of the string that surround the variables broken into an array. The return value of the function becomes the value of the template. Because of this very generalized format, you can do almost anything with the function. Here's a quick and dirty example that takes the variables (gathered into an array for convenience), makes them uppercase, and puts them back in the string:

function upperV(strings, ...vars) {
  /* make vars uppercase */
  console.log("vars: ", vars)       // an array of the passed in variables
  console.log("strings:", strings)  // the string parts

  // put them together
  return vars.reduce((str, v, i) => str + v.toUpperCase() + strings[i+1], strings[0]);
}

let adverb = "boldly"
let output = upperV`to ${adverb} split infinitives that no ${'man'} had split before...`;
console.log(output)
Jeff Puckett
  • 28,726
  • 15
  • 96
  • 149
Mark
  • 74,559
  • 4
  • 81
  • 117
14

Template literals have an additional feature called tagged templates. That's what the prefix before the opening backtick is. The prefix is actually the name of a function - the function is passed the constant parts of the template strings and the interpolated values (stuff in the ${} sections) and can process the resulting string into whatever it wants (although generally another string, doesn't have to be).

See this page on MDN for more details on how tagged templates work.

Chris Tavares
  • 24,202
  • 3
  • 43
  • 62
  • "the function is passed the constant parts of the template strings" - what does this mean? – ESR Nov 28 '18 at 03:31
  • It's the parts of the template string that aren't in the `${}` blocks. Read the page I linked to, it has all the details. – Chris Tavares Nov 28 '18 at 06:32