Cómo hacer la interpolación de cadenas en JavaScript

JavaScript tiene una gran característica llamada interpolación de cadenas que permite inyectar una variable, una llamada a una función y una expresión aritmética directamente en una cadena.

En este artículo, introduciremos cómo hacer la interpolación de cadenas. Tendremos ejemplos de código a continuación, que puedes ejecutar en tu máquina.

Usar una nueva característica del ES6 para hacer interpolación de cadenas en JavaScript

Antes del lanzamiento del ES6, la interpolación de cadenas no estaba disponible en JavaScript. La falta de esta característica condujo a un código de concatenación de cadenas, como se muestra a continuación.

Ejemplo:

const generalInformation = (firstName, lastName, Country) => {
  return 'First Name ' + firstName + ' Last Name: ' + lastName + '. ' +
      Country + ' is my country.';
} console.log(generalInformation('Mark', 'John', 'US'));

Resultado:

First Name Mark Last Name: John. US is my country.

La interpolación de cadenas es una característica que permite inyectar variables, llamadas a funciones y expresiones aritméticas directamente en una cadena sin utilizar la concatenación o el carácter de escape para cadenas de varias líneas.

Utilizamos backticks para los literales de la plantilla en la interpolación de cadenas y usamos el formato - ${ourValue} para insertar valores dinámicos como variables, llamadas a funciones y expresiones aritméticas.

Ejemplo:

const generalInformation = (firstName, lastName, Country) => {
  return `First Name: ${firstName} Last Name: ${lastName}. Country: ${Country}`;
} console.log(generalInformation('Mark', 'John', 'US'));

Resultado:

First Name: Mark Last Name: John. Country: US

Ahora sabemos cómo una característica fantástica de la interpolación de cadenas es

Ejemplo:

Inyectemos una llamada de función y una expresión aritmética.

const generalInformation = (firstName, lastName, Country) => {
  return `First Name: ${firstName} Last Name: ${lastName}. Country: ${Country}`;
} console.log(generalInformation('Mark', 'John', 'US'));

console.log(`${generalInformation("Mark", "John", "US")} He is a Worker in our company.`);  

console.log(`sum of 10 and 6 is ${10+6}.`); 

Resultado:

First Name: Mark Last Name: John. Country: US
First Name: Mark Last Name: John. Country: US He is a Worker in our company.
sum of 10 and 6 is 16.

Ejemplo:

Podemos utilizar declaraciones condicionales en la interpolación de cadenas.

const isEvenOrOdd = (num) => {
  console.log(`Number is ${num % 2 === 0 ? 'even' : 'odd'}`);
} isEvenOrOdd(5);
isEvenOrOdd(8);

Resultado:

Number is odd
Number is even