JavaScript 對象轉 String – 詳細教程

一、JSON.stringify方法

我們在前端開發中，經常需要將 JavaScript 對象轉換成字元串，以便於傳輸、存儲或展示。以下是使用 JSON.stringify() 實現對象轉換成字元串的示例：

const obj = {name: "張三", age: 18};
const jsonObj = JSON.stringify(obj);
console.log(jsonObj); //"{"name":"張三","age":18}"

可以看到，使用 JSON.stringify() 方法將對象轉換成了字元串，其中鍵值對以雙引號包裹，成為了一個合法的 JSON 格式字元串。

此外，JSON.stringify() 方法還支持第二個參數，用於指定需要序列化的屬性和其對應的轉換規則，以及第三個參數控制縮進：

const obj = {name: "張三", age: 18};
const jsonObj = JSON.stringify(obj, ["name"], 2);
console.log(jsonObj); //"{
  // "name": "張三"
// }"

此時，我們只選擇將 name 屬性序列化，展示出來的結果也進行了縮進，並更容易閱讀。

二、toString方法

除了 JSON.stringify() 方法之外，我們還可以使用對象的 toString() 方法將其轉換成字元串。不過需要注意的是，toString() 方法並不是為了序列化對象設計的，而是將對象轉換為字元串形式的默認方式。如果我們想要自定義序列化規則，還需要藉助其它輔助工具。

const obj = {name: "張三", age: 18};
const str = obj.toString();
console.log(str); //"[object Object]"

可以看到，使用 toString() 方法將對象轉換成了 [object Object] 的字元串形式，而沒有包括對象的屬性信息。

三、自定義 toJSON 方法

為了能夠將對象轉換成我們自定義的字元串形式，我們可以通過為對象添加 toJSON() 方法實現。這個方法在我們調用 JSON.stringify() 方法時會被自動調用，將返回結果作為對應的值進行序列化。

const obj = {
  name: "張三",
  age: 18,
  toString() {
    return `${this.name}今年${this.age}歲了`;
  },
  toJSON() {
    return {
      desc: this.toString()
    }
  }
};
const jsonObj = JSON.stringify(obj);
console.log(jsonObj); // "{"desc":"張三今年18歲了"}"

這裡我們實現了一個自定義的 toString() 方法，對應的 toJSON() 方法返回了一個包含我們自定義字元串形式的對象，從而實現了我們的需求。

四、使用 eval 方法

除了以上的方法之外，一些老舊代碼中可能還使用了 eval 函數來實現將對象轉換為字元串的需求。雖然 eval 函數使用起來非常方便，但是由於會對傳入的字元串進行直接執行，存在一定的安全風險，應該儘可能避免使用。

const obj = {name: "張三", age: 18};
const str = `(${JSON.stringify(obj)})`;
const evalStr = eval(str);
console.log(evalStr); // {name: "張三", age: 18}

上述代碼中，我們使用 JSON.stringify() 方法將對象轉換成字元串，並在其兩側添加括弧，然後使用 eval() 函數對其進行了計算，將字元串形式的對象轉換成了原始對象。

五、結語

JavaScript 對象轉換為字元串是前端開發中常見的需求，本文介紹了多種實現方式，包括 JSON.stringify() 方法、toString() 方法、自定義 toJSON() 方法、eval 函數等。在實際開發中，我們可以根據具體場景選擇合適的方法，實現需求。