Concaténer une chaîne et un entier en JavaScript

1. Concaténer une chaîne et un entier à l’aide d’une chaîne de modèle en JavaScript
2. Concaténer une chaîne et un entier à l’aide de l’opérateur + en JavaScript

Chaque fois que nous développons des applications Web en JavaScript, nous rencontrons toujours une situation où nous voulons concaténer une variable de n’importe quel type (entier, flottant, etc.) avec une chaîne. C’est un scénario courant.

Cet article explique comment nous pouvons utiliser la fonctionnalité de chaîne de modèle et l’opérateur + pour concaténer une valeur de chaîne avec une valeur entière en JavaScript.

Concaténer une chaîne et un entier à l’aide d’une chaîne de modèle en JavaScript

La chaîne de modèle en JavaScript vous permet d’ajouter des variables de n’importe quel type dans la valeur de chaîne donnée. Les caractères de backtick (`) représentent la chaîne du modèle.

Donc, pour utiliser cette fonctionnalité, nous devons enfermer notre chaîne à l’intérieur des caractères de backtick.

Nous n’utilisons pas ici l’opérateur traditionnel des guillemets (" "). La chaîne de modèle est également appelée littéral de modèle.

La fonctionnalité de chaîne de modèle a été introduite dans la version ES6 de JavaScript.

Supposons que nous ayons une chaîne et une variable entière valeur avec une valeur de 8, comme indiqué ci-dessous. Notre objectif est de concaténer la valeur de la variable value avec la chaîne, puis de l’imprimer sur la console.

Extrait de code - JavaScript :

let value = 8;
console.log('Number is the value.');

Production:

Number is the value.

Pour ce faire, nous devons d’abord remplacer les guillemets (" ") de la chaîne par les caractères de backtick (`).

Après avoir entouré la chaîne de backticks, nous pouvons concaténer ou insérer la variable value n’importe où dans la chaîne. Pour cela, nous devons utiliser le ${}.

Et à l’intérieur de cela, nous ajoutons la variable ${value}, comme indiqué ci-dessous.

Extrait de code - JavaScript :

let value = 8;
console.log(`Number ${value} is the value.`);

Production:

Number 8 is the value.

Comme vous pouvez le voir, la valeur 8 est imprimée dans la chaîne. Chaque fois que nous voulons concaténer une chaîne avec une variable, nous utilisons le concept de littéraux de chaîne.

De même, vous pouvez concaténer de nombreuses variables ayant n’importe quel type dans la chaîne avec cette fonctionnalité.

Concaténer une chaîne et un entier à l’aide de l’opérateur + en JavaScript

L’opérateur + en JavaScript peut également concaténer une chaîne avec un entier. Nous reprendrons le même exemple que nous avons vu ci-dessus, mais nous utiliserons l’opérateur + au lieu d’une chaîne de modèle.

Extrait de code - JavaScript :

let value = 8;
console.log('Number ' + value + ' is the value.');

Production:

Number 8 is the value.

Ici, nous devons utiliser les guillemets doubles traditionnels sur une chaîne, et à n’importe quelle position nous voulons concaténer la variable entière valeur avec la chaîne, nous devons d’abord fermer les guillemets doubles. Ensuite, nous utilisons un opérateur + avant et après la variable value.

Après cela, nous pouvons à nouveau continuer avec la chaîne restante à l’aide de guillemets doubles, comme indiqué ci-dessus.

Le seul problème lors de l’utilisation de l’opérateur + est que si vous souhaitez concaténer de nombreuses variables entre la chaîne, nous devons séparer la chaîne en utilisant plusieurs opérateurs +, comme indiqué ci-dessous.

S’il y a de nombreuses variables que nous voulons concaténer avec la chaîne, cela peut créer des problèmes lors de la lecture et de la compréhension du code.

Extrait de code - JavaScript :

let value1 = 8;
let value2 = 16;
let value3 = 24;

console.log('Table of ' + value1 + ' has values ' + value2 + ' and ' + value3);

Production:

Table of 8 has values 16 and 24

Par conséquent, il est toujours recommandé d’utiliser autant que possible la fonctionnalité de littéraux de modèle d’ES6. Et s’il y a très peu de variables qui doivent être concaténées avec la chaîne, alors, dans ce cas, vous pouvez utiliser l’opérateur +.