Cómo insertar una variable en una cadena de JavaScript

Para incluir el valor de una variable en una cadena de JavaScript, usa un literal de plantilla: delimita el texto con acentos graves e inserta la forma exacta de interpolación `${variableName}` donde quieras que aparezca el valor. Sustituye variableName por el identificador de tu variable; JavaScript insertará su valor actual. Los literales de plantilla suelen ser la opción más sencilla para construir cadenas. Los marcadores de posición de la consola sirven para mostrar registros, mientras que una biblioteca de formato puede ser útil si sus funciones justifican añadir una dependencia.

Usar literales de plantilla para insertar una variable en una cadena de JavaScript

Los literales de plantilla se delimitan con acentos graves, no con comillas simples ni dobles. JavaScript evalúa la expresión situada entre ${ y } y convierte el resultado en una cadena. Puedes asignar la cadena resultante a una variable, devolverla desde una función o pasarla a otra función. En una cadena entre comillas, como "Hello, ${name}", la sintaxis de interpolación queda como texto literal; las comillas simples y dobles no interpolan valores.

Este ejemplo crea un saludo y calcula un total antes de asignar el texto completo a message:

const name = "Ada";
const price = 12;
const message = `Hello, ${name}. Your total is $${price + 3}.`;
console.log(message);

Hello, Ada. Your total is $15.

La expresión ${price + 3} se evalúa primero, por lo que aporta 15; el signo de dólar que la precede inmediatamente es texto normal. Las expresiones pueden incluir operaciones aritméticas, acceso a propiedades o llamadas a funciones. Procura que sean lo bastante breves para que la frase resultante se entienda con facilidad. Un literal de plantilla puede ocupar varias líneas y no hace falta escapar las comillas que contiene. Para incluir literalmente la secuencia ${, escapa el signo de dólar como \${; para incluir un acento grave, escápalo con una barra inversa. Si una expresión produce un objeto, JavaScript aplica la conversión de ese valor a cadena, que quizá no sea la representación que necesitas; usa una conversión explícita para mostrar los datos del objeto de forma legible. La interpolación genera texto sin formato, no contenido HTML seguro. Al mostrar valores no confiables en una página web, usa una API del DOM segura y adecuada al contexto.

Usar el formato básico para insertar una variable en una cadena de JavaScript

Para mostrar información de diagnóstico, console.log() puede dar formato a un mensaje mediante marcadores de posición y los argumentos que los siguen. En este ejemplo, %s da formato al nombre y %d a la puntuación; los argumentos aparecen en el mismo orden:

const name = "Ada";
const score = 42;
console.log("%s scored %d points.", name, score);

La compatibilidad con los marcadores y los detalles de conversión dependen de la implementación de la consola, así que se trata de una comodidad para los registros, no de una API portátil para construir cadenas. console.log() escribe información de diagnóstico y no devuelve el mensaje formateado para asignarlo a una variable o insertarlo en una página HTML. Si necesitas un valor de cadena, usa un literal de plantilla o una biblioteca de formato. Mantén los argumentos en el orden de los marcadores correspondientes; las consolas pueden mostrar de distintas maneras los valores adicionales o los marcadores sin correspondencia.

Usar sprintf() para insertar una variable en una cadena de JavaScript

sprintf-js es una biblioteca opcional cuya función sprintf() devuelve una cadena. En un proyecto donde el paquete esté instalado y se pueda usar CommonJS, puedes cargarlo con const { sprintf } = require("sprintf-js"); y crear un valor con const message = sprintf("%s has %d items", name, count);. Estas líneas ilustran la API; la instalación del paquete y las instrucciones de importación dependen del entorno del proyecto. En proyectos de navegador o basados en módulos, sigue las instrucciones de configuración del proyecto enlazado.

sprintf() interpreta las directivas de formato y los argumentos proporcionados; no evalúa expresiones de JavaScript escritas dentro de la cadena de formato. Cada directiva usa un argumento correspondiente. Elige la biblioteca cuando sus funciones de formato sean útiles para casos repetidos o más elaborados y justifiquen la dependencia adicional. La documentación del proyecto describe las directivas disponibles y las opciones de configuración. Para una frase breve con una variable, la sintaxis integrada de los literales de plantilla suele ser más sencilla.

Conclusión

Usa literales de plantilla para construir cadenas corrientes, insertar valores de variables e incluir expresiones de JavaScript. Usa los marcadores de console.log() para mostrar información de diagnóstico y recuerda que su comportamiento puede variar según la implementación y que la llamada no produce una cadena formateada reutilizable. Considera sprintf-js cuando sus funciones de formato sean lo bastante útiles para justificar la dependencia. Para una interpolación sencilla, los acentos graves y ${...} suelen ser la forma más clara de incluir el valor actual de una variable en una cadena de JavaScript.