Comment concaténer une chaîne avec une variable en JavaScript ?

Concaténation de chaînes avec des variables

En JavaScript, concaténer une chaîne avec une variable est une tâche courante. Explorons comment y parvenir en réponse à la question : "J'essaie donc de créer une chaîne à partir d'une chaîne et d'une variable passée (qui est un nombre).
Comment puis-je faire cela ?"

Il existe plusieurs approches disponibles :

• Concaténation avec l'opérateur :

  Vous pouvez utilisez simplement l'opérateur pour concaténer une chaîne et une variable. Par exemple :

  const id = 42;
  const str = "horseThumb_" + id;

  Cela aurait pour résultat que str serait égal à "horseThumb_42".

• Litéraux de modèle (ES2015) :

  Avec les littéraux de modèle introduits dans ECMAScript 2015, vous pouvez utiliser des backticks (`) pour intégrer des variables dans des chaînes. Par exemple :

  const id = 42;
  const str = `horseThumb_${id}`;

  Cela entraîne également que str est égal à "horseThumb_42".

• Récupération d'éléments avec des littéraux de modèle :

  Lors de la concaténation d'une chaîne avec un ID d'élément, vous pouvez utiliser des littéraux de modèle pour récupérer directement l'élément. Par exemple :

  const id = 42;
  const element = document.getElementById(`horseThumb_${id}`);

  Cela récupérerait l'élément avec l'ID "horseThumb_42".

  Exemple de code :

  Utilisation de la fonction AddBorder fournie dans la question, nous pouvons démontrer la concaténation de chaînes avec l'opérateur :

  function AddBorder(id) {
      const className = "hand positionLeft";
      document.getElementById("horseThumb_" + id).className = className;
  }

  Ce code serait attribuez correctement le nom de classe à l'élément avec l'ID "horseThumb_".

  Conseils de débogage :

  Si votre code ne fonctionne pas correctement, pensez à ajouter du débogage déclarations, telles que :

  console.log("ID number: " + id);
  console.log("Return value of gEBI: " + document.getElementById("horseThumb_" + id));

  Cela vous aidera à identifier si le problème réside dans la transmission de l'ID, si l'élément existe ou si le code est en cours d'exécution avant que le DOM ne soit prêt.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!