如何在 JavaScript 中連接字串和變數？

String Concatenation with Variables

In JavaScript, concatenating a string with a variable is a common task. Let's explore how to achieve this in response to the question: "So I am trying to make a string out of a string and a passed variable(which is a number).
How do I do that?"

There are multiple approaches available:

• Concatenation with + Operator:

  You can simply use the + operator to concatenate a string and a variable. For example:

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

  登入後複製

  This would result in str being equal to "horseThumb_42".

• Template Literals (ES2015+):

  With template literals introduced in ECMAScript 2015, you can use backticks (`) to embed variables within strings. For example:

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

  登入後複製

  This also results in str being equal to "horseThumb_42".

• Element Retrieval with Template Literals:

  When concatenating a string with an element ID, you can use template literals to directly retrieve the element. For example:

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

  登入後複製

  This would retrieve the element with the ID "horseThumb_42".

  Example Code:

  Using the AddBorder function provided in the question, we can demonstrate the string concatenation with the + operator:

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

  登入後複製

  This code would correctly assign the className to the element with the ID "horseThumb_".

  Debugging Tips:

  If your code is not working correctly, consider adding some debugging statements, such as:

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

  登入後複製

  This will help you identify whether the issue lies in passing the ID, whether the element exists, or if the code is being executed before the DOM is ready.

以上是如何在 JavaScript 中連接字串和變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！