当前位置：首页 > JavaScript

js实现翻译语言

2026-03-01 14:22:43JavaScript

使用 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：

Google Cloud Translation
安装客户端库：

npm install @google-cloud/translate

示例代码：

js实现翻译语言

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;
}

Microsoft Azure Translator
安装 SDK：

npm install @azure/ai-text-analytics

示例代码：

js实现翻译语言

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;
}

本地化库方案

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

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

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

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 });