Argument to JS Function Different Output using '' or " or `${ }`

Estoy trabajando en una aplicación Electron y estoy teniendo alguna dificultad para pasar un argumento a una función JS perdiendo / carácter y que las Strings se vuelven más bajas. Una vista simplificada de mi código está abajo.

let game_item = 'start "F:\/Riot Games/VALORANT/live/VALORANT.exe" --launch-product=valorant';

let insertLaunch = `Play`;

document.getElementById('game-container').innerHTML += insertLaunch;

Ahora dependiendo de cómo envuelvo el game_item variable el HTML renderizado será completamente diferente. Abajo está lo que he intentado y cómo se ve.

//JS try 1
insertLaunch = `
//HTML output

//JS try 2
insertLaunch = "
//HTML output

Usando la consola Dev puedo conseguir que esto funcione llamando manualmente

consoleGameLaunch('start "F:\/Riot Games/VALORANT/live/VALORANT.exe" --launch-product=valorant');

¿Cómo conseguiría que ese comando se muestre correctamente en el HTML?

Pregunta hecha hace 3 años, 5 meses, 1 días - Por quantumcoderd26d

3 Respuestas:

  • Una buena manera de escapar de un valor como ese antes de convertirlo en una String, es dejar que la función JSON.stringify() lo maneje.

    Por ejemplo:

    let game_item = 'start "F:\\/Riot Games/VALORANT/live/VALORANT.exe" --launch-product=valorant';

let insertLaunch = `Play`;

window.consoleGameLaunch = function(msg) {
  console.log(msg)
}

document.getElementById('game-container').innerHTML += insertLaunch;

    JSON.stringify() with a string value will return back a string that properly escapes quotes, so that you can add it to other strings.

    Además, reString cuando escribes una String literal que tiene un '' en ella, tienes que usar dos: '\ '

    See esto, lo que explica un poco más sobre escapar literales de String (entre otras cosas), sería bueno leerlo un poco.

    Como nota final, recuerde ser muy cuidadoso usando .innerHTML para crear contenido. Siempre es más seguro utilizar otras funciones de DOM API para crear su contenido (como el documento.createElement()))

    Respondida el Dec 17, 2020 a las 01:29 - por logiclinguist

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando se debe al uso de comillas simples, comillas dobles y el uso de la sintaxis ${ } para concatenar la variable game_item en el string HTML.

    Aquí te dejo una solución para que puedas mostrar correctamente el game_item en el HTML:

    ```javascript let game_item = 'start "F:\/Riot Games/VALORANT/live/VALORANT.exe" --launch-product=valorant';

    let insertLaunch = <a href="<h2>" onclick='consoleGameLaunch("${game_item.replace(/"/g, '\\"')}")'>Play</a>; document.getElementById('game-container').innerHTML += insertLaunch; ```

    En este código, he utilizado la función replace() para reemplazar todas las comillas dobles en la variable game_item con \". Esto ayudará a escapar correctamente las comillas en el string que se pasa como argumento a la función consoleGameLaunch().

    Espero que esta solución te sea útil y ahora puedas mostrar correctamente el comando en el HTML. Si necesitas más ayuda, no dudes en decírmelo.

    Respondida el Dec 18, 2020 a las 01:30 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema aquí es que cuando usas comillas simples o dobles en tu cadena, cualquier carácter especial dentro de esas comillas se interpreta literalmente. Esto incluye los caracteres de barra invertida y las comillas.

    Para solucionar este problema, puedes usar comillas invertidas (``) para envolver tu cadena. Las comillas invertidas permiten incluir caracteres especiales sin tener que escaparlos.

    Aquí tienes el código corregido:

    `` let game_item =start "F:\Riot Games\VALORANT\live\VALORANT.exe" --launch-product=valorant`;

    let insertLaunch = <a href="<h2>" onclick='consoleGameLaunch(${game_item})'>Play</a>; document.getElementById('game-container').innerHTML += insertLaunch;

    

Ahora, el HTML renderizado será:
    html

    Play```

    Esto es lo que querías lograr.

    Respondida el Dec 18, 2020 a las 01:33 - por Gemini

    Votos positivos: 0 | Votos negativos: 0