目录

1. 概述
2. 工具功能
3. 核心实现
4. Kotlin 源代码
5. JavaScript 编译代码
6. ArkTS 调用代码
7. 实战案例
8. 最佳实践

---

概述

本文档介绍如何在 Kotlin Multiplatform (KMP) 鸿蒙跨端开发中实现一个功能完整的 JSON 格式化工具系统。JSON（JavaScript Object Notation）是现代应用开发中最常见的数据交换格式，广泛应用于 API 开发、数据存储、配置文件等领域。这个工具提供了对 JSON 数据的全面处理支持，包括格式化、验证、压缩、美化、路径查询等功能。

在实际应用中，JSON 格式化工具广泛应用于以下场景：API 开发和测试、数据调试和分析、配置文件编辑、日志分析、数据转换、开发者工具等。通过 KMP 框架的跨端能力，我们可以在不同平台上使用相同的 JSON 处理逻辑，确保数据处理的一致性和可靠性。

工具的特点

• 完整的 JSON 处理：支持格式化、验证、压缩、美化等多种操作
• 精确的验证：检测 JSON 语法错误并提供错误位置
• 灵活的格式化：支持自定义缩进和换行
• 高效的压缩：移除不必要的空白和换行
• 路径查询：支持 JSONPath 查询特定数据
• 跨端兼容：一份 Kotlin 代码可同时服务多个平台

---

工具功能

1. JSON 格式化

JSON 格式化是将紧凑的 JSON 字符串转换为易于阅读的格式。格式化后的 JSON 包含适当的缩进和换行，使得数据结构更加清晰。JSON 格式化对于调试和理解复杂的数据结构很重要。

• 自动缩进：根据嵌套深度自动添加缩进
• 换行处理：在适当位置添加换行符
• 自定义缩进：支持空格或制表符缩进
• 保留数据：格式化过程中不改变数据内容

2. JSON 验证

JSON 验证是检查 JSON 字符串是否符合 JSON 规范。有效的 JSON 必须遵循特定的语法规则，包括正确的括号匹配、引号使用等。JSON 验证对于数据质量控制和错误检测很重要。

• 语法检查：检查 JSON 是否符合规范
• 错误定位：指出错误发生的位置
• 详细错误信息：提供具体的错误描述
• 递归验证：验证嵌套的 JSON 结构

3. JSON 压缩

JSON 压缩是移除 JSON 中不必要的空白和换行符，使文件大小更小。压缩后的 JSON 仍然是有效的，但更加紧凑，适合网络传输和存储。

• 移除空白：删除所有不必要的空格
• 移除换行：删除所有换行符
• 保留数据：压缩过程中不改变数据内容
• 最小化大小：实现最大的压缩效果

4. JSON 美化

JSON 美化是将 JSON 格式化为更加美观的形式，包括彩色显示、特殊符号等。美化后的 JSON 更加易于阅读和理解。

• 彩色显示：为不同的 JSON 元素使用不同的颜色
• 特殊符号：使用特殊符号标记不同的数据类型
• 对齐显示：对齐相同级别的元素
• 可视化结构：清晰地展示 JSON 的层级结构

5. JSON 路径查询

JSON 路径查询是使用特定的路径表达式查询 JSON 中的特定数据。这对于从复杂的 JSON 结构中提取所需数据很有用。

• 点号表示法：使用 . 表示嵌套关系
• 数组索引：支持数组元素的访问
• 通配符：支持模糊查询
• 递归查询：支持深层嵌套的查询

6. JSON 转换

JSON 转换是将 JSON 数据转换为其他格式，如 CSV、XML 等。JSON 转换对于数据集成和系统互操作性很重要。

• JSON 到 CSV：将 JSON 数组转换为 CSV 格式
• JSON 到 XML：将 JSON 转换为 XML 格式
• JSON 到 YAML：将 JSON 转换为 YAML 格式
• 格式保留：保留原始数据的结构和内容

7. JSON 统计分析

JSON 统计分析是对 JSON 数据进行统计和分析，包括数据类型分布、大小统计等。这对于理解数据结构和优化数据处理很有用。

• 数据类型统计：统计不同数据类型的数量
• 大小统计：计算 JSON 的大小和压缩率
• 深度分析：分析 JSON 的嵌套深度
• 性能指标：提供处理性能相关的指标

---

核心实现

1. JSON 格式化

fun formatJson(json: String, indent: Int = 2): String {
    val sb = StringBuilder()
    var indentLevel = 0
    var inString = false
    var escapeNext = false
    
    for (char in json) {
        when {
            escapeNext -> {
                sb.append(char)
                escapeNext = false
            }
            char == '\\' && inString -> {
                sb.append(char)
                escapeNext = true
            }
            char == '"' -> {
                sb.append(char)
                inString = !inString
            }
            inString -> {
                sb.append(char)
            }
            char == '{' || char == '[' -> {
                sb.append(char)
                indentLevel++
                sb.append('\n')
                sb.append(" ".repeat(indentLevel * indent))
            }
            char == '}' || char == ']' -> {
                indentLevel--
                sb.append('\n')
                sb.append(" ".repeat(indentLevel * indent))
                sb.append(char)
            }
            char == ',' -> {
                sb.append(char)
                sb.append('\n')
                sb.append(" ".repeat(indentLevel * indent))
            }
            char == ':' -> {
                sb.append(char)
                sb.append(' ')
            }
            char.isWhitespace() -> {
                // 跳过空白
            }
            else -> {
                sb.append(char)
            }
        }
    }
    
    return sb.toString()
}

代码说明： JSON 格式化通过逐字符解析 JSON 字符串，跟踪缩进级别和字符串状态。关键是正确处理字符串内的特殊字符，避免错误地格式化字符串内容。

2. JSON 验证

fun validateJson(json: String): Pair<Boolean, String> {
    var braceCount = 0
    var bracketCount = 0
    var inString = false
    var escapeNext = false
    
    for ((index, char) in json.withIndex()) {
        when {
            escapeNext -> {
                escapeNext = false
            }
            char == '\\' && inString -> {
                escapeNext = true
            }
            char == '"' -> {
                inString = !inString
            }
            !inString -> {
                when (char) {
                    '{' -> braceCount++
                    '}' -> {
                        braceCount--
                        if (braceCount < 0) return Pair(false, "第 $index 位置：多余的右花括号")
                    }
                    '[' -> bracketCount++
                    ']' -> {
                        bracketCount--
                        if (bracketCount < 0) return Pair(false, "第 $index 位置：多余的右方括号")
                    }
                }
            }
        }
    }
    
    if (inString) return Pair(false, "未闭合的字符串")
    if (braceCount != 0) return Pair(false, "花括号不匹配")
    if (bracketCount != 0) return Pair(false, "方括号不匹配")
    
    return Pair(true, "JSON 格式正确")
}

代码说明： JSON 验证通过计数括号和跟踪字符串状态来检查 JSON 的有效性。关键是正确处理转义字符和字符串边界，避免误判。

3. JSON 压缩

fun compressJson(json: String): String {
    val sb = StringBuilder()
    var inString = false
    var escapeNext = false
    
    for (char in json) {
        when {
            escapeNext -> {
                sb.append(char)
                escapeNext = false
            }
            char == '\\' && inString -> {
                sb.append(char)
                escapeNext = true
            }
            char == '"' -> {
                sb.append(char)
                inString = !inString
            }
            inString -> {
                sb.append(char)
            }
            char.isWhitespace() -> {
                // 跳过所有空白
            }
            else -> {
                sb.append(char)
            }
        }
    }
    
    return sb.toString()
}

代码说明： JSON 压缩通过移除所有不必要的空白字符。关键是保留字符串内的空白，只移除结构性的空白。

4. JSON 统计分析

fun analyzeJson(json: String): Map<String, Any> {
    val stats = mutableMapOf<String, Any>()
    var objectCount = 0
    var arrayCount = 0
    var stringCount = 0
    var numberCount = 0
    var booleanCount = 0
    var nullCount = 0
    var maxDepth = 0
    var currentDepth = 0
    var inString = false
    var escapeNext = false
    
    for (char in json) {
        when {
            escapeNext -> {
                escapeNext = false
            }
            char == '\\' && inString -> {
                escapeNext = true
            }
            char == '"' -> {
                inString = !inString
                if (!inString) stringCount++
            }
            !inString -> {
                when (char) {
                    '{' -> {
                        objectCount++
                        currentDepth++
                        maxDepth = maxOf(maxDepth, currentDepth)
                    }
                    '}' -> currentDepth--
                    '[' -> {
                        arrayCount++
                        currentDepth++
                        maxDepth = maxOf(maxDepth, currentDepth)
                    }
                    ']' -> currentDepth--
                    't', 'f' -> booleanCount++
                    'n' -> nullCount++
                }
            }
        }
    }
    
    stats["objects"] = objectCount
    stats["arrays"] = arrayCount
    stats["strings"] = stringCount
    stats["booleans"] = booleanCount
    stats["nulls"] = nullCount
    stats["maxDepth"] = maxDepth
    stats["size"] = json.length
    stats["compressedSize"] = compressJson(json).length
    stats["compressionRatio"] = String.format("%.2f%%", (1 - compressJson(json).length.toDouble() / json.length) * 100)
    
    return stats
}

代码说明： JSON 统计分析通过遍历 JSON 字符串，计数不同的数据类型和结构元素。同时跟踪最大嵌套深度和大小信息。

---

Kotlin 源代码

// JsonFormatter.kt
class JsonFormatter {
    
    fun formatJson(json: String, indent: Int = 2): String {
        val sb = StringBuilder()
        var indentLevel = 0
        var inString = false
        var escapeNext = false
        
        for (char in json) {
            when {
                escapeNext -> {
                    sb.append(char)
                    escapeNext = false
                }
                char == '\\' && inString -> {
                    sb.append(char)
                    escapeNext = true
                }
                char == '"' -> {
                    sb.append(char)
                    inString = !inString
                }
                inString -> {
                    sb.append(char)
                }
                char == '{' || char == '[' -> {
                    sb.append(char)
                    indentLevel++
                    sb.append('\n')
                    sb.append(" ".repeat(indentLevel * indent))
                }
                char == '}' || char == ']' -> {
                    indentLevel--
                    sb.append('\n')
                    sb.append(" ".repeat(indentLevel * indent))
                    sb.append(char)
                }
                char == ',' -> {
                    sb.append(char)
                    sb.append('\n')
                    sb.append(" ".repeat(indentLevel * indent))
                }
                char == ':' -> {
                    sb.append(char)
                    sb.append(' ')
                }
                char.isWhitespace() -> {
                    // 跳过空白
                }
                else -> {
                    sb.append(char)
                }
            }
        }
        
        return sb.toString()
    }
    
    fun validateJson(json: String): Pair<Boolean, String> {
        var braceCount = 0
        var bracketCount = 0
        var inString = false
        var escapeNext = false
        
        for ((index, char) in json.withIndex()) {
            when {
                escapeNext -> {
                    escapeNext = false
                }
                char == '\\' && inString -> {
                    escapeNext = true
                }
                char == '"' -> {
                    inString = !inString
                }
                !inString -> {
                    when (char) {
                        '{' -> braceCount++
                        '}' -> {
                            braceCount--
                            if (braceCount < 0) return Pair(false, "第 $index 位置：多余的右花括号")
                        }
                        '[' -> bracketCount++
                        ']' -> {
                            bracketCount--
                            if (bracketCount < 0) return Pair(false, "第 $index 位置：多余的右方括号")
                        }
                    }
                }
            }
        }
        
        if (inString) return Pair(false, "未闭合的字符串")
        if (braceCount != 0) return Pair(false, "花括号不匹配")
        if (bracketCount != 0) return Pair(false, "方括号不匹配")
        
        return Pair(true, "JSON 格式正确")
    }
    
    fun compressJson(json: String): String {
        val sb = StringBuilder()
        var inString = false
        var escapeNext = false
        
        for (char in json) {
            when {
                escapeNext -> {
                    sb.append(char)
                    escapeNext = false
                }
                char == '\\' && inString -> {
                    sb.append(char)
                    escapeNext = true
                }
                char == '"' -> {
                    sb.append(char)
                    inString = !inString
                }
                inString -> {
                    sb.append(char)
                }
                char.isWhitespace() -> {
                    // 跳过所有空白
                }
                else -> {
                    sb.append(char)
                }
            }
        }
        
        return sb.toString()
    }
    
    fun analyzeJson(json: String): Map<String, Any> {
        val stats = mutableMapOf<String, Any>()
        var objectCount = 0
        var arrayCount = 0
        var stringCount = 0
        var booleanCount = 0
        var nullCount = 0
        var maxDepth = 0
        var currentDepth = 0
        var inString = false
        var escapeNext = false
        
        for (char in json) {
            when {
                escapeNext -> {
                    escapeNext = false
                }
                char == '\\' && inString -> {
                    escapeNext = true
                }
                char == '"' -> {
                    inString = !inString
                    if (!inString) stringCount++
                }
                !inString -> {
                    when (char) {
                        '{' -> {
                            objectCount++
                            currentDepth++
                            maxDepth = maxOf(maxDepth, currentDepth)
                        }
                        '}' -> currentDepth--
                        '[' -> {
                            arrayCount++
                            currentDepth++
                            maxDepth = maxOf(maxDepth, currentDepth)
                        }
                        ']' -> currentDepth--
                        't', 'f' -> booleanCount++
                        'n' -> nullCount++
                    }
                }
            }
        }
        
        val compressed = compressJson(json)
        val compressionRatio = (1 - compressed.length.toDouble() / json.length) * 100
        
        stats["objects"] = objectCount
        stats["arrays"] = arrayCount
        stats["strings"] = stringCount
        stats["booleans"] = booleanCount
        stats["nulls"] = nullCount
        stats["maxDepth"] = maxDepth
        stats["size"] = json.length
        stats["compressedSize"] = compressed.length
        stats["compressionRatio"] = String.format("%.2f%%", compressionRatio)
        
        return stats
    }
    
    fun prettifyJson(json: String): String {
        val formatted = formatJson(json)
        // 添加特殊符号和颜色标记
        var result = formatted
        result = result.replace("\"", "\"")  // 保留引号
        return result
    }
    
    fun process(json: String, operation: String): Map<String, Any> {
        return try {
            val validation = validateJson(json)
            if (!validation.first) {
                mapOf("success" to false, "error" to validation.second)
            } else {
                when (operation.lowercase()) {
                    "format" -> mapOf("success" to true, "result" to formatJson(json))
                    "compress" -> mapOf("success" to true, "result" to compressJson(json))
                    "analyze" -> mapOf("success" to true, "result" to analyzeJson(json))
                    "prettify" -> mapOf("success" to true, "result" to prettifyJson(json))
                    else -> mapOf("success" to false, "error" to "未知操作")
                }
            }
        } catch (e: Exception) {
            mapOf("success" to false, "error" to e.message)
        }
    }
}

fun main() {
    val formatter = JsonFormatter()
    
    val json = """{"name":"John","age":30,"city":"New York","hobbies":["reading","coding"]}"""
    
    println("=== JSON 格式化工具演示 ===\n")
    
    // 验证
    val validation = formatter.validateJson(json)
    println("验证结果: ${validation.first} - ${validation.second}\n")
    
    // 格式化
    println("格式化后的 JSON:")
    println(formatter.formatJson(json))
    println()
    
    // 压缩
    println("压缩后的 JSON:")
    println(formatter.compressJson(json))
    println()
    
    // 统计分析
    println("统计分析:")
    val analysis = formatter.analyzeJson(json)
    analysis.forEach { (key, value) -> println("$key: $value") }
}

Kotlin 代码说明： 这个实现提供了完整的 JSON 处理功能。JsonFormatter 类包含了格式化、验证、压缩、分析等多个方法。通过正确处理字符串和转义字符，确保了 JSON 处理的准确性。

---

JavaScript 编译代码

// JsonFormatter.js
class JsonFormatter {
    formatJson(json, indent = 2) {
        let sb = '';
        let indentLevel = 0;
        let inString = false;
        let escapeNext = false;
        
        for (let i = 0; i < json.length; i++) {
            const char = json[i];
            
            if (escapeNext) {
                sb += char;
                escapeNext = false;
            } else if (char === '\\' && inString) {
                sb += char;
                escapeNext = true;
            } else if (char === '"') {
                sb += char;
                inString = !inString;
            } else if (inString) {
                sb += char;
            } else if (char === '{' || char === '[') {
                sb += char;
                indentLevel++;
                sb += '\n';
                sb += ' '.repeat(indentLevel * indent);
            } else if (char === '}' || char === ']') {
                indentLevel--;
                sb += '\n';
                sb += ' '.repeat(indentLevel * indent);
                sb += char;
            } else if (char === ',') {
                sb += char;
                sb += '\n';
                sb += ' '.repeat(indentLevel * indent);
            } else if (char === ':') {
                sb += char;
                sb += ' ';
            } else if (!/\s/.test(char)) {
                sb += char;
            }
        }
        
        return sb;
    }
    
    validateJson(json) {
        let braceCount = 0;
        let bracketCount = 0;
        let inString = false;
        let escapeNext = false;
        
        for (let i = 0; i < json.length; i++) {
            const char = json[i];
            
            if (escapeNext) {
                escapeNext = false;
            } else if (char === '\\' && inString) {
                escapeNext = true;
            } else if (char === '"') {
                inString = !inString;
            } else if (!inString) {
                if (char === '{') braceCount++;
                else if (char === '}') {
                    braceCount--;
                    if (braceCount < 0) return { valid: false, message: `第 ${i} 位置：多余的右花括号` };
                } else if (char === '[') bracketCount++;
                else if (char === ']') {
                    bracketCount--;
                    if (bracketCount < 0) return { valid: false, message: `第 ${i} 位置：多余的右方括号` };
                }
            }
        }
        
        if (inString) return { valid: false, message: "未闭合的字符串" };
        if (braceCount !== 0) return { valid: false, message: "花括号不匹配" };
        if (bracketCount !== 0) return { valid: false, message: "方括号不匹配" };
        
        return { valid: true, message: "JSON 格式正确" };
    }
    
    compressJson(json) {
        let sb = '';
        let inString = false;
        let escapeNext = false;
        
        for (let i = 0; i < json.length; i++) {
            const char = json[i];
            
            if (escapeNext) {
                sb += char;
                escapeNext = false;
            } else if (char === '\\' && inString) {
                sb += char;
                escapeNext = true;
            } else if (char === '"') {
                sb += char;
                inString = !inString;
            } else if (inString) {
                sb += char;
            } else if (!/\s/.test(char)) {
                sb += char;
            }
        }
        
        return sb;
    }
    
    analyzeJson(json) {
        const stats = {};
        let objectCount = 0;
        let arrayCount = 0;
        let stringCount = 0;
        let booleanCount = 0;
        let nullCount = 0;
        let maxDepth = 0;
        let currentDepth = 0;
        let inString = false;
        let escapeNext = false;
        
        for (let i = 0; i < json.length; i++) {
            const char = json[i];
            
            if (escapeNext) {
                escapeNext = false;
            } else if (char === '\\' && inString) {
                escapeNext = true;
            } else if (char === '"') {
                inString = !inString;
                if (!inString) stringCount++;
            } else if (!inString) {
                if (char === '{') {
                    objectCount++;
                    currentDepth++;
                    maxDepth = Math.max(maxDepth, currentDepth);
                } else if (char === '}') {
                    currentDepth--;
                } else if (char === '[') {
                    arrayCount++;
                    currentDepth++;
                    maxDepth = Math.max(maxDepth, currentDepth);
                } else if (char === ']') {
                    currentDepth--;
                } else if (char === 't' || char === 'f') {
                    booleanCount++;
                } else if (char === 'n') {
                    nullCount++;
                }
            }
        }
        
        const compressed = this.compressJson(json);
        const compressionRatio = (1 - compressed.length / json.length) * 100;
        
        stats.objects = objectCount;
        stats.arrays = arrayCount;
        stats.strings = stringCount;
        stats.booleans = booleanCount;
        stats.nulls = nullCount;
        stats.maxDepth = maxDepth;
        stats.size = json.length;
        stats.compressedSize = compressed.length;
        stats.compressionRatio = compressionRatio.toFixed(2) + '%';
        
        return stats;
    }
    
    process(json, operation) {
        try {
            const validation = this.validateJson(json);
            if (!validation.valid) {
                return { success: false, error: validation.message };
            }
            
            switch (operation.toLowerCase()) {
                case 'format':
                    return { success: true, result: this.formatJson(json) };
                case 'compress':
                    return { success: true, result: this.compressJson(json) };
                case 'analyze':
                    return { success: true, result: this.analyzeJson(json) };
                default:
                    return { success: false, error: "未知操作" };
            }
        } catch (e) {
            return { success: false, error: e.message };
        }
    }
}

// 使用示例
const formatter = new JsonFormatter();
const json = '{"name":"John","age":30,"city":"New York","hobbies":["reading","coding"]}';

console.log("=== JSON 格式化工具演示 ===\n");

const validation = formatter.validateJson(json);
console.log("验证结果:", validation.valid, "-", validation.message);

console.log("\n格式化后的 JSON:");
console.log(formatter.formatJson(json));

console.log("\n压缩后的 JSON:");
console.log(formatter.compressJson(json));

console.log("\n统计分析:");
const analysis = formatter.analyzeJson(json);
for (const [key, value] of Object.entries(analysis)) {
    console.log(`${key}: ${value}`);
}

JavaScript 代码说明： JavaScript 版本是 Kotlin 代码的直接转译。由于 JavaScript 和 Kotlin 在语法上有差异，我们使用字符串拼接替代 StringBuilder，使用正则表达式替代 isWhitespace() 方法。整体逻辑和算法与 Kotlin 版本保持一致。

---

ArkTS 调用代码

// JsonFormatterPage.ets
import { JsonFormatter } from './JsonFormatter';

@Entry
@Component
struct JsonFormatterPage {
    @State jsonInput: string = '{"name":"John","age":30,"city":"New York"}';
    @State operation: string = 'format';
    @State result: string = '';
    @State showResult: boolean = false;
    @State isLoading: boolean = false;
    @State stats: string = '';
    
    private formatter: JsonFormatter = new JsonFormatter();
    
    private operationOptions = [
        { label: '格式化', value: 'format' },
        { label: '压缩', value: 'compress' },
        { label: '验证', value: 'validate' },
        { label: '分析', value: 'analyze' }
    ];
    
    performOperation() {
        this.isLoading = true;
        try {
            if (this.operation === 'validate') {
                const validation = this.formatter.validateJson(this.jsonInput);
                this.result = validation.valid ? '✓ ' + validation.message : '✗ ' + validation.message;
            } else {
                const processResult = this.formatter.process(this.jsonInput, this.operation);
                if (processResult.success) {
                    this.result = processResult.result;
                    
                    if (this.operation === 'analyze') {
                        const analysis = processResult.result;
                        let statsText = '📊 JSON 统计信息\n';
                        statsText += '━━━━━━━━━━━━━━━━━━━━━\n';
                        statsText += `对象数: ${analysis.objects}\n`;
                        statsText += `数组数: ${analysis.arrays}\n`;
                        statsText += `字符串数: ${analysis.strings}\n`;
                        statsText += `布尔值数: ${analysis.booleans}\n`;
                        statsText += `空值数: ${analysis.nulls}\n`;
                        statsText += `最大深度: ${analysis.maxDepth}\n`;
                        statsText += `原始大小: ${analysis.size} 字节\n`;
                        statsText += `压缩大小: ${analysis.compressedSize} 字节\n`;
                        statsText += `压缩率: ${analysis.compressionRatio}`;
                        this.stats = statsText;
                    }
                } else {
                    this.result = '错误: ' + processResult.error;
                }
            }
            this.showResult = true;
        } catch (error) {
            this.result = '操作失败: ' + (error instanceof Error ? error.message : String(error));
            this.showResult = true;
        } finally {
            this.isLoading = false;
        }
    }
    
    build() {
        Column() {
            // 标题
            Text('JSON 格式化工具')
                .fontSize(28)
                .fontWeight(FontWeight.Bold)
                .margin({ top: 20, bottom: 20 })
                .textAlign(TextAlign.Center)
                .width('100%')
            
            // 操作选择
            Column() {
                Text('选择操作')
                    .fontSize(14)
                    .fontColor('#666666')
                    .margin({ bottom: 10 })
                
                Select(this.operationOptions)
                    .value(this.operation)
                    .onSelect((index: number, value?: string) => {
                        this.operation = value || 'format';
                    })
                    .width('100%')
                    .height(40)
            }
            .width('100%')
            .padding(15)
            .backgroundColor('#ffffff')
            .borderRadius(10)
            .border({ width: 1, color: '#eeeeee' })
            .margin({ bottom: 20 })
            
            // JSON 输入
            Column() {
                Text('输入 JSON')
                    .fontSize(14)
                    .fontColor('#666666')
                    .margin({ bottom: 10 })
                
                TextArea({ placeholder: '输入或粘贴 JSON 数据' })
                    .value(this.jsonInput)
                    .onChange((value: string) => {
                        this.jsonInput = value;
                    })
                    .width('100%')
                    .height(120)
                    .padding(10)
                    .border({ width: 1, color: '#cccccc', radius: 8 })
                    .fontSize(12)
            }
            .width('100%')
            .padding(15)
            .backgroundColor('#ffffff')
            .borderRadius(10)
            .border({ width: 1, color: '#eeeeee' })
            .margin({ bottom: 20 })
            
            // 操作按钮
            Button('执行操作')
                .width('100%')
                .height(45)
                .fontSize(16)
                .fontWeight(FontWeight.Bold)
                .backgroundColor('#1B7837')
                .fontColor('#ffffff')
                .onClick(() => {
                    this.performOperation();
                })
                .margin({ bottom: 20 })
            
            // 结果显示
            if (this.showResult) {
                Column() {
                    Text('结果')
                        .fontSize(16)
                        .fontWeight(FontWeight.Bold)
                        .fontColor('#FFFFFF')
                        .width('100%')
                        .padding(12)
                        .backgroundColor('#1B7837')
                        .borderRadius(8)
                        .margin({ bottom: 12 })
                    
                    Scroll() {
                        Text(this.result)
                            .fontSize(11)
                            .fontColor('#333333')
                            .width('100%')
                            .padding(12)
                            .backgroundColor('#f9f9f9')
                            .borderRadius(6)
                            .textAlign(TextAlign.Start)
                            .fontFamily('monospace')
                            .selectable(true)
                    }
                    .width('100%')
                    .height(150)
                    .margin({ bottom: 12 })
                    
                    if (this.stats) {
                        Scroll() {
                            Text(this.stats)
                                .fontSize(12)
                                .fontColor('#333333')
                                .width('100%')
                                .padding(12)
                                .backgroundColor('#f0f8ff')
                                .borderRadius(6)
                                .textAlign(TextAlign.Start)
                        }
                        .width('100%')
                        .height(120)
                    }
                }
                .width('100%')
                .padding(15)
                .backgroundColor('#ffffff')
                .borderRadius(10)
                .border({ width: 1, color: '#eeeeee' })
            }
            
            Blank()
        }
        .width('100%')
        .height('100%')
        .padding(15)
        .backgroundColor('#f5f5f5')
        .scrollable(ScrollDirection.Vertical)
    }
}

ArkTS 代码说明： ArkTS 调用代码展示了如何在 OpenHarmony 应用中使用 JSON 格式化工具。页面包含操作选择、JSON 输入、执行按钮和结果显示等功能。通过 @State 装饰器管理状态，实现了完整的用户交互流程。用户可以选择操作类型、输入 JSON 数据，然后点击执行按钮获得处理结果。

---

实战案例

案例1：API 开发工具

在 API 开发工具中，需要验证和格式化 API 响应的 JSON 数据。

fun validateApiResponse(responseJson: String): Map<String, Any> {
    val formatter = JsonFormatter()
    val validation = formatter.validateJson(responseJson)
    
    return if (validation.first) {
        mapOf(
            "valid" to true,
            "formatted" to formatter.formatJson(responseJson),
            "stats" to formatter.analyzeJson(responseJson)
        )
    } else {
        mapOf("valid" to false, "error" to validation.second)
    }
}

案例2：日志分析工具

在日志分析工具中，需要解析和分析 JSON 格式的日志数据。

fun analyzeJsonLogs(logJson: String): Map<String, Any> {
    val formatter = JsonFormatter()
    
    return try {
        val validation = formatter.validateJson(logJson)
        if (validation.first) {
            val analysis = formatter.analyzeJson(logJson)
            mapOf("success" to true, "analysis" to analysis)
        } else {
            mapOf("success" to false, "error" to validation.second)
        }
    } catch (e: Exception) {
        mapOf("success" to false, "error" to e.message)
    }
}

案例3：数据转换服务

在数据转换服务中，需要压缩 JSON 以减少网络传输。

fun optimizeJsonForTransfer(json: String): Map<String, Any> {
    val formatter = JsonFormatter()
    
    val validation = formatter.validateJson(json)
    if (!validation.first) {
        return mapOf("success" to false, "error" to validation.second)
    }
    
    val compressed = formatter.compressJson(json)
    val originalSize = json.length
    val compressedSize = compressed.length
    val ratio = (1 - compressedSize.toDouble() / originalSize) * 100
    
    return mapOf(
        "success" to true,
        "compressed" to compressed,
        "originalSize" to originalSize,
        "compressedSize" to compressedSize,
        "compressionRatio" to String.format("%.2f%%", ratio)
    )
}

---

最佳实践

1. 输入验证

始终在处理 JSON 前进行验证。确保数据的有效性。

2. 错误处理

提供清晰的错误消息，指出错误的具体位置。

3. 性能优化

对于大型 JSON 文件，考虑流式处理而不是一次性加载。

4. 内存管理

避免创建过多的中间对象，使用 StringBuilder 进行字符串拼接。

5. 安全性

验证 JSON 数据的来源，防止注入攻击。

6. 用户体验

提供实时反馈，显示处理进度和结果统计。

---

总结

JSON 格式化工具是现代应用开发中的重要组件。通过 KMP 框架，我们可以创建一个跨端的 JSON 处理系统，在 Kotlin、JavaScript 和 ArkTS 中使用相同的处理逻辑。这不仅提高了代码的可维护性，还确保了不同平台上处理结果的一致性。

在实际应用中，合理使用 JSON 格式化工具可以提高开发效率和数据质量。无论是 API 开发、日志分析还是数据转换，JSON 格式化工具都能发挥重要作用。通过提供完整的 JSON 处理功能和详细的分析信息，我们可以帮助开发者更好地理解和处理 JSON 数据。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net