Pasar un objeto como parámetro en un literal de plantilla en JavaScript

Actualmente tengo un objeto que quiero pasar como parámetro a otra función dentro de una plantilla literal:

    var template = `<button onclick="onclick(${object})"></button>`;

Sin embargo, esto hace que el parámetro se convierta en un valor de cadena: [object Object] y no pasa el parámetro. ¿Hay alguna manera de pasar este parámetro a la función?

Muchas gracias de antemano.

Respuesta #1

Vas a necesitar representar tu objeto como una cadena. Puedes hacer esto usando JSON.stringify:

var template = `<button onclick="handleClick(${JSON.stringify(obj).split('"').join("&quot;")})"></button>`;

Necesitarás escapar las comillas dobles (lo que hace este código), así como potencialmente las entidades HTML y las comillas simples si se usan para tu evento onclick (esto código no lo hace).

onclick="onclick" en realidad llama a window.onclick, lo que significa que detecta clics en cualquier parte. Deberías usar un nombre diferente (como handleClick).

Sugeriría evitar el uso de event listeners en línea debido al alto riesgo de problemas de seguridad de cross-site-scripting, así como a la necesidad de escapar ciertos datos.

Respuesta #2

var template =`<button onclick="handleClick(${JSON.stringify(object)})"></button>`;

Cuando quieres pasar un objeto sin que se convierta automáticamente en una cadena al usar literales de plantilla con ${}, puedes manejar el evento de clic por separado y pasar el objeto como un parámetro.

En este ejemplo, la función handleClick se define para tomar un objeto como parámetro. La función JSON.stringify se utiliza para convertir el objeto en una cadena JSON al pasarlo como parámetro en el manejador de eventos en línea. Dentro de la función handleClick, puedes luego analizar la cadena JSON de nuevo a un objeto si es necesario.