JavaScript Insertar variable en una cadena

1. Utilice literales de plantilla para insertar variables en cadenas en JavaScript
2. Utilice el formato básico para insertar una variable en una cadena en JavaScript
3. Utilice sprintf() para insertar variable en una cadena en JavaScript
4. Conclusión

Este artículo presenta cómo insertar una(s) variable(s) en una cadena en JavaScript.

Utilice literales de plantilla para insertar variables en cadenas en JavaScript

El concepto de literales de plantilla ha existido durante un tiempo en JavaScript. Antes se conocían como cadenas de plantilla. Los literales de plantilla se introdujeron en ES6. Ofrece una forma más fácil de incrustar variables en una oración determinada que tener que utilizar complicadas concatenaciones de cadenas. En lugar de usar comillas (comillas dobles o comillas simples), usamos literales de plantilla definidos con las comillas invertidas (carácter ` en el teclado). Colocamos la cadena en las comillas invertidas e incrustamos nuestras variables en la oración. A continuación se muestran los usos de los literales de plantilla.

El simple hecho de incluir una cadena en un conjunto de comillas invertidas por sí mismo lo convierte en un valor de cadena. Tiene la misma funcionalidad que mantener el texto de la cadena entre comillas dobles ". El siguiente código de muestra representa una cadena simple utilizada como plantilla literal.

console.log(`Hello World`);

Producción :

Hello World

Tenemos una cuerda normal lista. Si tenemos que mostrar el valor de una variable en esta cadena, necesitamos incrustar variables. Mientras incrustamos, envolvemos la variable entre llaves con un signo $ precediéndola. La sintaxis para incrustar el valor de la variable es ${variableName}. El siguiente fragmento de código tiene la variable eggCount incrustada en una cadena habitual, con todo este contenido encapsulado en comillas invertidas.

let eggCount = 20;
console.log(`On easter we decorted ${eggCount}` easter eggs);

Producción :

On easter we decorted 20 easter eggs

Incrustación de expresiones con variables

A diferencia de la mera concatenación de cadenas, con los literales de plantilla, podemos incluir expresiones con más de una variable, similar a la codificación en JavaScript con los literales de plantilla. Si necesitamos realizar ciertas operaciones como sumar, obtener subcadenas, incluir fechas, etc., todas estas funcionalidades y muchas más se pueden incrustar en una cadena con literales de plantilla. El siguiente conjunto de códigos tiene una variedad de casos de uso para hacerlo.

let a = 5;
b = 10;
console.log(`Sum of ${a} and ${b} is ${a + b}`);

Producción :

Sum of 5 and 10 is 15

Otro ejemplo relacionado con la fecha es el siguiente. Aquí no usamos ninguna variable, pero las expresiones incluidas en los literales de plantilla funcionan por sí mismas. Son las cadenas con javascript en continuación de tener que usar las comillas dobles o las comillas inversas una y otra vez como lo haríamos con la concatenación de oraciones:

console.log(`The date today is ${new Date().getDate()}-${
    new Date().getMonth() + 1}-${new Date().getFullYear()}`);

Producción :

The date today is 7-4-2021

Observaciones

• Los literales de plantilla ofrecen una de las formas más fáciles de incrustar variables en una oración.
• También ofrece soporte para incluir expresiones directamente en la cadena y dejar que el compilador resuelva los cálculos en tiempo de ejecución.
• Ahora podemos incluir fácilmente comillas simples y comillas dobles en una cadena sin utilizar caracteres de escape.
• Los literales de plantilla hacen que la codificación sea simple, concisa, ordenada y legible.
• El valor de los literales de plantilla se puede asignar a una nueva variable. Puede considerarse como una nueva cadena que contiene los valores de sus variables.

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

Otra forma de insertar ordenadamente los valores de las variables en nuestra cadena es mediante el formato básico compatible con JavaScript. Usando el JavaScript console.log(), podemos evitar la concatenación y agregar marcadores de posición en la cadena de destino. Los valores que se asignarán se pasan como argumentos como se muestra a continuación.

let a = 5;
b = 10;
console.log('Sum of %d and %d is %d.', a, b, (a + b));

Producción :

Sum of 5 and 10 is 15.

Esta resolución de variables en valores solo funciona con console.log(). Por lo tanto, no podemos usarlo para asignar a una variable diferente, y no podemos usarlo para mostrar la nueva cadena resuelta en la interfaz de usuario HTML.

Observaciones

• Podemos utilizar este método al iniciar sesión con la función console.log(). Por lo tanto, este método no funcionará para asignar valores a una variable. Por lo tanto, puede que no sea digno de escenarios distintos al registro.
• Mientras se usa el formato básico, los marcadores de posición usados ​​en la cadena deben corresponder al tipo de datos pasados ​​como parámetro. Por ejemplo, para mostrar un valor numérico, el marcador de posición en la oración debe ser %d para el tipo de datos de cadena es %s.

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));

Producción :

Sum of 5 and 10 is 15.

Si olvidamos considerar el tipo de parámetro pasado, hay una falta de coincidencia de tipos. JavaScript intentará encasillar la variable y agregará el valor resultante a la cadena. El siguiente código explica este fenómeno.

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('%s of %d and %d is %d.', op1, op2, (op1 + op2), operation);

Producción :

5 of 10 and 15 is NaN.

op1 es del tipo de datos Number, y estamos usando el %s para inyectarlo en la cadena final. El %s convertirá automáticamente el número en un tipo de datos de cadena. Esta conversión se realiza sin problemas. Pero para la variable “operación”, el valor se asigna a un marcador de posición que viene a continuación en la secuencia. Este marcador de posición es %d. Por lo tanto, aquí un tipo de datos de cadena se convierte en un número. La conversión no ocurre. Por lo tanto, el resultado devuelto es NaN, que vemos como la palabra final de la salida.

Podemos utilizar expresiones en los parámetros, como vimos en el caso de (op1 + op2). El javascript lo entiende y lo resuelve como una suma en consecuencia.

En este caso, no podemos usar comillas dobles en la cadena final sin usar los caracteres de escape. Sin embargo, podemos usar comillas simples si encapsulamos toda la estructura entre comillas dobles. Consulte el siguiente código.

let op1 = 5, op2 = 10, operation = 'Sum';
console.log('\'%s\' of %d and %d is %d.', operation, op1, op2, (op1 + op2));

Producción :

'Sum' of 5 and 10 is 15.

Utilice sprintf() para insertar variable en una cadena en JavaScript

Antes de Template Literals en ES6 de JavaScript, la comunidad de desarrollo seguía la biblioteca rica en funciones de sprintf.js. La biblioteca tiene un método llamado sprintf(). sprintf.js es una biblioteca de código abierto para JavaScript. Tiene sus implementaciones para Node.js y navegadores. Para la instalación y las configuraciones, puede visitar su página de git-hub. sprintf() se usa para incluir las variables en una cadena sin usar la concatenación de cadenas. El uso es el siguiente.

let sprintf = require('sprintf-js').sprintf;

let op1 = 5, op2 = 10, operation = 'Sum';
sprintf('%s of %d and %d is %d.', operation, op1, op2, (op1 + op2));

Producción :

Sum of 5 and 10 is 15.

Tiene varias características especiales útiles de la siguiente manera.

• La función sprintf() permite especificar las variables en un orden diferente.
• Al igual que la funcionalidad de los literales de plantilla, sprintf() resuelve expresiones encapsuladas dentro de cadenas.
• Tiene soporte para varios formatos. Aparte de la cadena y el número estándar, la biblioteca sprintf-js admite formatos booleanos, binarios, etc., para enviar los valores de las variables a una cadena.
• Además, puede especificar los argumentos como un array utilizando el método vsprintf() proporcionado por la biblioteca.
• También permite pasar el objeto directamente en el segundo argumento y resuelve las variables de forma automática.

Hay muchas más características que ofrece esta biblioteca. Se pueden encontrar más detalles en el archivo Read.me especificado en su enlace de GitHub.

Conclusión

Cuando se trata de incluir los valores de las variables en su cadena sin tener que recurrir a las tediosas concatenaciones de cadenas utilizando el + y las comillas dobles, su mejor opción será optar por los literales de plantilla, la función con comillas invertidas. Si necesitamos insertar valores en la cadena de salida solo para fines de registro, la función console.log() de JavaScript es útil. Tiene las opciones de formato incluidas por defecto. La biblioteca sprintf.js es rica en funciones y domina el espacio, ya que ofrece mucho más que los literales de plantilla cuando se trata de incrustar los valores de las variables. Pero eso tiene un pequeño costo de familiarizarse con la biblioteca.