摘要:在写一个的过程中难免会遇到要做国际化的时候也就是需要根据不同的地区展示不同的文案对于简单的文本直接用一个或者或者一个变量就能搞定但是有时候需要在一句话中加入变量就比较麻烦或者说比较恶心了比如这样的情况有个人喜欢了你应运而生其作用是将模板
在写一个APP的过程中, 难免会遇到要做国际化的时候. 也就是需要根据不同的地区, 展示不同的文案. 对于简单的文本, 直接用一个xml或者json或者一个变量就能搞定, 但是有时候需要在一句话中加入变量, 就比较麻烦或者说比较恶心了. 比如这样的情况:
cn: 有xx个人喜欢了你. en: xx People liked you.
i18n-json-compiler应运而生, 其作用是将json模板编译成TypeScript(或者JavaScript)函数或者字符串.
比如对以下json:
[ { "cn": "你好", "en": "Hello" }, { "cn": "{n}个好友", "en": "{n} friends" }, ]
可以直接编译出ts文件, 内容大致如下:
export const cn = { Hello: "你好", n_friends: (n: any) => n + "个好友", } export const en = { Hello: "Hello", n_friends: (n: any) => n + " friends", }
在代码中直接调用相应的属性或函数即可.
安装yarn add i18n-json-compiler # 或者使用npm/cnpm npm i -S i18n-json-compiler使用
在命令行中, 执行./node_modules/.bin/i18n, 参数如下:
i18n [options] - Parse i18n json files to typescript files. Options: -i, --input-files The json files to parse [string] [required] -o, --output-dir The directory to emit output [string] [required] -h, --help Show help [boolean] -v, --version Show version number [boolean] --default-lang [string] [default: "cn"]JSON文档的格式
i18n命令接受参数-i指定输入文件列表(glob), 比如./strings/*.json, 文件格式为json, 内容为一个数组. 每个数组元素为一组需要编译的字符串. key为语言, value为值. 值中被{}包起来的地方会被转换为函数参数, 其格式为{name:type:default}, 其中:
name是必需的, 可以是字符串或数字
type为数据类型, 可以是int, double, string, boolean, any, 默认为any, 即接受任意参数
default为参数默认值
比如:
[ { "cn": "{n:int:1}个人喜欢了你", "en": "{n}people liked you" } ]
得出的结果为:
const n_people_liked_you = (n: int = 1) => n + "个人喜欢了你"输出格式
i18n接受参数-o指定输出目录, 输入目录中, 包括一个index.ts文件, 以及若干语言文件夹, 其中index.ts为所用到的文件, 其导出一个变量strings, 结构如下:
export interface I18n例子{ // 设置语言 set(lang: string, defaultLang?: L): void; // 获取语言下的字符串对象 get(lang: string, defaultLang?: L): T; // 当前语言 lang: L; // 当前语言的字符串结构 value: T; }
参考https://github.com/acrazing/i..., 其中input为输入目录, output为输出目录. 在代码中, 只需要:
import { strings } from "./output/index.ts" console.log(strings.value.world.$0_people_liked_you(1))TODO
编译成js
不同语言参数位置不同
指定名称key
更多内容, 请稳步 https://github.com/acrazing/i...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/92828.html
摘要:的网站仍然使用有漏洞库上周发布了开源社区安全现状报告,发现随着开源社区的日渐活跃,开源代码中包含的安全漏洞以及影响的范围也在不断扩大。与应用安全是流行的服务端框架,本文即是介绍如何使用以及其他的框架来增强应用的安全性。 showImg(https://segmentfault.com/img/remote/1460000012181337?w=1240&h=826); 前端每周清单专注...
摘要:本国际化方案仅针对技术栈,且不会涉及服务端国际化内容。引入多语言环境的数据虽然我只用到了文本翻译的功能,以为就不需要加载这些数据,但后来发现这是必须的步骤。 前言 最近新接了一个项目,从0开始做,需要做多语言的国际化,今天搞了一下,基本达到了想要的效果, 在这里简单分享下: showImg(https://segmentfault.com/img/bVbuiJB); 背景国际化方案国际...
摘要:本国际化方案仅针对技术栈,且不会涉及服务端国际化内容。引入多语言环境的数据虽然我只用到了文本翻译的功能,以为就不需要加载这些数据,但后来发现这是必须的步骤。 前言 最近新接了一个项目,从0开始做,需要做多语言的国际化,今天搞了一下,基本达到了想要的效果, 在这里简单分享下: showImg(https://segmentfault.com/img/bVbuiJB); 背景国际化方案国际...
阅读 2789·2021-11-18 10:02
阅读 3657·2021-11-15 17:59
阅读 2281·2021-09-06 15:00
阅读 3326·2019-08-29 16:58
阅读 1039·2019-08-26 10:34
阅读 1565·2019-08-26 10:15
阅读 1270·2019-08-26 10:11
阅读 2674·2019-08-23 18:33