JavaScript中的国际化与本地化实现

理解 JavaScript 中的国际化与本地化

在全球化的时代，构建能够适应不同地区用户需求的应用程序至关重要。JavaScript 作为前端开发的核心语言，提供了丰富的工具和方法来实现国际化（i18n）和本地化（l10n）。国际化侧重于设计应用程序，使其能够适应不同语言和地区的用户，而本地化则是针对特定语言和地区对应用程序进行定制。

国际化与本地化的基本概念

• 国际化（i18n）：这是一种将应用程序设计和开发成能够适应多种语言和地区的过程。它涉及到将所有与语言相关的文本从代码中分离出来，使用一种通用的方式来处理日期、时间、数字和货币格式等。例如，一个国际化的应用程序可以根据用户所在地区显示不同语言的问候语，并且能够正确格式化不同地区的日期和数字。
• 本地化（l10n）：本地化是在国际化的基础上，针对特定的语言和地区对应用程序进行定制。这包括翻译文本、调整日期和时间格式、使用特定地区的货币符号等。例如，将应用程序翻译成法语，并使用法国的日期格式和欧元符号，这就是本地化的过程。

JavaScript 中的国际化支持

JavaScript 从 ECMAScript 5.1 开始引入了一些国际化相关的功能，并且在后续版本中不断增强。主要的国际化 API 包括 Intl 对象及其相关的构造函数，如 Intl.NumberFormat、Intl.DateTimeFormat 和 Intl.Collator。

使用 Intl.NumberFormat 进行数字格式化

Intl.NumberFormat 是 JavaScript 中用于格式化数字的强大工具。它允许根据不同地区的习惯来格式化数字，包括数字的样式、千位分隔符和小数位数等。

创建 Intl.NumberFormat 实例

要使用 Intl.NumberFormat，首先需要创建一个实例。可以通过传递不同的参数来定制格式化的方式。

// 创建一个默认的 Intl.NumberFormat 实例，使用浏览器的语言和地区设置
const numberFormatter = new Intl.NumberFormat();
const number = 1234567.89;
console.log(numberFormatter.format(number)); 
// 在美式英语环境下，输出 "1,234,567.89"

使用特定语言和地区进行格式化

可以通过传递语言标签和地区选项来指定格式化的语言和地区。

// 使用德语（德国）格式化数字
const deNumberFormatter = new Intl.NumberFormat('de-DE');
console.log(deNumberFormatter.format(number)); 
// 输出 "1.234.567,89"，德国使用点作为千位分隔符，逗号作为小数分隔符

自定义数字格式选项

除了语言和地区，还可以通过传递 options 对象来自定义数字格式。例如，可以设置最小和最大小数位数。

const options = {
    minimumFractionDigits: 2,
    maximumFractionDigits: 4
};
const customFormatter = new Intl.NumberFormat('en-US', options);
console.log(customFormatter.format(number)); 
// 输出 "1,234,567.8900"，确保至少有两位小数，最多四位小数

货币格式化

Intl.NumberFormat 也可以用于货币格式化。通过设置 style 为 'currency' 并指定 currency 选项，可以以特定货币格式显示数字。

const currencyFormatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
});
console.log(currencyFormatter.format(number)); 
// 输出 "$1,234,567.89"

在其他地区，货币格式会有所不同。例如，在欧元区：

const euroFormatter = new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR'
});
console.log(euroFormatter.format(number)); 
// 输出 "1.234.567,89 €"

使用 Intl.DateTimeFormat 进行日期和时间格式化

Intl.DateTimeFormat 用于根据不同地区的习惯格式化日期和时间。它可以处理各种日期和时间格式，从简单的短日期格式到复杂的包含星期几、月份全称等的长格式。

创建 Intl.DateTimeFormat 实例

与 Intl.NumberFormat 类似，首先创建一个 Intl.DateTimeFormat 实例。

const now = new Date();
const dateFormatter = new Intl.DateTimeFormat();
console.log(dateFormatter.format(now)); 
// 在美式英语环境下，可能输出 "8/14/2023"

特定语言和地区的日期时间格式化

通过传递语言标签和地区选项，可以获得特定地区的日期时间格式。

// 使用法语（法国）格式化日期
const frDateFormatter = new Intl.DateTimeFormat('fr-FR');
console.log(frDateFormatter.format(now)); 
// 可能输出 "14 août 2023"

自定义日期时间格式选项

可以通过 options 对象自定义日期和时间的显示格式。例如，可以选择显示完整的星期几、月份全称等。

const options = {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
};
const customDateFormatter = new Intl.DateTimeFormat('en-US', options);
console.log(customDateFormatter.format(now)); 
// 可能输出 "Monday, August 14, 2023"

时间格式化

除了日期，也可以单独格式化时间部分。通过设置 hour、minute 和 second 等选项，可以控制时间的显示精度。

const timeOptions = {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric'
};
const timeFormatter = new Intl.DateTimeFormat('en-US', timeOptions);
console.log(timeFormatter.format(now)); 
// 可能输出 "8:30:00 AM"

使用 Intl.Collator 进行字符串比较和排序

Intl.Collator 用于根据特定语言的规则比较和排序字符串。不同语言有不同的字符顺序和排序规则，Intl.Collator 可以处理这些差异。

创建 Intl.Collator 实例

const collator = new Intl.Collator();
const strings = ['äpple', 'banana', 'cherry'];
strings.sort(collator.compare);
console.log(strings); 
// 在一些语言环境中，ä可能会被正确排序在合适的位置

使用特定语言进行字符串比较

通过传递语言标签，可以使用特定语言的排序规则。

const deCollator = new Intl.Collator('de-DE');
const germanStrings = ['äpfel', 'banane', 'kirsche'];
germanStrings.sort(deCollator.compare);
console.log(germanStrings); 
// 在德语环境中，äpfel会根据德语排序规则正确排序

自定义排序选项

可以通过 options 对象自定义排序选项，例如忽略大小写、使用特定的排序算法等。

const options = {
    sensitivity: 'base' // 忽略大小写和变音符号
};
const customCollator = new Intl.Collator('en-US', options);
const mixedCaseStrings = ['Apple', 'banana', 'aPPle'];
mixedCaseStrings.sort(customCollator.compare);
console.log(mixedCaseStrings); 
// 按照忽略大小写的规则排序

文本翻译与国际化框架

虽然 Intl 对象提供了很好的数字、日期和字符串排序的国际化支持，但对于文本翻译，通常需要使用额外的工具或框架。

简单的文本翻译方法

一种简单的方法是使用对象来存储不同语言的文本。

const translations = {
    en: {
        greeting: 'Hello',
        goodbye: 'Goodbye'
    },
    fr: {
        greeting: 'Bonjour',
        goodbye: 'Au revoir'
    }
};
function getTranslation(key, lang) {
    return translations[lang][key];
}
const greeting = getTranslation('greeting', 'fr');
console.log(greeting); 
// 输出 "Bonjour"

使用国际化框架

• i18next：这是一个流行的 JavaScript 国际化框架。它提供了丰富的功能，包括嵌套翻译、复数形式、日期和数字格式化等。
  • 安装：npm install i18next
  • 基本使用：

import i18next from 'i18next';
import { initReactI18next } from'react-i18next';
// 初始化 i18next
i18next
   .use(initReactI18next)
   .init({
        lng: 'en',
        resources: {
            en: {
                translation: {
                    greeting: 'Hello',
                    goodbye: 'Goodbye'
                }
            },
            fr: {
                translation: {
                    greeting: 'Bonjour',
                    goodbye: 'Au revoir'
                }
            }
        }
    });
const greeting = i18next.t('greeting');
console.log(greeting); 
// 输出 "Hello"，根据当前语言设置

• FormatJS：另一个强大的国际化库，它专注于格式化日期、时间、数字和字符串。它与 React 集成良好，并且支持 ICU 消息格式，这是一种功能强大的用于格式化消息的语法。
  • 安装：npm install @formatjs/intl @formatjs/react
  • 基本使用：

import { IntlProvider, FormattedMessage } from'react-intl';
const messages = {
    en: {
        greeting: 'Hello',
        goodbye: 'Goodbye'
    },
    fr: {
        greeting: 'Bonjour',
        goodbye: 'Au revoir'
    }
};
function App() {
    return (
        <IntlProvider locale="en" messages={messages.en}>
            <FormattedMessage id="greeting" />
        </IntlProvider>
    );
}

处理不同语言的字符集和编码

在国际化过程中，处理不同语言的字符集和编码是非常重要的。JavaScript 内部使用 Unicode 来处理字符，这使得它能够支持几乎所有语言的字符。

字符编码基础知识

• UTF - 8：这是一种变长字符编码，它可以表示 Unicode 字符集中的任意字符。在 Web 开发中，UTF - 8 是最常用的字符编码，因为它具有良好的兼容性和效率。
• UTF - 16：JavaScript 使用 UTF - 16 来内部表示字符串。每个字符在 JavaScript 中通常占用 2 个字节，但对于一些补充字符（如某些 emoji），可能需要 4 个字节。

处理非 ASCII 字符

当处理包含非 ASCII 字符的字符串时，需要注意字符串操作函数的行为。例如，length 属性返回的是 UTF - 16 代码单元的数量，而不是实际的字符数量。

const emoji = '😀';
console.log(emoji.length); 
// 输出 2，因为这个 emoji 是一个补充字符，在 UTF - 16 中占用 2 个代码单元

要获取实际的字符数量，可以使用 Array.from 方法将字符串转换为字符数组，然后获取数组的长度。

const realLength = Array.from(emoji).length;
console.log(realLength); 
// 输出 1，这是实际的字符数量

避免编码相关问题

• 文件编码：确保所有包含非 ASCII 字符的文件（如 HTML、JavaScript、CSS）都使用 UTF - 8 编码保存。这样可以避免在不同环境下出现字符显示错误。
• HTTP 头：在服务器端，通过设置 Content - Type 头为 text/html; charset=UTF - 8 或 application/javascript; charset=UTF - 8 等，告诉浏览器文档的编码方式。

服务器端的国际化与本地化

虽然 JavaScript 主要用于前端开发，但在服务器端（如使用 Node.js）也可以实现国际化和本地化。

Node.js 中的国际化支持

Node.js 可以使用与浏览器端类似的 Intl 对象进行数字、日期和字符串排序的国际化。此外，一些库如 i18next 也可以在 Node.js 环境中使用。

const { Intl.NumberFormat } = require('intl');
const number = 1234567.89;
const numberFormatter = new Intl.NumberFormat('en-US');
console.log(numberFormatter.format(number)); 
// 输出 "1,234,567.89"

服务器端文本翻译

在服务器端进行文本翻译时，可以使用与前端相同的方法，如使用对象存储翻译文本或使用国际化框架。例如，使用 i18next 在 Node.js 中进行翻译：

const i18next = require('i18next');
const Backend = require('i18next - fs - backend');
i18next
   .use(Backend)
   .init({
        lng: 'en',
        backend: {
            loadPath: './locales/{{lng}}/{{ns}}.json'
        }
    });
const greeting = i18next.t('greeting');
console.log(greeting); 

在这个例子中，i18next - fs - backend 用于从文件系统加载翻译文件。

测试国际化和本地化功能

确保应用程序的国际化和本地化功能正常工作至关重要。以下是一些测试方法：

手动测试

• 语言切换：在应用程序中提供语言切换功能，手动切换到不同语言，检查所有文本是否正确翻译，日期、时间、数字和货币格式是否符合目标地区的习惯。
• 不同地区设置：在浏览器或设备中手动设置不同的地区，检查应用程序的显示是否相应地调整。

自动化测试

• 单元测试：对于日期、时间和数字格式化函数，可以编写单元测试来验证格式化结果是否符合预期。例如，使用 Jest 测试 Intl.NumberFormat 的格式化结果：

const { Intl.NumberFormat } = require('intl');
test('Number format in en-US', () => {
    const number = 1234567.89;
    const formatter = new Intl.NumberFormat('en-US');
    expect(formatter.format(number)).toBe('1,234,567.89');
});

• 集成测试：使用工具如 Cypress 或 Puppeteer 进行集成测试，模拟用户在应用程序中的操作，检查国际化和本地化功能在整个应用程序流程中的表现。例如，可以模拟用户切换语言，检查页面上的所有元素是否正确更新。

国际化和本地化的最佳实践

• 尽早规划：在项目开始时就考虑国际化和本地化，避免后期进行大规模的代码重构。
• 使用标准化的语言标签：遵循 ISO 639 - 1（语言代码）和 ISO 3166 - 1（地区代码）标准，确保语言和地区的表示一致。
• 避免硬编码文本：将所有与语言相关的文本提取到翻译文件中，便于维护和翻译。
• 测试多种语言和地区：不仅仅测试常用语言，还要测试一些小众语言和边缘地区的设置，确保应用程序的兼容性。
• 关注性能：在使用国际化框架或大量格式化操作时，注意性能问题。避免在频繁执行的代码块中进行复杂的国际化操作。

通过以上对 JavaScript 中国际化与本地化实现的深入探讨，开发者可以构建出更加全球化的应用程序，满足不同地区用户的需求，提升用户体验。无论是简单的数字格式化，还是复杂的文本翻译和全面的应用程序本地化，都有相应的工具和方法可供使用。在实际开发中，结合项目的具体需求，选择合适的技术和最佳实践，能够有效地实现国际化和本地化目标。