npm 包 translana 使用教程

概述

在前端开发中，常常需要进行一些字符串的国际化处理。而 Translana 可以辅助我们实现这一功能。Translana 是一个基于 Google Translate API 的 npm 包，可以快速、精准地将字符串进行翻译。本文将介绍如何在前端项目中使用 Translana。

安装

在使用 Translana 前，需要先安装该包。可以使用 npm 进行安装：

npm install translana

用法

Translana 的使用十分简单。可以使用以下代码进行翻译：

import { translate } from 'translana';
const text = 'Hello world!';
const lang = 'zh-CN';
const translatedText = await translate(text, lang);
console.log(translatedText);

在上面的代码中，text 是要翻译的文本，lang 是目标语言代码，translatedText 是翻译后的文本，可以通过 console.log 进行输出。

目前，Translana 支持的语言包括：

• 英语（en）
• 简体中文（zh-CN）
• 繁体中文（zh-TW）
• 日语（ja）
• 韩语（ko）
• 法语（fr）
• 德语（de）
• 西班牙语（es）
• 俄语（ru）
• 葡萄牙语（pt）
• 意大利语（it）
• 希腊语（el）
• 荷兰语（nl）
• 波兰语（pl）
• 瑞典语（sv）

使用时，只需将目标语言代码传入即可。

高级用法

在实际开发中，我们可能需要对翻译的文本进行进一步的处理。例如，我们可能需要对特定的关键字进行保留，或者对 HTML 标签进行过滤等操作。此时，Translana 提供了一些高级用法。

过滤 HTML

如果在翻译的文本中存在 HTML 标签，我们可能希望在翻译时将它们过滤掉，以免影响页面的布局。可以使用 stripHtml 进行过滤：

import { translate, stripHtml } from 'translana';
const htmlText = '<p>Hello <i>world</i>!</p>';
const lang = 'zh-CN';
const text = stripHtml(htmlText);
const translatedText = await translate(text, lang);
console.log(translatedText);

在上面的代码中，如果不使用 stripHtml 进行过滤，翻译后的结果可能出现问题（例如 Hello <i>世界</i>！）。而使用 stripHtml 后，只会翻译文本部分。

保留关键字

有时候，我们可能需要在翻译后的文本中保留一些特定的关键字，例如品牌名、术语等。可以使用 replace 进行替换。

import { translate } from 'translana';
const text = 'Hello world!';
const lang = 'zh-CN';
const replacedText = text.replace('world', '|world|');
const translatedText = await translate(replacedText, lang);
const processedText = translatedText.replace('|world|', '<b>world</b>');
console.log(processedText);

在上面的代码中，我们首先将要保留的关键字 world 用占位符 |world| 进行替换。接着，将替换后的文本传入 translate 进行翻译。最后，使用 replace 将翻译后的文本中的占位符替换回原关键字，并对关键字进行格式化。

结束语

Translana 是一款轻巧易用的 npm 包，可以轻松地完成字符串的翻译工作。在开发中，如果需要进行字符串的国际化处理，不妨可以考虑使用 Translana。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c3b81e8991b448ebc45