面试题：JavaScript实现复杂场景下的国际化与本地化

Question

考虑一个电商应用，用户可以从多个国家购买商品。商品价格需要根据用户所在地区进行本地化显示，同时商品描述中的一些术语也需要根据用户语言进行翻译（假设已经有一个翻译函数`translate(key, locale)`，`key`是术语的唯一标识，`locale`是地区代码）。此外，应用还需要根据用户所在地区设置不同的日期和时间格式来显示订单创建时间等信息。请设计一个JavaScript模块，包含初始化函数（接收用户地区代码作为参数）和相关的显示函数，能够满足上述复杂场景下的国际化与本地化需求，并简要说明设计思路和关键实现点。

Answer 1

设计思路

1. 初始化函数：接收用户地区代码作为参数，用于设置整个应用的地区相关配置。
2. 显示函数：
   • 价格显示：根据地区设置价格的本地化格式，如不同国家的货币符号和小数分隔符等。
   • 术语翻译：利用给定的translate(key, locale)函数对商品描述中的术语进行翻译。
   • 日期时间显示：根据地区设置不同的日期和时间格式。

关键实现点

1. 价格格式化：使用Intl.NumberFormat进行价格的本地化显示。
2. 日期时间格式化：使用Intl.DateTimeFormat进行日期和时间的本地化显示。
3. 全局状态管理：通过初始化函数设置全局的地区状态，以便其他显示函数使用。

代码实现

// 定义一个模块
const i18nModule = (function () {
    let currentLocale;

    // 初始化函数
    function init(locale) {
        currentLocale = locale;
    }

    // 价格显示函数
    function formatPrice(price) {
        return new Intl.NumberFormat(currentLocale, {
            style: 'currency',
            currency: getCurrencyForLocale(currentLocale)
        }).format(price);
    }

    // 获取对应地区的货币代码
    function getCurrencyForLocale(locale) {
        // 这里简单示例，实际应根据真实地区代码映射货币代码
        if (locale.startsWith('en-US')) return 'USD';
        if (locale.startsWith('zh-CN')) return 'CNY';
        return 'USD';
    }

    // 术语翻译显示函数
    function translateTerm(key) {
        return translate(key, currentLocale);
    }

    // 日期时间显示函数
    function formatDateTime(date) {
        return new Intl.DateTimeFormat(currentLocale).format(date);
    }

    return {
        init,
        formatPrice,
        translateTerm,
        formatDateTime
    };
})();

// 假设已经有这个翻译函数
function translate(key, locale) {
    // 实际应实现翻译逻辑，这里简单返回
    return `Translated ${key} for ${locale}`;
}

// 使用示例
i18nModule.init('en-US');
console.log(i18nModule.formatPrice(100));
console.log(i18nModule.translateTerm('product_description_key'));
console.log(i18nModule.formatDateTime(new Date()));