Cordova - 全球化

Cordova - 全球化与本地化 (Globalization & Localization)

以前，cordova-plugin-globalization 插件用于访问用户的区域设置 (locale)、语言、日期/时间以及货币信息。然而，此插件现已弃用 (deprecated)，因为它所基于的 W3C 规范已经退役。

包括 Cordova 应用在内的基于 JavaScript 的应用程序中，进行全球化和本地化 (globalization and localization) 的现代且推荐方法是使用内置的 ECMAScript Internationalization API (Intl 对象)。此 API 提供了强大的工具，用于语言敏感的字符串比较、数字格式化和日期/时间格式化。

使用 ECMAScript Internationalization API (Intl)

Intl 对象是 ECMAScript Internationalization API 的命名空间。它在所有现代 WebView 和 JavaScript 环境中都可用，因此无需额外的 Cordova 插件即可获得这些功能。

1. 获取用户的首选语言/区域设置

你可以使用 navigator.language 或 navigator.languages 来确定用户的首选语言。

// 在 'deviceready' 事件之后或应用初始化时添加此代码

function displayLocaleInfo() {
    const preferredLanguage = navigator.language;
    console.log('Preferred language (navigator.language):', preferredLanguage); // 例如 "en-US"

    const preferredLanguages = navigator.languages;
    console.log('Preferred languages (navigator.languages):', preferredLanguages); // 例如 ["en-US", "en", "es"]

    // 你可以使用这些信息来加载合适的资源或设置应用的语言
    alert('Preferred Language: ' + preferredLanguage);
}

// 示例：在按钮点击或应用启动时调用此函数
// document.getElementById('getLocaleInfoButton').addEventListener('click', displayLocaleInfo);

2. 格式化日期和时间

Intl.DateTimeFormat 可以进行语言敏感的日期和时间格式化。

function formatCurrentDate() {
    const now = new Date();
    const userLocale = navigator.language || 'en-US'; // 回退到 'en-US'

    // 简单的日期格式
    const simpleFormatter = new Intl.DateTimeFormat(userLocale);
    console.log('Simple Date:', simpleFormatter.format(now));

    // 更详细的格式
    const options = {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
        timeZoneName: 'short'
    };
    const detailedFormatter = new Intl.DateTimeFormat(userLocale, options);
    console.log('Detailed Date:', detailedFormatter.format(now));
    alert('Formatted Date (' + userLocale + '): ' + detailedFormatter.format(now));
}

// 示例：在按钮点击时调用此函数
// document.getElementById('formatDateButton').addEventListener('click', formatCurrentDate);

3. 格式化数字

Intl.NumberFormat 可以进行语言敏感的数字格式化。

function formatSampleNumber() {
    const number = 123456.789;
    const userLocale = navigator.language || 'en-US';

    const numberFormatter = new Intl.NumberFormat(userLocale);
    console.log('Formatted Number:', numberFormatter.format(number));
    alert('Formatted Number (' + userLocale + '): ' + numberFormatter.format(number));
}

4. 格式化货币

Intl.NumberFormat 也可以根据区域设置约定格式化货币值。

function formatCurrencyValue() {
    const amount = 98765.43;
    const userLocale = navigator.language || 'en-US';

    // 根据区域设置或应用设置确定货币
    // 这是一个简化示例；可靠的货币检测可能更复杂
    let currencyCode = 'USD'; // 默认
    if (userLocale.startsWith('en-GB')) currencyCode = 'GBP';
    if (userLocale.startsWith('de')) currencyCode = 'EUR';
    // 对于真实的应用程序，你可能从用户设置或更可靠的来源获取此信息。

    const currencyFormatter = new Intl.NumberFormat(userLocale, {
        style: 'currency',
        currency: currencyCode // ISO 4217 currency code
    });
    console.log('Formatted Currency:', currencyFormatter.format(amount));
    alert('Formatted Currency (' + userLocale + ', ' + currencyCode + '): ' + currencyFormatter.format(amount));
}

在 Cordova 应用中的实现步骤

1. 移除 cordova-plugin-globalization: 如果你的项目仍然有此插件，请将其移除：cordova plugin rm cordova-plugin-globalization。

2. 使用 Intl API: 使用 Intl 对象实现所需的格式化，如上例所示。你可以创建工具函数以便在应用中重用。

3. HTML 结构 (示例): 如果你想通过按钮触发这些函数：

<!-- In index.html -->
<button id="getLocaleInfoButton">Get Locale Info</button>
<button id="formatDateButton">Format Date</button>
<button id="formatNumberButton">Format Number</button>
<button id="formatCurrencyButton">Format Currency</button>

4. JavaScript 事件监听器 (示例):

// 在你的应用的 JavaScript 文件中（例如 index.js），在 'deviceready' 之后
document.addEventListener('deviceready', () => {
    document.getElementById("getLocaleInfoButton").addEventListener("click", displayLocaleInfo);
    document.getElementById("formatDateButton").addEventListener("click", formatCurrentDate);
    document.getElementById("formatNumberButton").addEventListener("click", formatSampleNumber);
    document.getElementById("formatCurrencyButton").addEventListener("click", formatCurrencyValue);
    // Define the functions displayLocaleInfo, formatCurrentDate, etc., as shown above.
}, false);

使用 Intl API 的好处

对于包括字符串翻译在内的全面国际化 (i18n)，可以考虑使用 i18next 等库或框架特定的解决方案（例如 vue-i18n、react-intl），并结合 Intl API 进行格式化。

延伸阅读：MDN Web Docs 关于 Intl，navigator.language 和 navigator.languages 的文档。