HTML - DOM 元素 toString() 方法

**toString()** 方法允許我們將 HTML 元素轉換為字串格式，而不會更改原始元素。它通常顯示其型別為 [object Object]。

語法

object.toString();

引數

此方法不接受任何引數。

返回值

toString() 方法不會直接返回值。相反，它會自動用於將物件轉換為字串格式。

HTML DOM 元素 'toString()' 方法示例

以下是 toString() 方法的一些示例，這些示例將物件轉換為字串格式，以便在 HTML DOM 中顯示或執行不同的操作。

在 HTML 元素上使用 toString() 方法

此示例顯示了 toString 方法的使用。程式碼透過呼叫 toString() 函式訪問 **<div>** 元素的內容，該函式將元素轉換為其字串格式並將內容更新為顯示 toString() 的結果。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>toString() Method Example</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>toString() Method</h2>
  <p>Click the button to get the result!</p>
  <div id="myDiv">
      <p>Example content.</p>
  </div>

  <button onclick="displayToString()">
    Display toString() Result
  </button>

  <div id="ot"></div>

  <script>
      function displayToString() {
          const m=document.getElementById('myDiv');
          const opd=document.getElementById('ot');

          // Using toString() on the HTML element
          const elementString = m.toString();

          // Displaying the result
          opd.textContent = 
          `toString() Result: ${elementString}`;
      }
  </script>
</body>

</html>

將陣列轉換為字串

此示例包含一個包含元素的陣列。toString() 方法用於將陣列轉換為字串。然後，程式碼更新 **<div>** 元素的內容以顯示陣列作為字串。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>toString() Example: Array</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>toString() Method</h2>
  <p>Converting an Array to String</p> 
  <button onclick="convertArrayToString()">
    Convert Array to String
  </button>

  <div id="output"></div>

  <script>
      function convertArrayToString() {
          const my=['apple', 'banana', 'cherry'];
          const arrayString = my.toString();

          const ot=document.getElementById('output');
          ot.textContent = 
          `Array as String: ${arrayString}`;
      }
  </script>
</body>

</html>

將數字轉換為字串

此示例顯示了使用 toString() 方法將數字轉換為字串。然後，程式碼呼叫 toString() 方法並更新 **<div>** 元素的內容以顯示數字作為字串。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Converting Number</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>toString() Method</h2>
  <p>Converting Number to String</p>   

  <button onclick="convertNumberToString()">
    Convert Number to String
  </button>

  <div id="output"></div>

  <script>
      function convertNumberToString() {
          const myNumber = 12345;
          const numstr = myNumber.toString();

          const ot=document.getElementById('output');
          ot.textContent = 
          `Number as String: ${numstr}`;
      }
  </script>
</body>

</html>

將物件轉換為字串

此示例顯示了使用 toString() 方法將具有屬性“name”和“age”的物件轉換為字串。然後，程式碼呼叫 toString() 方法並更新 **<div>** 元素的內容以顯示物件作為字串。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Converting Object</title>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>toString() Method</h2>
  <p>Converting Object to String</p>  

  <button onclick="convertObjectToString()">
    Convert Object to String
  </button>

  <div id="output"></div>

  <script>
      function convertObjectToString() {
          const myObject={name:'John',age:30};
          const objectString=myObject.toString(); 


          const outputDiv = 
          document.getElementById('output');
          outputDiv.textContent = 
          `Object as String: ${objectString}`;
      }
  </script>
</body>

</html>

支援的瀏覽器

方法
toString()	是	是	是	是	是

html_dom_element_reference.htm

列印頁面