<p dir="auto">The following:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="`${foo}`"><pre class="notranslate"><span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">foo</span><span class="pl-kos">}</span></span>`</span></pre></div>
<p dir="auto"><a href="http://babeljs.io/repl/#?experimental=true&amp;evaluate=true&amp;loose=false&amp;spec=false&amp;code=%60%24%7Bfoo%7D%60" rel="nofollow">transpiles</a> to:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;&quot; + foo;"><pre class="notranslate"><span class="pl-s">""</span> <span class="pl-c1">+</span> <span class="pl-s1">foo</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">However, concatenating to an empty string actually calls <code class="notranslate">valueOf</code>, not <code class="notranslate">toString</code>, and as such is not correct. See the following JS:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var x = { toString: function () { return NaN; }, valueOf: function () { return Infinity; }};
[x.toString(), x + '', String(x)]
/* note that only the third item is both a string, and the toString value */"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">x</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-en">toString</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-v">NaN</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-en">valueOf</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-v">Infinity</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-kos">[</span><span class="pl-s1">x</span><span class="pl-kos">.</span><span class="pl-en">toString</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">x</span> <span class="pl-c1">+</span> <span class="pl-s">''</span><span class="pl-kos">,</span> <span class="pl-v">String</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-kos">)</span><span class="pl-kos">]</span>
<span class="pl-c">/* note that only the third item is both a string, and the toString value */</span></pre></div>
<p dir="auto">It should transpile to:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="String(foo)"><pre class="notranslate"><span class="pl-v">String</span><span class="pl-kos">(</span><span class="pl-s1">foo</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Say I have the object,</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let x = {
    toString() { return 'String' },
    valueOf() { return 4; }
};
`${x}`;"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">x</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-en">toString</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-s">'String'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-en">valueOf</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-c1">4</span><span class="pl-kos">;</span> <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">x</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Expected result:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="'String'"><pre class="notranslate"><span class="pl-s">'String'</span></pre></div>
<p dir="auto">Actual result:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="'4'"><pre class="notranslate"><span class="pl-s">'4'</span></pre></div>
<p dir="auto">We should be calling <code class="notranslate">String(x)</code> for all the variables.</p>