Bobril III本地化和格式化

分享于 

9分钟阅读

Web开发

  繁體 雙語

介绍

在本文中,我们将学习如何本地化应用程序或者将文本格式化为文化细节。 库 bobril-g11n 是为此目的创建的。

背景

Bobril全球化库由 Boris Letocha ( GMC软件技术中的软件架构师和开发者) 编写。

它受到 Format.js 启发,内部使用 Moment.js.

范例

开发本地化bobril应用程序的最佳方法是从 bobril-build github存储库中使用 simpleApp:

它包含预定义package.json 使用必要的依赖项和示例世界你好 带有路由和页定义的源代码,具有良好的起始点。 你可以使用bobril构建cli命令构建整个应用程序并在本地web服务器上运行它

bobril生成需要 node.js> = 6. *.* 和

要准备simpleApp然后由bobril生成在项目的root 中,向 命令行 键入以下命令:

npm i bobril-build -g
bb plugins -i bb-tslint-plugin
npm i
bb

现在,我们已经启动了一个简单的应用程序,我们可以继续实现应用程序逻辑。

将bobril-g11n添加到应用程序

停止 运行的bobril生成 并键入到 命令行:

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文件夹的root。

initGlobalization 函数返回一个 Promise 对象。 必须在该承诺的执行回调中调用 b.routes的应用程序初始化。

下一步是导入所有必要的函数,例如将以下行添加到 mainPage.ts file:

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

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

翻译

Bobril-globalization 软件包包含一个带有以下参数的t 函数: 邮件 用于输入文本/Pattern 以及定义 message Pattern 值的可选 params 对象。

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

在代码中 bobril-build 接受 t('some string') 所有的usings,并用 比如 t(125) 替换它,其中 125是本地化字符串的array 中的'一些字符串'常量的索引。 这里 array 放置在每个本地化文件中,并对应于生成的 en-US.js 中的array。

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

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

第一个命令创建一个新的翻译文件翻译/cs cz。json。 第二个命令将defaultly生成的en-US.js 中缺少的翻译添加到 cs-CZ.json 翻译定义中。 使用 b 参数的生成只运行一次,然后停止。 最后,最后一个命令运行应用程序的构建,并在代码中跟踪更改并输出到本地web服务器。 创建的json的内容可以是 e.g.:

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

要添加翻译,可以将它的修改为以下内容:

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

以 array 表示的本地化项的特定部分包括:

  • 消息- Hello World"
  • 翻译帮助(。t 函数的第三个可选参数) - t 函数中使用的空 =not
  • 消息内部参数的指示器- 0 = 无参数
  • 已经翻译的消息- 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!

序数

若要设置本地化序号,请使用 selectordinal Pattern:

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

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

复数

类似 复数 Pattern 用于定义本地化的复数:

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

选择

要根据输入 string 选择特定值,可以使用 select Pattern:

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

号码

我们可以使用 number Pattern 以特定格式的格式保存数字,或者定义自己的格式:

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

日期和时间

datetime 模式的工作方式相同,可以按以下方式使用:

t('{a, date, lll}', { a: new Date(2000, 0, 2) }); // Jan 2, 2000 12:00 AM - in ent('{a, date, custom, format:{DD MM}}', { a: new Date(2000, 0, 2) }); // 02 01 - in ent('{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

有关更多示例,请参见附加的sampleAppGlobalization

只是格式化

如果只想在没有翻译的情况下进行文本格式化,只需将 t 函数替换为 f 函数。 它将只处理特定区域性的格式设置。

历史记录

  • 2017-02-01 ( bobril-build@0.59.2.bobril@5.2.)
  • 2016-11-04修订版
  • 2016-08-03更新至 bobril-build@0.45 0
  • 1 已经更新到。10.0,并在交互模式下转换为
  • 1 根据生成改为 simpleApp
  • 2015-12-08年v0.7.1新bobril-g11n规则更新
  • 2015-11-21文章创建

for  form  LOC  格式  Local  格式化  
相关文章