Javascript Es6 Tagged Templates - When is raw used? When is cooked used?

Question

After studying this Es6 tag template example:

var yo = func`${x} + ${y}\n= ${x + y}`;

---

one@public-node ~/es6 $ 6to5 tag.js 
"use strict";

var _taggedTemplateLiteral = function (strings, raw) {
  return Object.freeze(Object.defineProperties(strings, {
    raw: {
      value: Object.freeze(raw)
    }
  }));
};

var yo = func(_taggedTemplateLiteral(["", " + ", "\n= ", ""], ["", " + ", "\\n= ", ""]), x, y, x + y);

---

I see what is returned is var yo = func(strings, raw, x, y, x + y);

I understand the basics about the string literals and the x y values being inserted. What I don't understand is...when is strings used versus when is raw used? Since the function has both arrays and the user doesn't have control to tell the function when to use raw and when to use cooked(strings).

Answer 1

The tag function func is passed just one array. That array comes from the _taggedTemplateLiteral function, which takes the incoming "strings" parameter and adds a single property to it.

The function func would be declared like this (ES5-style):

function func(strings) {
  var params = [].slice.call(arguments, 1);
  // do stuff
}

If, inside func, the code needed to use the "raw" strings, it would just access the .raw property of the "strings" variable:

function func(strings) {
  var params = [].slice.call(arguments, 1);

  var raw2 = strings.raw[2];

  // do stuff
}

So the "user" — the author of the tag function — does have control. Code in the tag function is free to examine the original content of the template parts whenever it wants. It's probably the case that tag functions that essentially implement a DSL might want to only use the raw strings, while simpler template mechanisms won't care and will be happy to use the "parsed" strings.