¿Qué diferencia hay entre ‘ comillas simples y ` tildes invertidas (backquote/backtick)?

publicado por: Anonymous

Hola quisiera saber cual es la diferencia entre estos dos tipos de comillas, sucede que con ” no obtiene el keyCode y con “ si y no entiendo por qué.
A continuación el código de la línea en donde se presenta el escenario.

const audio = document.querySelector('audio[data-key="${e.keyCode}"]');

El HTML y SCRIPT

<body>  
  <audio data-key="65" src="sounds/clap.wav"></audio>
  <audio data-key="83" src="sounds/hihat.wav"></audio>
  <audio data-key="68" src="sounds/kick.wav"></audio>
  <audio data-key="70" src="sounds/openhat.wav"></audio>
  <audio data-key="71" src="sounds/boom.wav"></audio>
  <audio data-key="72" src="sounds/ride.wav"></audio>
  <audio data-key="74" src="sounds/snare.wav"></audio>
  <audio data-key="75" src="sounds/tom.wav"></audio>
  <audio data-key="76" src="sounds/tink.wav"></audio>

<script>
  window.addEventListener('keydown', function(e){
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    console.log(audio);
  });
</script>
</body>

con ”

const audio = document.querySelector('audio[data-key="${e.keyCode}"]');

introducir la descripción de la imagen aquí

con “

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);

**introducir la descripción de la imagen aquí**

solución

Cuando utilizas las tildex invertidas “, no estas representando una cadena en sí, sino que estas utilizando una función agregada en ES2015, llamada platilla de cadenas de texto, o template literals en inglés.

Esta caracteristica te permite crear cadenas de texto utilizando varias líneas de texto y meter valores dentro de la misma utilizando ${expression} que es lo que estás haciendo en tu ejemplo, el cual evalúa ${e.keycode} antes de crear la cadena de texto final.

Esta función sirve para no tener que concatenar cadenas utilizando el operador + te pongo un ejemplo:

Antes de las plantillas tendrías que hacer esto:

console.log("Hola " + nombre + ", bienvenido al sitio.")

Y con plantillas de texto puedes hacerlo más facil:

console.log(`Hola ${nombre}, bienvenido al sitio.`)

Ambos ejemplos van a agregar la variable nombre a tu cadena, no se ve mucho el beneficio en este pequeño ejemplo, pero al buscar cadenas más largas o de multiples líneas, resultan una herramienta muy útil.

Te dejo un link al sitio de Mozilla Developer Network con mas información sobre esta nueva función en JavaScript.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *