7

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í**

1
  • 1
    En términos prácticos es lo mismo, y no te agarra keyCode porque al usar comillas sencillas nuevamente estás cerrando el string, después concatenando (erróneamente) una variable llamara ${e.keyCode} y después reabres el string. Para que puedas tener strings con comillas dentro de otros strings, es como se usa la combinación de comillas simples y dobles, como está en tu selector
    – Yikarus
    el 29 sep. 2017 a las 17:26

2 respuestas 2

9

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.

3

La tilde invertida sirve para utilizar la carterística denominada Template Strings de ES2015

Lo que permite es utilizar variables que pueden ser referenciadas en medio del string sin tener que partirlo en varias secciones concatenadas por el símbolo +

Ejemplo

    let nombre = 'Juan';
    
    // Esto
    let saludo = 'Hola ' + nombre +  '. ¿Cómo estás?';
    console.log(saludo);
    
    // equivale a:
    let saludo2 = `Hola ${nombre}. ¿Cómo estás?`;
    console.log(saludo2);

En tu caso el error es que al usar comillas simples '' la cadena se evaluará tal cual está escrita, sin evaluar las variables dentro de ${} y por lo tanto obtendrás lo sgte:

var e = {
  keyCode: 13
};

console.log('audio[data-key="${e.keyCode}"]');

Mientras que lo correcto sería

var e = {
  keyCode: 13
};

console.log(`audio[data-key="${e.keyCode}"]`);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.