- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端技术地图
前端国际化：语言包篇
又开了个新坑，来讲讲前端国际化。 开篇之前，读者需要区分好国际化(i18n - internationalization)和本地化(l10n - localization) ， 它们是相互关联但又不同的概念： 国际化（i18n）：这是一个设计和开发过程 ： 为全球设计，国际化与本地化探索：快速入门 为全球设计，国际化与本地化探索：国际化设计 为全球设计，国际化与本地化探索：本地化设计 实际上笔者也不是特别专业，这系列文章仅是我的一些技术实践总结。 作为开篇，我们先聊一聊一些比较基础的话题：前端语言包的管理。 对于语言包的管理，我们大概率会遇到以下问题： 语言包应该放在哪个目录？ 全局使用一个语言包，还是分模块？ 如果是分模块的话？ 那么如何提高前端国际化的开发体验呢？
2.7K30编辑于 2023-10-23 - 来自专栏前端技术地图
前端国际化：懒人必备的自动翻译
我们可以将国际化翻译的工作流拆成以下三个阶段： 开发阶段：前端开发需要提取和维护源语言包(Source Language)。比如将页面中的文案提取到 zh 语言包中。 国际化规范：许多国际化和本地化的标准和规范，如i18n，都是基于英语的，这意味着从英语翻译到其他语言的过程可以更好地遵循这些规范。 可能会涉及多团队、多角色协同… 这时候，可以选择市面上一些更专业的工具或者 SaaS 服务， 比如： ⭐️ Lokalise → i18n-ally 插件目前就是他们在维护 Crowdin Gridly … 国际化 ，笔者更建议将两者结合起来，DX++ 总结 本文简单介绍了多语言自动翻译的工作流，这个可盐可甜: 对于中小型项目，使用 i18n-ally 这个神器就可以满足基本需求，它给我们带来了很多便利的功能，让前端国际化的开发体验得到的指数级的提升
2.4K40编辑于 2023-10-23 - 来自专栏Tz一号
jqueryvuereact前端多语言国际化翻译方案指南
❝ 本文章共3470字，预计阅读时间5-10分钟。 ❞ 国际化-前言 每个开发者能希望编写的程序可以让全世界的用户使用，它要求从产品中抽离所有地域语言，国家/地区和文化相关的元素。 国际化-范围 国际化与本地化工作的焦点包括但不限于如下： 语言 不同国家的语言; 文字书写方向；(比如德语是从左到右，而波斯语、希伯来语和阿拉伯语是由右到左。) 「是否需要花时间成本来做到前端国际化，完全取决分析自身团队的需求。」 github.com/Tzlibai/Demo/tree/master/i18n/more 语言包配置文件 将所有的「语言资源放在独立的文件夹下」，以每个字段「唯一标识」，去找到不同语言相对应的字段，以显示来完成前端国际化 - w3c jquery.i18n.properties前端国际化 结尾 好了，以上就是本篇全部文章内容啦。
3.5K20发布于 2021-09-08 - 来自专栏xiaoxi666的专栏
立即执行函数在前端国际化方案中的应用
说起国际化，开发过跨区域网页的小伙伴应该都遇到过。我们的网页需要配置多套语言，方便用户进行切换。 本文就以 React 为例，介绍其中一种实现方案，并学习一下其中的知识点。 一种国际化方案 方案是这样的： 为多套语言创建对应的 object，并 export 出去 通过 js 立即执行函数，加载选定语言 js 文件中的 object，并 export 出去 项目中引入第 在本文的国际化例子中，我们在方法体中 return 了语言包 object，并不关心函数的返回值，所以可以随意使用任意写法： 那么问题来了，立即执行函数有啥用武之地？ 继续用国际化的例子说明，我们其实把 cookie 封闭在了 lang/index.js 文件中，外部文件是无法读取到这个 LocaleCode 这个私有变量的（其实也根本不关心），这就是所谓的封装带来的安全性 最后，本文部分内容参考了文章：https://www.jianshu.com/p/b10b6e93ddec
60120编辑于 2023-03-16 - 来自专栏青年码农
Ant-design-vue+vue-i18n实现前端国际化
项目基于Vue-cli3.x进行开发，使用了ant-design-vue框架，然后需要做国际化。 此时做国际化需要考虑两方面的国际化，一是ant-design-vue内部组件的国际化，二是国际化我们的业务显示，业务显示我们选用vue-i18n进行国际化。 $on(),这个是组件传值的一种方式，需要在main.js中配置， moment.locale("cn");这个是ant-design-vue内部组件的国际化切换方法。 i18n.locale = localStorage.lang }, src下新建languages文件夹，下面分模块 页面切换多语言 这样就完成了Ant-design-vue + vue-i18n实现前端国际化
4.9K1813发布于 2020-10-13 - 来自专栏云前端
jQuery.i18n.properties 实现 Web 前端的国际化
1、什么是国际化 国际化英文单词为：Internationalization，又称 i18n，“i”为单词的第一个字母，“18”为“i”和“n”之间单词的个数，而“n”代表这个单词的最后一个字母。 2、jQuery.i18n.properties jQuery.i18n.properties 是一款轻量级的 jQuery 国际化插件。 与 Java 里的资源文件类似，jQuery.i18n.properties 采用 .properties 文件对 JavaScript 进行国际化。 3、实现原理 利用资源文件实现国际化是一种比较流行的方式。
5.1K10发布于 2020-06-15 - 来自专栏夏天的前端笔记
每天10个前端小知识 【Day 10】
前端面试基础知识题 1. es5 中的类和es6中的class有什么区别？ 在es5中主要是通过构造函数方式和原型方式来定义一个类，在es6中我们可以通过class来定义类。 什么是“前端路由”？什么时候适合使用“前端路由”？“前端路由”有哪些优点和缺点？ 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。 在单页面应用，大部分页面结构不变，只改变部分内容的使用 优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户 缺点：单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置 实现方式 前端路由一共有两种实现方式 10. Promise.all 和 Promise.allSettled 有什么区别？
47510编辑于 2024-01-18 - 来自专栏前端大全
前端国际化完整解决方案——多语言应用开发
前端国际化是全球化应用的关键要素，通过完善的i18n解决方案，可以让应用轻松支持多语言，提升用户体验和市场覆盖面。 介绍 随着全球数字化进程的加速，构建支持多语言的国际化应用已成为现代前端开发的必备技能。 前端国际化（Internationalization，简称i18n）不仅仅是简单的文字翻译，更涉及文化适应、布局调整、日期时间格式、数字格式等多个方面。 本文将深入探讨前端国际化的完整解决方案，涵盖从基础概念到高级实践的全方位内容。 国际化基础概念 什么是国际化和本地化 国际化（i18n）是使应用程序能够适应不同语言和地区的过程，而本地化（l10n）是针对特定地区进行实际的翻译和适配。
34810编辑于 2026-03-10 - 来自专栏达达前端
前端技术前沿10
允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
1.9K30发布于 2019-07-03 - 来自专栏编程技术分享
前端国际化辅助工具——自动替换中文并翻译
i18n-replace 是一个能够自动替换中文并支持自动翻译的前端国际化辅助工具。 module.exports = { delay: 1500, // 自动翻译延时，必须大于 1000 ms，否则调用百度翻译 API 会失败 mapFile: '国际化资源管理.xlsx 例如 vue-i18n 国际化工具使用的是 $t，而 react-i18next 使用的是 t。 translation 是否需要自动翻译，默认为 false。
4.2K30发布于 2020-09-28 - 来自专栏吃猫的鱼个人博客编程笔记
解决前端国际化中繁琐的操作，吾有一计！
解决前端国际化中繁琐的操作，吾有一计！通过frontend-i18n-plugin-前端国际化插件 插件，让你国际化效率提高十倍！如果这个插件帮助到了您，请不要吝啬您的star！！ 正常前端国际化流程首先我们回顾一下，正常国际化前端操作的流程，及其耗时。至少我一开始做的时候需要按照这个流程！在文件夹目录中通过正则把所有中文搜索出来，逐个选中。 （用时10秒）逐级检索当前键值对的json路径，并且复制到剪切板以.进行拼接 。用时10秒回到待翻译文件中，把待翻译内容以注释的方式写在旁边（供后续开发者理解）。 演示：设置部分：该功能简化了步骤3（共计节约 10 秒/词）。经过这一最终进化，整个流程大概来到了 3 秒。 项目地址：frontend-i18n-plugin-前端国际化插件 功能： 快速查找已有的国际化词条（选中中文，右键，选择对应的替换国际化形式，一键自动替换） 一键替换选中文本为国际化路径 支持 AI
37910编辑于 2025-02-10 - 来自专栏前端魔法指南
前端国际化跨时区问题兼容适配本地时间解决方案
如果读者有一定的项目开发经验，就一定会成为数据库里存储的时间都应该是时间戳这一观点的拥趸
2.2K10编辑于 2022-08-12 - 来自专栏APP自动化测试
iOS国际化
#5 在Project中Localizations栏位添加要做国际化的语言 ? 比如我们添加中文, 如果只需要国际化字符串 不需要对界面做国际化的话就默认好了 ? 添加的结果: ? 这样Localization.strings会自动添加中文国际化文件 ? 图片国际化是先导入一张图片, 设置为一种语言的国际化 然后导入另外一张图片, 修改为跟上一张同样的名字, 设置为另外一个语言的国际化 剩下的图片一样处理 使用时直接用UIImage imageName :@""就可以了, 会自动根据系统的语言显示不同的图片 文字国际化 文字实现国际化时候, strings文件的名称必须为Localizable否则只会显示key 所以我们将Localization文件删掉 , 创建Localizable.string 并设置国际化.
1.7K11发布于 2019-10-15 - 来自专栏编程学习基地
qt国际化
基于qt语言家的语言切换 Assistant（Qt语言家),类似于MSDN最权威的速应用程序翻译和国际化的工具。 Qt 使用单一的源码树 和单一的应用程序二进制包就可同时支持多个语言和书写系统，有助于软件走向国际化，普度众生。
1.7K30发布于 2020-05-08 - 来自专栏c++与qt学习
Spring MVC更多家族成员--国际化视图与LocalResolver---10
Spring MVC更多家族成员--国际化视图与LocalResolver---10 引言 可用的LocaleResolver LocaleResolver的足迹 LocaleResolver在初始化流程中的使用 所以，现在的Web应用程序尤其是企业级的应用，都会提供国际化的信息支持，以便可以根据访问者的Locale信息为他们提供相应语言的信息内容。 为用户提供国际化视图支持自然成为Spring MVC框架不可或缺的一部分。 只有揭开这一谜团，才能将Spring MVC框架内对国际化视图的支持讲述完整。 原则上来说，我们是通过RequestContext访问必要的国际化信息，包括当前请求对应的 Locale、应用使用的LocaleResolver，以及MessageSource中的国际化信息。
1K10编辑于 2022-08-23 - 来自专栏吃猫的鱼个人博客编程笔记
解决前端国际化中繁琐的操作，吾有一计！
解决前端国际化中繁琐的操作，吾有一计！ 通过frontend-i18n-plugin-前端国际化插件 插件，让你国际化效率提高十倍！如果这个插件帮助到了您，请不要吝啬您的star！！ 正常前端国际化流程 首先我们回顾一下，正常国际化前端操作的流程，及其耗时。至少我一开始做的时候需要按照这个流程！ 在文件夹目录中通过正则把所有中文搜索出来，逐个选中。 （用时10秒） 逐级检索当前键值对的json路径，并且复制到剪切板以.进行拼接 。用时10秒 回到待翻译文件中，把待翻译内容以注释的方式写在旁边（供后续开发者理解）。 演示： 设置部分： 该功能简化了步骤3（共计节约 10 秒/词）。 经过这一最终进化，整个流程大概来到了 3 秒。 项目地址：frontend-i18n-plugin-前端国际化插件 功能： 快速查找已有的国际化词条（选中中文，右键，选择对应的替换国际化形式，一键自动替换） 一键替换选中文本为国际化路径 支持 AI
32310编辑于 2025-02-11 - 来自专栏grain先森
前端-10款web动画插件
今天给大家带来了十款web前端动画插件，大家收藏了记得给个小心心哦 1.基于jQuery的瀑布流图片筛选插件 瀑布流的展现方式在目前的网页中用得越来越广泛，特别是图片和首页文章的动态加载。 这次我们分享的这款插件是基于Layui的，layui 是一款采用自身模块规范编写的前端UI框架，这款表格插件可以允许你非常方便的添加、删除表格行数据，并且通过服务器接口进行保存。 你只需要定制前端的数据列和后端的保存逻辑即可，数据交互均采用JSON格式。 ? 10.CSS3深色背景的垂直手风琴菜单 手风琴菜单我们已经分享过很多了，特别是垂直手风琴菜单更为常见，比如这款jQuery手风琴样式的多级下拉菜单和这款CSS3带小图标的手风琴下拉菜单都非常不错。
7.4K50发布于 2019-03-29 - 来自专栏前端干货和生活感悟
前端小知识10点(2020.3.20)
请看： 前端小知识10点(2020.2.10) 3、React中suppressContentEditableWarning属性是什么意思？ react-codemirror 5、yarn安装antd-pro依赖包时卡在puppeteer的解决办法 请看： https://www.jianshu.com/p/2ce56dccc5a7 puppeteer是前端自动化测试用的 JSON.parse()转换即可 const a="['a','b','c']" console.log(JSON.parse(a.replace(/'/g,'"'))) //["a", "b", "c"] 10
1.4K00发布于 2020-04-01 - 来自专栏前端干货和生活感悟
前端小知识10点(2020.6.28)
light类 的元素执行 .light{ } .item{ &:not(.light):hover{ color: #FE6225 } } 10
51710发布于 2020-07-02 - 来自专栏前端干货和生活感悟
前端小知识10点（2019.5.18）
let arr=[] arr[10]=11 console.log(arr.length); //11 arr[-1]=-1 console.log(arr.length) //11 let str=comment.split(/\r\n|\r|\n/g).join('
10
')41430编辑于 2022-03-28
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号