Inconsistent type for JavaScript ES6 template strings

Question

While testing JavaScript ES6's new template strings (in Firefox, if it matters), I noticed some inconsistencies in their types.

I defined a custom function, like this:

function f(a) {
    console.log(typeof(a));
    console.log(a);
}

First, I tested the function "normally", using parentheses around the template string.

f(`Hello, World!`)

As expected, this yielded a type of string and Hello, World! was outputted to the console.

Then I called the function shorthand, without the parentheses, and inconsistencies occurred.

f`Hello, World!`

The type became object, and Array [ "Hello, World!" ] was outputted to the console.

Why was the template string wrapped in an array when using the second method? Is this just a bug in Firefox (ES6 is a new standard, after all) or is this behavior expected for some reason?

Try console.log`a ${1} b ${2} c`; to understand better what's happening. By omitting the parenthesis, you've completely change the meaning of your statement: you're not simply calling the function any more, but you're using a tagged template. Yep, this syntax sucks. — Blackhole
– Blackhole, Commented Aug 28, 2015 at 20:54

loganfsmyth · Accepted Answer · 2015-08-28 23:25:14Z

2

// A function call, passed the result of a template literal.
f(`str`)

and

// A tagged template call, passed metadata about a template.
f`str`

are not the same. The first calls f with single string as an argument. The second calls f with several parameters, depending on the template. e.g.

f`one${2}three${4}five`

would pass f

f(strings, ...values)

with

strings
// ['one', 'three', 'five']

which is a list of all of the string sections of the template, and

values
// [2, 4]

which are all of the values that fit between the strings. This allows tags to preprocess the string and process it.

The documentation on MDN can help more.

edited Aug 28, 2015 at 23:25

answered Aug 28, 2015 at 20:58

loganfsmyth

162k31 gold badges349 silver badges259 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Blackhole Over a year ago

From a 36k rep users, I'd expected at list a link to the specification. A bit disappointed.

jrich Over a year ago

Thanks for the help! I've suggested an edit to add that this syntax is called tagged template strings, as I've learned from @Blackhole's comment, to help future searchers. This answer was helpful and informative.

Felix Kling Over a year ago

@UndefinedFunction: It's called "tagged template" (no "string"). I think it's a bit misleading to call the "strings" (official they are called "tagged template" and "template literal"), especially since tagged templates don't necessarily result in strings at all.

jrich Over a year ago

@FelixKling hmmm, interesting. The MDN said "tagged template strings", so that's why I called them that.

Felix Kling Over a year ago

@UndefinedFunction: Yep. I'm not particular happy about that ;) ecma-international.org/ecma-262/6.0/…

|

Collectives™ on Stack Overflow

Inconsistent type for JavaScript ES6 template strings

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related