适用于HTML 5应用程序的JavaScript i18n库(第2部分)


2019-03-26 09:21:21

软件翻译

 
适用于HTML 5应用程序的JavaScript i18n库(第2部分)
软件翻译
这是描述一种方法的第2部分,该方法可用于为Web应用程序(尤其是客户端密集型Web应用程序)提供国际化和本地化支持。本系列的最初目的是从现代网络应用程序的角度来看待主题,但是没有理由不能将其应用于传统(非应用程序)和移动网站。
 
翻译软件可能需要大量工作,其过程需要提出几个不同的问题,例如:
 
如何在我的应用程序中支持多种语言?
我需要哪些更改才能支持多种语言?
我应该从什么语言开始?
本博客文章讨论了一些基本概念,并提供了一些实践中的概念示例。虽然我无意覆盖每一个细节,但我希望它能让您了解所涉及的内容,并让您开始自己的工作。
 
HTML5的国际化
 
一些基本术语
在创建多语言应用程序之前,有几个基本的事情需要理解。让我们就一些基本定义达成一致,因为这些术语经常互换使用。
 
国际化(i18n) - 启用应用程序(例如网站后端)以处理不同语言,字符集,货币,提交表单数据,搜索功能等的过程。
本地化(L10n) - 涉及将应用程序(通常是前端)翻译成不同的语言,确保所有内容(文本和图形)以准确和文化正确的方式进行翻译。它还确保选择适当的目标受众区域,例如巴西葡萄牙语与葡萄牙语大陆语言形成对比。
全球化 - 国际化与本土化的结合
语言 - 例如,英语(ISO代码“en”),西班牙语(ISO代码“es”)等。
地区 - 加拿大。请注意法国的法语与加拿大的法语不同,例如“fr-FR”与“fr-CA”
使用简单的i18n JavaScript库 - 继续
资源文件命名法
理想情况下,在Web应用程序的UI中呈现静态消息,动态消息,对话框等时,可以使用生成的基于JSON的资源文件。
 
请考虑以下我们在本系列的第1部分中介绍的基于JSON的资源文件的示例:
 
英文版(strings.en-US.json)
 
西班牙语版本(strings.es-AR.json)
 
{
    "btnSubmit__value" : "Hello English",
    "btnSubmit__title" : "Hello English",
    "registrationForm" : 
        {
            "firstName" : "First Name",
            "lastName"  :  "Last Name",
            "register__value": "Register",
            "register_title" : "Click to Register" 
        },
    "loggedIn":
        {
            "welcomeMessage" : "Welcome %s %s!" 
        } 
}
 
{
    "btnSubmit__value" : "Hola Inglés",
    "btnSubmit__title" : "Hola Inglés",
    "registrationForm" :
        {
            "firstName" : "Nombre",
            "lastName"  :  "Apellido",
            "register__value": "Registrarse",
            "register_title" : "Haga clic para registrarse"
        },
    "loggedIn":
        {
            "welcomeMessage" : "Bienvenido %s %s!" 
        } 
}
下表描述了资源字符串的类型以及它们在i18n库中的使用方式:
 
条目
 
资源字符串类型
 
用法
 
btnSubmit__value
 
属性
 
 i18n._("btnSubmit__value")
报名表格
 
 
 None. Exists for grouping related items.
名字
 
 
 i18n._("registrationForm.firstName")
welcomeMessage
 
格式化字符串
 
 var name = $('#txtLastName').val() + ', ' + $('#firstName').val();
 i18n._("loggedIn.welcomeMessage", name);
属性资源类型
在您的Web应用程序用户界面(UI)中,有许多组件将包含文本(需要翻译),一旦加载保持不变(即静态)。属性资源类型提供了一种在应用程序启动时帮助加载已翻译文本项(例如按钮文本,标签,列标题等)的方法。
 
从客户端标记,您只需添加属性“data-res”,并将相应的资源条目作为键,库将自动加载翻译后的文本作为DOM元素的内部html。
 
但是,如果资源键条目遵循以下命名约定:
 
 <resource-entry-name>__<dom-attribute-name>
库将把翻译后的文本加载到属性名称中,而不是使用默认的“innerHTML”属性。
 
组资源类型
此类条目用于将属于类似上下文的项目组合在一起。这允许我们避免发生类似的“关键”引用的冲突。例如,您的Web应用程序可能对给定字符串有多种用法(例如key->“all”)。虽然在英语中,这个键只有一个单词,但在另一种语言中,根据使用该词的上下文,可能有多个选项可用(例如西班牙语“todos”,“todas”)。
 
正如男性或女性是人类和大多数动物的固有特征一样,性别也是某些语言中名词的固有特征。根据使用单词的上下文,使用男性形式与女性形式可能在语言上更准确,反之亦然。
 
因此,我们可以使用Group资源类型来创建上下文,并在每个不同的上下文中重用相同的键。这样,我们可以获得应用程序支持的每种不同语言的相应翻译。
 
字符串/格式化字符串资源类型
此JavaScript i18n库根据用户的语言首选项自动加载本地化包(即包)。在您开始渲染多种语言版本之前,您必须使用“字典”初始化库(基本上是映射键到其翻译的属性列表)。
 
初始化过程完成后,您可以使用其键名“查找”字符串资源,如下所示:
 
 var fName = i18n._("registrationForm.firstName"); var lName = i18n._("registrationForm.lastName");
字符串资源本质上是静态的,并且将始终产生与当前活动语言相同的结果。
 
另一方面,Formatted String资源是动态的,允许您在运行时包含参数,这实际上允许您创建自定义字符串值。格式化字符串资源与常规字符串资源一样使用,除了在方法调用中包含参数。见下面的例子:
 
 var fullName = i18n._("loggedIn.welcomeMessage", fName, lName);
此版本使用三个指定对象的字符串表示替换目标指定字符串中的任何格式项。目标特定字符串由查找键“loggedIn.welcomeMessage”的结果表示。此键生成结果“Welcome%s%s!”。“%s”表示将由参数“fName”和“lName”的值替换的格式项。