国际化（i18n）
设计和开发能够无缝适应不同语言、文化和地区偏好的组件
国际化（i18n） 是 CoddyKit 上的免费 Design Systems & Component Libraries 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Design Systems & Component Libraries 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Design Systems & Component Libraries 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Intro to Internationalization
Internationalization (i18n) is the process of designing and developing your components and applications so they can be easily adapted to different languages, regional differences, and technical requirements of a target country, region, or culture.
Think of it as preparing your product for the world! It's not just about translation, but about making sure your UI works everywhere.
Understanding Locale
A locale is a set of parameters that defines the user's language, country, and any special variant preferences that should be used to present information.
en-US: English (United States)fr-CA: French (Canada)es-MX: Spanish (Mexico)
These codes help your system know how to format things correctly.
Translating Text with Keys
Instead of hardcoding text directly into your components, you use translation keys. These keys are like placeholders.
For example, instead of "Hello", you might use a key like "greeting.hello". Your application then looks up the actual translated text for that key based on the user's locale.
Code: Dynamic Greetings
Here's a conceptual example of how translation keys work. The getTranslatedString function would fetch the correct text based on the locale from a translation file.
public class Greeter {
public static String getTranslatedString(String key, String locale) {
if (locale.equals("en-US")) {
if (key.equals("greeting.hello")) return "Hello!";
if (key.equals("action.welcome")) return "Welcome!";
} else if (locale.equals("es-MX")) {
if (key.equals("greeting.hello")) return "¡Hola!";
if (key.equals("action.welcome")) return "¡Bienvenido!";
}
return "Translation missing for " + key;
}
public static void main(String[] args) {
String userLocale = "es-MX"; // Imagine this comes from user settings
System.out.println(getTranslatedString("greeting.hello", userLocale));
userLocale = "en-US";
System.out.println(getTranslatedString("action.welcome", userLocale));
}
}Adapting Dates & Times
Dates and times are presented differently around the world. For example, "03/04/2023" means March 4th in the US but April 3rd in many other countries.
Your design system components should use locale-aware formatting utilities to display dates and times correctly for the user's region.
Formatting Numbers & Money
Number formats also vary. The decimal separator can be a dot (.) or a comma (,).
- US:
1,234.56 - Germany:
1.234,56
Currencies need their symbol and correct placement (e.g., $100.00 vs. 100,00 €).
Handling Text Direction
Most languages read from Left-to-Right (LTR). However, languages like Arabic, Hebrew, and Farsi read from Right-to-Left (RTL).
For RTL languages, the entire layout of your components needs to be mirrored. This includes text alignment, icon placement, and the flow of elements.
Cultural Imagery
Sometimes, images, icons, or even videos need to change based on the user's culture or region.
A picture that resonates well in one country might be confusing or even offensive in another. Your design system should support managing and delivering locale-specific assets.
Design Systems for i18n
A design system is key for good i18n because it provides:
- Centralized Translations: All strings managed in one place.
- Adaptable Components: Components designed to handle varying text lengths and RTL layouts.
- Consistent Formatting: Standardized date, time, and number formatting.
This ensures a consistent global experience.
i18n Quick Check
You're building a button component for your design system. Which of these is the BEST practice for displaying the button's text to support internationalization?
i18n Recap
We've explored Internationalization (i18n), understanding that it's more than just translation.
- We learned about locales and how they define regional preferences.
- We saw how to use translation keys for dynamic text.
- We discussed adapting dates, numbers, currencies, and layouts (RTL).
- And finally, how a design system provides a powerful foundation for building globally-ready components.
Keep these principles in mind for truly global products!
常见问题解答
「国际化（i18n）」课时是免费的吗？
是的 — 「国际化（i18n）」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Design Systems & Component Libraries 课程的其余内容，请升级到 CoddyKit PRO。 Design Systems & Component Libraries 课程共包含 4 节课。
「国际化（i18n）」这节课中我会学到什么？
设计和开发能够无缝适应不同语言、文化和地区偏好的组件 你通过在浏览器中直接运行的动手代码来练习 Design Systems & Component Libraries，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Design Systems & Component Libraries 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Design Systems & Component Libraries 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「国际化（i18n）」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Design Systems & Component Libraries 课中编写并运行代码吗？
能。每节 Design Systems & Component Libraries 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。