HTML页面使用Javascript给JSON变量赋值俄文字符出现乱码问题

问题根源 #

你遇到的是典型的UTF-8字符串被错误按照Latin-1编码解析导致的乱码，需要分别从HTML编码声明、前端展示、JSZip文件生成三个层面修复：

注意：请删除所有encodeURIComponent/decodeURIComponent相关的非必要处理，这类操作只会额外破坏编码格式。

修复步骤 #

1. 补充HTML编码声明 #

在页面<head>标签最顶部加入UTF-8编码声明，确保浏览器正确解析页面内的俄文字符串：

<head>
  <meta charset="UTF-8">
  <!-- 其他头部内容 -->
</head>

添加后先在浏览器控制台打印translations对象内的俄语值，确认控制台输出正常，排除字符串本身解析错误的问题。

2. 修复pre标签展示逻辑 #

直接将JSON.stringify的结果赋值给pre标签的textContent属性，不要使用innerHTML：

// 第三个参数2是为了格式化缩进，不需要可以去掉
const formattedJson = JSON.stringify(bigJSON, null, 2);
document.querySelector('pre').textContent = formattedJson;

3. 修复JSZip压缩包编码问题 #

JSZip写入字符串时默认可能存在编码识别偏差，需要手动将JSON字符串转为UTF-8字节数组后再写入压缩包。如果需要兼容Windows记事本打开不乱码，可以额外添加UTF-8 BOM头：

const zip = new JSZip();
// 初始化UTF-8编码器
const encoder = new TextEncoder();
// 不需要兼容Windows记事本可以删掉下面这行BOM头定义
const utf8Bom = new Uint8Array([0xEF, 0xBB, 0xBF]);

for (const key in bigJSON){
  const currentJSON = JSON.stringify(bigJSON[key], null, 2);
  const currentFileName = key + "-ru.json";
  // 转成UTF-8字节数组
  const contentBytes = encoder.encode(currentJSON);
  
  // 不需要BOM的话直接传入contentBytes即可，跳过拼接BOM的步骤
  const contentWithBom = new Uint8Array(utf8Bom.length + contentBytes.length);
  contentWithBom.set(utf8Bom, 0);
  contentWithBom.set(contentBytes, utf8Bom.length);
  
  zip.file(currentFileName, contentWithBom);
}

内容的提问来源于stack exchange，提问作者Axel