What is the difference between parameter with quotation and parameter without quotation in Template literals in JavaScript

Why when I put quotation >> ('${key}') it does the function >> fun('${key}') while when I delete quotation >> (${key}) it doesn't do the function >> fun(${key}) what different between parameter with quotation and parameter without quotation in Template literals with JavaScript

for ( let key in states) { 
console.log(key);
var n =states[key].name;
var cur = states[key].currency;
console.log()

con.innerHTML += `<div> <span>name : "  ${n}
     " </span> <br> <span>cur : "  ${cur}
     " </span> </div><br> <span>cur : "  ${key}
     " </span>  <button onclick= fun('${key}')> select </button><hr> `
}

function fun(o) { 
alert(states[o].name);
alert(states[o].currency);
}

the code above run the function >> fun('${key}')

for (let key in states) {
  console.log(key);
  var n = states[key].name;
  var cur = states[key].currency;
  console.log()

  con.innerHTML += `<div> <span>name : "  ${n}
         " </span> <br> <span>cur : "  ${cur}
         " </span> </div><br> <span>cur : "  ${key}
         " </span>  <button onclick= fun(${key})> select </button><hr> `
}

function fun(o) {
  alert(states[o].name);
  alert(states[o].currency);
}