dman dman - 11 months ago 48
Javascript Question

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

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
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 Source

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 = [], 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 = [], 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.