在 JavaScript 中將物件轉換為字串

1. 使用 JavaScript 內建函式 JSON.stringify()
2. 使用 console.log() 和 %o
3. 使用 Object.enteries() 將 JavaScript 物件轉換為字串
4. 使用 Object.enteries() 和物件解構將 JavaScript 物件轉換為 JSON 字串
5. 使用 Object.keys() 將 JavaScript 物件轉換為 JSON 字串

JavaScript 物件由鍵值對形式的屬性組成。如果我們將它們與字串一起記錄，我們會看到 [object Object]。它隱藏下面的物件屬性。在編碼時，我們需要將 javascript 物件轉換為字串資料型別。特別是在將資料儲存到 localstorage 或資料庫時。我們可以通過多種方式將 javascript 物件轉換為字串。

使用 JavaScript 內建函式 JSON.stringify()

JSON.stringify() 是一個強大且常用的函式，用於將 javascript 物件轉換為 JSON 字串。我們還可以使用它來設定 JSON 表示的樣式以獲得更好的可讀性。該函式接受三個引數：

• javascriptObject：第一個引數是一個強制引數，我們在其中傳遞需要轉換為 JSON 字串的源 JavaScript 物件。
• replacerFunction：第二個引數是可選的。它接受一個函式，通過它我們可以改變源 javascript 物件。我們可以提取我們希望在最終字串化 JSON 輸出中看到的那些物件引數。如果我們在此引數中傳遞 null 值，該函式將在其字串化的 JSON 輸出中包含來自源 javascript 物件的所有引數。
• numberOfSpaces：最後一個引數是字串化過程中每個引數前要引入的空格數。它是一個數字引數。如果引數值大於 1，它將在每個物件引數前用一個或多個空格格式化字串化的 JSON。它純粹是為了格式化目的，以人類可讀的形式輸出。

使用方法請參考以下程式碼。

var item = {};
item.id = 1;
item.name = 'icy-cream';
item.flavor = 'vanilla';
console.log('Item: ' + item);
console.log('Item: ' + JSON.stringify(item));
console.log('Item: ' + JSON.stringify(item, null, 2));

輸出：

Item: [object Object]
Item: {"id":1,"name":"icy-cream","flavor":"vanilla"}
Item: {
  "id": 1,
  "name": "icy-cream",
  "flavor": "vanilla"
}

第一個日誌輸出 javascript 物件的遮蔽版本。第二個日誌具有 JSON 物件的字串表示形式，但沒有格式化。最後一個日誌是 javascript 物件的格式化版本，可讀性很強。

使用 console.log() 和 %o

console.log() 是一個內建的 javascript 函式，用於將值記錄到瀏覽器控制檯。它接受三個引數。第一個引數是 JavaScript 物件；第二個引數是要顯示的訊息；最後一個引數是要記錄在 Web 控制檯中的訊息的子字串。以下程式碼顯示了使用 console.log 方法將 javascript 物件轉換為字串。

var item = {};
item.id = 1;
item.name = 'icy-cream';
item.flavor = 'vanilla';
console.log('Item: ' + item);
console.log('Item: %o', item);

輸出：

Item: [object Object]
Item: {id: 1, name: "icy-cream", flavor: "vanilla"}

在上面的程式碼中，第一個命令 console.log("Item: " + item); 將物件記錄為 [object Object]。它隱藏了物件引數。然而，如果我們新增 %o 並將物件作為引數傳遞，我們可以看到 JavaScript 物件的內部內容。我們還可以使用 %O 來記錄 JavaScript 物件。

請注意，console.log 中的 %o 允許我們在控制檯中檢視物件。但是我們不能使用它來轉換值並將其儲存在某個變數中以供進一步使用。

使用 Object.enteries() 將 JavaScript 物件轉換為字串

Object.enteries() 是一個內建的 JavaScript 函式。它將物件拆分為一個由 [key, value] 對組成的陣列。因此，我們可以遍歷這樣的陣列並手動將 JavaScript 物件轉換為字串。

var item = {};
item.id = 1;
item.name = 'icy-cream';
item.flavor = 'vanilla';
var stringifiedObj = Object.entries(item).map(x => x.join(':')).join('\n');
console.log('Item: ' + item);
console.log(`Item: \n{\n${stringifiedObj}\n}`);

輸出：

Item: [object Object]
Item: 
{
id:1
name:icy-cream
flavor:vanilla
}

在程式碼中，我們首先使用 Object.enteries() 函式將物件拆分為一個由小引數陣列組成的陣列。接下來，我們通過應用 javascript 內建的 join(":") 函式將子陣列轉換為 key:value 格式。它將 Object.enteries 輸出的 [key, value] 陣列轉換為 key:value 格式。我們最終將 JavaScript 物件記錄在其字串表示中。這是一個簡潔的方法，它只使用一段程式碼，Object.entries(item).map(x=>x.join(":")).join("\n") 用於轉換過程。

使用 Object.enteries() 和物件解構將 JavaScript 物件轉換為 JSON 字串

使用 Object.enteries() 進行轉換的另一種方法是將它與 javascript 的 object destructuring 概念一起使用。使用這種技術，我們解構 Object.enteries() 輸出的鍵值對陣列，使用 for 迴圈 對其進行迭代，並將其分配給臨時變數 param 和 value。我們將迭代的結果儲存到 str 變數中。最後，我們使用 console.log() 記錄變數 str。程式碼如下。

var item = {};
item.id = 1;
item.name = 'icy-cream';
item.flavor = 'vanilla';
var str = '';
for (const [p, val] of Object.entries(item)) {
  str += `${p}:${val}\n`;
}
console.log(
    'Item: ' +
    '{' + str + '}');

輸出：

Item: {id:1
name:icy-cream
flavor:vanilla
}

使用 Object.keys() 將 JavaScript 物件轉換為 JSON 字串

我們可以使用 javascript 內建函式 Object.keys() 手動將 JavaScript 物件轉換為 JSON 字串。Object.keys() 返回一個包含 JavaScript 物件的所有鍵的陣列。然後我們可以使用 for 迴圈迭代它們並形成 JavaScript 物件的字串版本。最終結果可以記錄或儲存在變數中。程式碼如下。

var item = {};
item.id = 1;
item.name = 'icy-cream';
item.flavor = 'vanilla';
var str = '';
for (key of Object.keys(item)) {
  str += `${key}:${item[key]}\n`;
}
console.log(
    'Item: ' +
    '{' + str + '}');

輸出：

Item: {id:1
name:icy-cream
flavor:vanilla
}

這個概念類似於使用 Object.enteries() 來獲取 javascript 物件的引數。Object.enteries() 將鍵值對作為陣列返回，而 Object.keys 返回物件鍵的字串陣列，通過迴圈輸出陣列並形成 javascript 物件的字串表示進一步處理。