在前端開發中，我們經常需要處理 JSON 數據。JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，易于閱讀和編寫，通常用于數據傳輸和存儲。但是，當我們需要查看和分析較復雜的 JSON 數據時，它會變得難以閱讀和理解。這時候，我們就需要使用 div json 格式化顯示的技術來解決這個問題。 div json 格式化顯示的基本原理是將 JSON 數據用縮進和換行符進行排版，使其變得更加易于閱讀。在前端使用 div json 格式化顯示的方式非常簡單，只需要使用 JavaScript 中的 JSON 對象的 stringify 方法即可。 下面是一個使用 div json 格式化顯示的例子：

let data = {
"name": "Tom",
"age": 20,
"address": {
"province": "Guangdong",
"city": "Shenzhen"
},
"hobbies": [
"swimming",
"reading",
"traveling"
]
};
let jsonStr = JSON.stringify(data, null, 2);
document.querySelector("div").innerText = jsonStr;

上述代碼中，我們首先定義了一個 JSON 數據對象，然后使用 JSON 對象的 stringify 方法將其轉換成字符串變量 jsonStr。這里通過傳遞第二個參數 null 和第三個參數 2 給 stringify 方法，表示在轉換成字符串時對數據進行縮進，并且每行縮進使用兩個空格。 最后，我們通過選擇器獲取 div 元素，將 jsonStr 變量的值賦值給其 innerText 屬性，即可在頁面上顯示格式化后的 JSON 數據。 使用 div json 格式化顯示技術可以使 JSON 數據更加易于查看和分析，同時也提高了前端開發的效率。