quasi-literal vs function calls

backbacktick.js

// Comparing some of the use-cases for 'quasi-literals' aka string templates to normal functions and strings
// http://wiki.ecmascript.org/doku.php?id=harmony:quasis#syntax

x`foo${bar}baz`
// vs
x('foo',bar,'baz');

// http://wiki.ecmascript.org/doku.php?id=harmony:quasis#secure_content_generation

safehtml`<a href="${url}?q=${query}" onclick=alert(${message}) style="color: ${color}">${message}</a>`
// vs
safehtml('<a href="',url,'?q=',query,'" onclick=alert(', message,') style="color: ',color,'>',message,'</a>');  

// http://wiki.ecmascript.org/doku.php?id=harmony:quasis#text_l10n

msg`Welcome to ${siteName}, you are visitor number ${visitorNumber}!`
// vs
msg('Welcome to ',siteName,', you are visitor number ',visitorNumber,'!');

String template -> template string.

Things become more interesting once you want to escape things that are filled in. For example if url above contains double quotes ("). With your non-template-string syntax above you cannot make the distinction between, say, 'Welcome to ' and siteName. Furthermore, for HTML you can use both quotes inside a literal:

html`<a href="javascript:alert('hello')"></a>`

Not the best of examples, but you get the idea.