概述
在前端开发中，常常需要进行一些字符串的国际化处理。而 Translana 可以辅助我们实现这一功能。Translana 是一个基于 Google Translate API 的 npm 包，可以快速、精准地将字符串进行翻译。本文将介绍如何在前端项目中使用 Translana。
安装
在使用 Translana 前，需要先安装该包。可以使用 npm 进行安装：
--- ------- ---------
用法
Translana 的使用十分简单。可以使用以下代码进行翻译：
------ - --------- - ---- ------------ ----- ---- - ------ -------- ----- ---- - -------- ----- -------------- - ----- --------------- ------ ----------------------------
在上面的代码中，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 进行过滤：
------ - ---------- --------- - ---- ------------ ----- -------- - --------- ------------------- ----- ---- - -------- ----- ---- - -------------------- ----- -------------- - ----- --------------- ------ ----------------------------
在上面的代码中，如果不使用 stripHtml 进行过滤，翻译后的结果可能出现问题（例如 Hello <i>世界</i>！）。而使用 stripHtml 后，只会翻译文本部分。
保留关键字
有时候，我们可能需要在翻译后的文本中保留一些特定的关键字，例如品牌名、术语等。可以使用 replace 进行替换。
------ - --------- - ---- ------------ ----- ---- - ------ -------- ----- ---- - -------- ----- ------------ - --------------------- ----------- ----- -------------- - ----- ----------------------- ------ ----- ------------- - --------------------------------- ---------------- ---------------------------
在上面的代码中，我们首先将要保留的关键字 world 用占位符 |world| 进行替换。接着，将替换后的文本传入 translate 进行翻译。最后，使用 replace 将翻译后的文本中的占位符替换回原关键字，并对关键字进行格式化。
结束语
Translana 是一款轻巧易用的 npm 包，可以轻松地完成字符串的翻译工作。在开发中，如果需要进行字符串的国际化处理，不妨可以考虑使用 Translana。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60057c3b81e8991b448ebc45