title: ES6 template literals vs. concatenated strings
body: <p>I have the following code for <a href="https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_%E2%80%93_ECMAScript_2015" rel="noreferrer">ECMAScript 6</a> <em>template literals</em>:</p>
  <pre><code>let person = {name: 'John Smith'};
  let tpl = `My name is ${person.name}.`;
  let MyVar = &quot;My name is &quot; + person.name + &quot;.&quot;;
  
  console.log(&quot;template literal= &quot; + tpl);
  console.log(&quot;my variable = &quot; + MyVar);
  </code></pre>
  <p>The output is as follows:</p>
  <pre><code>template literal= My name is John Smith.
  my variable = My name is John Smith.
  </code></pre>
  <p><a href="http://www.es6fiddle.net/i3vgplv9/" rel="noreferrer">This</a> is the fiddle.</p>
  <p>I tried searching for the exact difference, but I couldn't find it,
  What is the difference between the following two statements?</p>
  <pre><code>  let tpl = `My name is ${person.name}.`;
  </code></pre>
  <p>And</p>
  <pre><code>  let MyVar = &quot;My name is &quot;+ person.name+&quot;.&quot;;
  </code></pre>
  <p>I am already able to get the string <code>MyVar</code> concatenated with <code>person.name</code> here, so what would be the scenario to use the template literal in?</p>