i18n(国际化)代码简单实现

这篇具有很好参考价值的文章主要介绍了i18n(国际化)代码简单实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

i18n(国际化)是什么?

各个国家都有各个国家的语言,如果网站需要让全世界的人使用,那就需要进行国际化功能开发

国际化我知道的一共有两种,其中一种是不同国家不同网站,也就是说页面风格都不一样。另外一种是网站都是一样的,只是里面的文字不同罢了。第一种没啥好说了,毕竟都是两个网站了,我们今天来说的是第二种

第二种国际化程度有所不同,我认为最好的是页面上看到的东西都是该语言的,比如静态页面+弹窗,我认为可以有两种实现思路,其中一种是完全由后端控制,前端只需要接收后端的返回值进行展示即可。另外一种是前端控制前端的静态页面展示,弹窗文字由后端进行控制。我认为最好的控制方式是由后端统一控制,即使在新增语言也不会改变很多前端代码,只需要添加一个不同语言的配置文件即可

我们以IDEA官网为例来进一步说明,先来看中文的IDEA官网:

i18n(国际化)代码简单实现
在右上角选择语言为English,然后就可以看到IDEA英文官网了,这就是实现了国际化,效果如下:

i18n(国际化)代码简单实现

对比上面两种语言,其实IDEA页面风格没有发生变化,只是将上面显示的文字进行了更改

如何实现

针对每一门语言,我们可以搞一个配置文件,配置文件中写着key和value,里面放置着静态页面上需要展示的内容以及消息弹窗的内容,也就是说展示给用户的所有信息都在这个配置文件中,我们只需要去配置文件中取出来就可以了,听起来很像是一个常量类一样哈

然后每一个配置文件中的key都是相同的,只是value不同,下面以繁体中文、简体中文、英文举例说明如下:

繁体中文配置文件:

i18n(国际化)代码简单实现

简体中文配置文件:

i18n(国际化)代码简单实现

英文配置文件:

i18n(国际化)代码简单实现

那需要做的事情其实就是从这些配置文件中取出结果进行展示了,对于用户的不同选择,那就给用户返回不同的配置文件结果就可以了,具体写法大家可以参考xxl-job的com.xxl.job.admin.core.util.I18nUtil文章来源地址https://www.toymoban.com/news/detail-471969.html

到了这里,关于i18n(国际化)代码简单实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • Spring之国际化:i18n

    Spring之国际化:i18n

    学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需写作干货注入能量… 热爱写作,愿意让自己成为更好

    2024年02月03日
    浏览(13)
  • Vue - i18n 国际化的使用

    参考网址: 使用: https://huaweicloud.csdn.net/638f133edacf622b8df8eb26.html?spm=1001.2101.3001.6650.1utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-1-125181861-blog-123845480.235%5Ev38%5Epc_relevant_anti_t3_basedepth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Ea

    2024年02月11日
    浏览(12)
  • spring6-国际化:i18n | 数据校验:Validation

    spring6-国际化:i18n | 数据校验:Validation

    1.1、i18n概述 国际化也称作i18n,其来源是英文单词 internationalization的首末字符i和n,18为中间的字符数。由于软件发行可能面向多个国家,对于不同国家的用户,软件显示不同语言的过程就是国际化。通常来讲,软件中的国际化是通过配置文件来实现的,假设要支撑两种语言,

    2024年02月08日
    浏览(15)
  • 微信小程序-切换语言(国际化i18n)的方法封装

    微信小程序-切换语言(国际化i18n)的方法封装

    最近做的一个小程序的项目, 涉及到了 多语言的切换 , 就想到了之前vue用的多语言插件i18n, 就尝试着在微信开放社区搜了一下, 没有具体的实现, 但是提供了大致的实现思路, 如下: 又结合了很多大佬的分享经验, 试着去封装了一个微信的i18n方法 首先, 我们需要明确一下需要实

    2024年02月05日
    浏览(10)
  • 如何在Vue3中配置国际化语言i18n

    1. 安装 vue-i18n 2. 创建一个i8n的配置文件 如:i18nConfig.js 3. 新建语言文件 zh-CN.js 和 en-US.js zh-CN.js 文件 en-US.js 文件 CONFIG.js 文件 4. 在 main.js 里面全局配置 通过上面四步即可配置完毕 下面说一下如何使用,分三种情况 在 .vue 组件中的 template 使用 在 .vue 组件中的 script 中使用 在

    2024年02月09日
    浏览(16)
  • SpringBoot 国际化(i18n) 支持中文键(KEY)的解决方法

    前言: 项目中要解决“中英文”切换的问题,想法是输入key例如“你好”,然后去国际化文件找对应的中文key,然后进行输出,如果没有定义这个key,则输出“你好”。但是中文key在properties文件中会已unicode编码输出,使用中文key时获取不到对应的value。 解决方法: 重构$.

    2024年02月16日
    浏览(13)
  • Vue3中,国际化插件vue-i18n使用记录,配合VSCode自动化翻译插件i18n Ally

    Vue3中,国际化插件vue-i18n使用记录,配合VSCode自动化翻译插件i18n Ally

    说明文档: vue-i18n 版本说明: vue: 3.0.0+ vue-i18n: 9.x版 src 目录下新建目录 lang ,存放 i18n 的配置。 新建目录名称: lang (语言)、 locales (语系设定)、 i18n ,这些名称都可被VSCode图标插件( vscode-icons )检测到并美化。 lang 目录下,新建 index.js 文件,引入 vue-i18n 。 语言的配置信

    2024年02月12日
    浏览(13)
  • 用i18next使你的应用国际化-React

    用i18next使你的应用国际化-React

    ref: https://www.i18next.com/ i18next是一个用JavaScript编写的国际化框架。 i18next为您提供了一个完整的解决方案,本地化您的产品从web端到移动端和桌面端。 在react项目中安 i18next 依赖: i18next react-i18next i18next-browser-languagedetector,用于检测用户语言 创建 i18n.js 文件: 在 index.js 中导

    2024年02月15日
    浏览(12)
  • React18.x + i18next + antd 国际化正确使用姿势及避坑指南

    React18.x + i18next + antd 国际化正确使用姿势及避坑指南

    如果你使用这个教程还不能够解决你的问题的话,直接私信我,免费一对一给你解决。 具体的创建方法大家参考vite官方文档,大概的操作如下,如果需要更详细的,大家去自行搜索即可 因为我这里使用的是ts版本,所以,你自己看着办吧。 其中 i18next-browser-languagedetector i1

    2024年02月05日
    浏览(14)
  • Vue实现多语言(i18n)

    Vue实现多语言(i18n)

    安装i18n插件。 在src目录下,创建一个【language】文件夹,并创建两个语言包js文件。 中文语言包:【zh.js】 英文语言包:【en.js】 完善en.js文件和zh.js文件。两个文件的结构要相同。如果用Element-UI,这里导入。 en.js zh.js 在main.js引入插件。 在页面上使用和切换。 使用: 切换

    2024年02月15日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包