js实现翻译语言

使用 JavaScript 实现语言翻译

浏览器原生 API（Translation API）

现代浏览器提供内置的翻译能力，可通过 translate 属性和 Intl API 实现简单翻译：

// 利用 translate 属性标记元素是否需要翻译
document.getElementById("content").translate = "yes";

// 使用 Intl.DisplayNames 获取语言名称翻译
const regionNames = new Intl.DisplayNames(['en'], { type: 'language' });
console.log(regionNames.of('fr')); // 输出 "French"

调用第三方翻译 API

主流云服务商提供翻译 API，需要注册获取 API key：

1. Google Cloud Translation
   安装客户端库：

   npm install @google-cloud/translate

   示例代码：

   

   const { TranslationServiceClient } = require('@google-cloud/translate');
   const client = new TranslationServiceClient();
   async function translateText(text, targetLanguage) {
   const [response] = await client.translateText({
    parent: 'projects/your-project-id/locations/global',
    contents: [text],
    mimeType: 'text/plain',
    targetLanguageCode: targetLanguage,
   });
   return response.translations[0].translatedText;
   }

2. Microsoft Azure Translator
   安装 SDK：

   npm install @azure/ai-text-analytics

   示例代码：

   

   const { TextAnalysisClient, AzureKeyCredential } = require("@azure/ai-text-analytics");
   const client = new TextAnalysisClient(
   "https://your-endpoint.cognitiveservices.azure.com/",
   new AzureKeyCredential("your-api-key")
   );
   async function translate(text, toLang) {
   const [result] = await client.analyze("Translation", [text], {
    targetLanguage: toLang
   });
   return result.translations[0].text;
   }

本地化库方案

对于不需要联网的场景，可使用以下库：

1. i18next
   结合语言资源文件实现：

   import i18n from 'i18next';
   i18n.init({
   resources: {
    en: { translation: { "hello": "Hello" }},
    fr: { translation: { "hello": "Bonjour" }}
   },
   lng: 'fr'
   });
   console.log(i18n.t('hello')); // 输出 "Bonjour"

2. Franc + Translate
   语言检测+翻译组合：

   import franc from 'franc';
   import translate from 'translate';
   translate.engine = 'libre'; // 使用 LibreTranslate
   const detectedLang = franc('Bonjour le monde');
   const translated = await translate('Hello world', { to: detectedLang });

注意事项

• 云服务 API 有调用次数限制和费用产生
• 浏览器原生 API 依赖用户浏览器设置
• 本地化方案需要预置翻译词典
• 敏感内容需自行处理隐私合规问题

性能优化建议

• 对静态内容使用预编译翻译
• 动态内容实现缓存机制
• 批量请求代替多次单条调用
• 使用 Web Workers 处理大量文本