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 并四舍五入，然后格式化为货币形式。最后添加千位分隔符和小数点。同样可以将这个函数放到开发工具包中，方便在开发中调用。