65.9K
CodeProject 正在变化。 阅读更多。
Home

Bobril - III - 本地化和格式化

Tomáš Růt
starIconstarIconstarIconstarIconstarIcon

5.00/5 (5投票s)

2015年11月22日

CPOL

4分钟阅读

viewsIcon

29152

downloadIcon

120

对 bobril-g11n 库的本地化和格式化功能的解释

引言

在本文中，我们将学习如何本地化我们的应用程序或根据文化特定信息格式化文本。为此，我们创建了库bobril-g11n。

背景

Bobril 全球化库由 Boris Letocha（GMC Software Technology 的软件架构师和开发人员）编写。

它受到 Format.js 的启发，并内部使用 Moment.js。

示例

首先，我们需要在计算机上准备好bobril-build。请按照第一篇文章中的步骤执行bobril-build安装。

现在您可以再次启动一个新项目，或者使用来自bobril-build github 仓库的预定义骨架simpleApp。

接下来的示例将使用它。要获取最终代码，请下载完整示例。

将 bobril-g11n 添加到应用程序

在命令行输入

npm i bobril-g11n --save
bb

现在修改app.ts文件，使其看起来像这样

import * as b from 'bobril';
import { mainPage } from './mainPage';
import { initGlobalization } from 'bobril-g11n';

initGlobalization({ defaultLocale: 'en-US' }).then(() => {
    b.routes(
        b.route({ handler: mainPage })
    );
});

此代码将导入并调用initGlobalization 函数。其参数IG11NConfig 定义了默认区域设置以及可选的用于获取本地化文件路径的函数。Bobril-build配置为将默认本地化文件en-US.js直接生成到dist文件夹的根目录。

initGlobalization函数返回一个Promise对象。应用程序的初始化（通过b.routes）必须在该 Promise 的 fulfillment 回调中调用。

下一步是导入所有必需的函数，例如，通过将以下行添加到mainPage.ts文件中

import { t, f, getLocale, setLocale } from 'bobril-g11n';

现在，我们已准备好尝试这些示例。您可以删除mainPage.ts文件中页面组件的render函数中的me.children内容，并使用它来尝试这些示例。

转换

Bobril-globalization包包含一个t函数，其参数如下message用于输入文本/模式，以及可选的params对象，用于定义message 模式的值。

t('Hello World!'); // Hello World!

Bobril-build会获取代码中所有对t('some string')的使用，并将其替换为例如t(125)，其中125是“some string”常量在本地化字符串数组中的索引。此数组放置在每个本地化文件中，并对应于生成的en-US.js.中的数组。

要添加新的本地化定义，只需键入命令

bb t -a cs-CZ
bb b -u 1
bb

第一个命令创建一个新的翻译文件translations/cs-CZ.json。第二个命令将默认生成的en-US.js中缺失的翻译添加到cs-CZ.json翻译定义中。带b参数的构建仅运行一次然后停止。最后，最后一个命令运行应用程序的构建，跟踪代码中的更改，并将输出发送到本地 Web 服务器。创建的json的内容可以是，例如

[
    "cs-CZ",
    [
        "My name is {a}!",
        null,
        1
    ]
]

要添加翻译，可以修改为以下内容

[
    "cs-CZ",
    [
        "My name is {a}!",
        null,
        1,
        "Jmenuji se {a}!"
    ]
]

本地化项中由数组表示的特定部分是

  1. 消息 - "Hello World"
  2. 翻译帮助（t函数的第三个可选参数） - null = 在t 函数中未使用
  3. 消息中参数的指示符 - 0 = 无参数
  4. 翻译后的消息 - "Ahoj světe"

第 1-3 部分构成了翻译键。您可以在附加的示例中看到 json 定义示例。

如果更改翻译定义文件，则必须停止并重新启动bobril-build（bb 命令），或者进行其他代码更改以重新构建应用程序。

要查看所有可能的构建选项，请为bb命令使用-h参数。

要更改区域设置，我们可以使用以下代码

setLocale('cs-CZ');

此代码将更改区域设置并使用特定翻译呈现页面。要获取当前区域设置，我们可以使用getLocale函数。

基础

我们可以简单地添加占位符来在文本模式中使用变量

t('My name is {a}!', { a: 'Tomas' }); // My name is Tomas!

Ordinal

要设置本地化的序数，请使用selectordinal 模式

t('you are in {floor, selectordinal, 
=0{ground} one{#st} two{#nd} few{#rd} other{#th}} floor', { floor: 2 });
// you are on the 2nd floor

#字符被替换为params 对象中的floor属性。

复数

类似的复数模式用于定义本地化的复数

t('here {floor, plural, =0{is no floor} =1{is # floor} other{are # floors}}', { floor: 2 });
// here are 2 floors

Select

要根据某些输入的string选择特定值，我们可以使用select 模式

t('famous {gender, select, female {woman} male {man} other {person}}', { gender: 'female' });
// famous woman

数字

我们可以使用number模式来保持数字的文化特定格式或定义自己的格式

t('{arg, number}', { arg: 1.234 }); // 1.234 in en
t('{arg, number, custom, format:{0.0000}}', { arg: 1.234 }); // 1.2340 - in en

日期和时间

date 和time 模式的工作方式相同，并可用于以下方式

t('{a, date, lll}', { a: new Date(2000, 0, 2) }); // Jan 2, 2000 12:00 AM - in en
t('{a, date, custom, format:{DD MM}}', { a: new Date(2000, 0, 2) }); // 02 01 - in en
t('{a, date, custom, format:{{myformat}} }', 
{ a: new Date(2000, 0, 2), myformat: 'ddd' }); // Sun - in en

可以在Moment.js 文档中找到特定的格式定义。

也可以定义为日历格式

t('{a, time, calendar}', { a: Date.now() + 
    24 * 60 * 60 * 1000 }); // Tomorrow at 4:27 PM - in en

或作为相对于现在的时间

t('{a, time, relative}', { a: Date.now() - 100000 }); // 2 minutes ago - in en

有关更多示例，请下载完整示例。

仅格式化

如果您只想对文本进行格式化而不进行翻译，只需将t函数替换为f函数即可。它只会处理文化特定的格式。

历史

  • 2017-07-30：修订（bobril-build@0.71.1, bobril@7.3.2, TS 2.4.2）
  • 2017-02-01：修订（bobril-build@0.59.2, bobril@5.2.1）
  • 2016-11-04：修订
  • 2016-08-03：更新至 bobril-build@0.45.0
  • 2015-12-16：更新至 bobril-build@0.10.0，支持交互模式下的翻译
  • 2015-12-16：更改为基于 bobril-build 的 simpleApp
  • 2015-12-08：根据 v0.7.1 中新的 bobril-g11n 规则更新
  • 2015-11-21：文章创建
© . All rights reserved.