JSJSON格式化詳解

一、js格式化json字符串

在 JavaScript 編程中，處理 JSON 字符串是一個常見的任務。JSON 字符串通常是從後端服務器發送過來的，有可能存在格式問題。為了更直觀地展示數據，我們需要對 JSON 字符串進行格式化。下面是一段格式化 JSON 的函數：

function formatJson(jsonStr) {
    var result = '';
    var level = 0;
    var i = 0;
    var j = 0;
    var inQuotationMarks = false;
    var currentChar = null;

    for (i = 0; i < jsonStr.length; i++) {    
        currentChar = jsonStr.charAt(i);

        switch (currentChar) {
            case '{':
            case '[':
                if (!inQuotationMarks) {
                    result += currentChar + '\n' + indent(level + 1);
                    level++;
                } else {
                    result += currentChar;
                }
                break;
            case '}':
            case ']':
                if (!inQuotationMarks) {
                    level--;
                    result += '\n' + indent(level) + currentChar;
                } else {
                    result += currentChar;
                }
                break;
            case ',':
                if (!inQuotationMarks) {
                    result += ',\n' + indent(level);
                } else {
                    result += currentChar;
                }
                break;
            case ':':
                if (!inQuotationMarks) {
                    result += ': ';
                } else {
                    result += currentChar;
                }
                break;
            case '"':
                if (i > 0 && jsonStr.charAt(i - 1) !== '\\') {
                    inQuotationMarks = !inQuotationMarks;
                }
                result += currentChar;
                break;
            default:
                result += currentChar;
                break;
        }
    }

    return result;
}

function indent(level) {
    var result = '';
    var i = 0;
    for (i = 0; i < level; i++) {
        result += '  ';
    }
    return result;
}

調用方式：

var jsonStr = '{"name":"john","age":23,"hobby":["basketball","music"],"address":{"city":"Beijing","country":"China"}}';
var formattedJsonStr = formatJson(jsonStr);
console.log(formattedJsonStr);

輸出結果：

{
  "name": "john",
  "age": 23,
  "hobby": [
    "basketball",
    "music"
  ],
  "address": {
    "city": "Beijing",
    "country": "China"
  }
}

這段代碼使用了一個棧來跟蹤層級。當遇到左花括號或左中括號時，增加層級；當遇到右花括號或右中括號時，減小層級；當遇到逗號時，新起一行，並添加縮進。我們可以將這個函數放到我們的開發工具包中，格式化所有的 JSON 字符串，讓開發調試更加方便。

二、json格式化顯示js

在前端開發中，我們需要用 JavaScript 來操作一些動態數據，有時候需要將 JavaScript 對象格式轉換為 JSON 格式，再傳給後端接口。這個過程也需要我們將 JavaScript 對象格式化成易於閱讀的格式。這個過程比較簡單，只需要使用 JSON.stringify() 函數即可：

var obj = {
    name: "john",
    age: 23,
    hobby: ["basketball", "music"],
    address: {
        city: "Beijing",
        country: "China"
    }
};
var formattedJsonStr = JSON.stringify(obj, null, 4);
console.log(formattedJsonStr);

輸出結果：

{
    "name": "john",
    "age": 23,
    "hobby": [
        "basketball",
        "music"
    ],
    "address": {
        "city": "Beijing",
        "country": "China"
    }
}

在代碼中，JSON.stringify() 函數的第一個參數是要轉換的 JavaScript 對象，第二個參數是一個函數，用於對轉換後的 JSON 字符串進行格式化。由於我們需要縮進四個空格，因此傳入了數字 4。如果不需要格式化，第二個參數可以傳入 null。

三、js格式化

在 JavaScript 開發中，我們經常需要將一些複雜的數據類型轉換為字符串進行傳輸或者存儲。為了方便數據的閱讀和編輯，我們需要將字符串格式化為易於閱讀的形式。下面是一個格式化 JavaScript 對象的函數：

function formatObj(obj) {
    var result = '';
    var level = 0;

    if (Array.isArray(obj)) {
        result += '[';
        level++;
    } else {
        result += '{';
        level++;
    }

    var keys = Object.keys(obj);
    keys.sort();

    for (var i = 0; i < keys.length; i++) {
        var key = keys[i];
        var value = obj[key];
        if (typeof value === 'object') {
            if (Array.isArray(value)) {
                result += '\n' + indent(level) + key + ': [';
                level++;
            } else {
                result += '\n' + indent(level) + key + ': {';
                level++;
            }

            result += formatObj(value);

            level--;
            result += '\n' + indent(level) + '},';
        } else {
            result += '\n' + indent(level) + key + ': ' + value + ','
        }
    }

    if (result.endsWith(',')) {
        result = result.substring(0, result.length - 1)
    }

    if (Array.isArray(obj)) {
        result += '\n' + indent(level - 1) + ']';
    } else {
        result += '\n' + indent(level - 1) + '}';
    }

    return result;
}

function indent(level) {
    var result = '';
    for (var i = 0; i < level; i++) {
        result += '  ';
    }
    return result;
}

調用方式：

var obj = {
    name: 'john',
    age: 23,
    hobby: ['basketball', 'music'],
    address: {
        city: 'Beijing',
        country: 'China'
    }
};
var formattedStr = formatObj(obj);
console.log(formattedStr);

輸出結果：

{
  "address": {
    "city": "Beijing",
    "country": "China"
  },
  "age": 23,
  "hobby": [
    "basketball",
    "music"
  ],
  "name": "john"
}

這段代碼使用了遞歸的方式，循環遍歷對象和數組的每個屬性，並將其格式化成易於閱讀的形式。同樣也可以將這個函數放到開發工具包中，方便日常調試。

四、js格式化成錢數格式

在 Web 開發中，我們經常需要將浮點數格式化為貨幣形式。下面是一個格式化為人民幣貨幣形式（例如 12345678.9 格式化成 12,345,678.90 元）的函數：

function formatMoney(num) {
    num = num.toString().replace(/\$|\,/g, '');

    if (isNaN(num)) {
        num = '0';
    }

    var sign = (num === (num = Math.abs(num)));
    num = Math.floor(num * 100 + 0.50000000001);
    var cents = num % 100;
    num = Math.floor(num / 100).toString();

    if (cents < 10) {
        cents = '0' + cents;
    }

    for (var i = 0; i < Math.floor((num.length - (i + 1)) / 3); i++) {
        num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
    }

    return (((sign) ? '' : '-') + '¥' + num + '.' + cents);
}

調用方式：

var num = 12345678.9;
var formattedMoney = formatMoney(num);
console.log(formattedMoney);

輸出結果：

¥12,345,678.90

這個函數使用了一個正則表達式，將字符串中的非數字字符替換為空。接着將數值乘以 100 並四捨五入，然後格式化為貨幣形式。最後添加千位分隔符和小數點。同樣可以將這個函數放到開發工具包中，方便在開發中調用。