【Vue】中英文键值对翻译美化输出

以琦琦为中心

已于 2025-02-18 14:13:24 修改

阅读量443

点赞数 4

分类专栏： Vue 小Tip 文章标签： vue.js 前端 javascript

于 2024-04-22 13:15:27 首次发布

本文链接：https://blog.youkuaiyun.com/AA2534193348/article/details/138072239

版权

Vue 小Tip 专栏收录该内容

2 篇文章

订阅专栏

使用json-stringify-pretty-compact美化JSON输出及实现中英文键值对翻译

在Web开发中，我们经常需要处理JSON数据的显示与交互，包括对其进行格式化以便于阅读，以及在多语言环境下对键值对进行翻译。本文将介绍如何使用json-stringify-pretty-compact库美化JSON输出，并结合自定义方法实现中英文键值对的动态翻译。

一、美化JSON输出：json-stringify-pretty-compact

为了使JSON数据在前端界面呈现时更加易读，可以使用json-stringify-pretty-compact库对JSON对象进行格式化输出。首先，通过npm或yarn安装该库：

npm install json-stringify-pretty-compact
# 或者
yarn add json-stringify-pretty-compact

接着，在代码中引入并使用：

import jsonStringifyPrettyCompact from "json-stringify-pretty-compact";

function formatJsonData(jsonData) {
  return jsonStringifyPrettyCompact(jsonData, { maxLength: 20 });
}

// 示例
const newData = { /* JSON数据 */ };
const formattedData = formatJsonData(newData);

在上述代码中：

引入json-stringify-pretty-compact库，并导出其默认导出（即jsonStringifyPrettyCompact函数）。
定义formatJsonData函数，接收待格式化的JSON数据作为参数。
使用jsonStringifyPrettyCompact函数对JSON数据进行美化，传递一个配置对象，其中maxLength属性用于控制缩进长度（此处设定为20个字符）。
返回格式化后的JSON字符串。

这样，当需要在界面上展示JSON数据时，只需调用formatJsonData函数处理原始数据即可得到易于阅读的格式化字符串。

二、实现中英文键值对翻译

在多语言应用场景下，需要将JSON对象中的英文键名动态翻译为对应的中文。为此，可以创建一个包含中英文键值对映射的字典，并编写一个递归方法来遍历JSON对象，将英文键名替换为相应的中文翻译。

1. 定义中英文键值对映射

const translations = {
  system: "系统",
  user: "用户"
};

2. 编写翻译方法

function translateKey(key) {
  return translations[key] || key;
}

function translateToChinese(obj) {
  const chineseObj = {};
  for (let key in obj) {
    if (typeof obj[key] === "object" && obj[key] !== null) {
      chineseObj[translateKey(key)] = translateToChinese(obj[key]);
    } else {
      chineseObj[translateKey(key)] = obj[key];
    }
  }
  return chineseObj;
}

在这段代码中：

translateKey函数接收一个英文键名作为参数，从预定义的translations字典中查找对应的中文翻译，如果不存在则返回原始键名。
translateToChinese函数接受一个待翻译的JSON对象作为参数，递归遍历其所有键值对。对于嵌套的对象，递归调用自身；对于非对象的值，则直接复制。在创建新对象时，使用translateKey函数将英文键名翻译为中文。

3. 应用翻译

const originalData = { /* JSON数据 */ };
const translatedData = translateToChinese(originalData);

// 在Vue模板中展示翻译后的JSON数据
<pre v-if="scope.row.trafficDataStorage" class="json-pretty-print">
  {{ formatJsonData(translatedData) }}
</pre>