在全球化的现代互联网时代，将网站或应用转化为多语言版本已经成为一项必备的功能。在前端开发中，i18n（国际化）是一个既重要又挑战性的任务。本文将介绍如何利用标记模板字面量和 ES9 的新特性来实现 i18n，并提供示例代码和指导意义。
标记模板字面量
首先，让我们来看一下标记模板字面量。标记模板字面量是 ES6 中一种新的语法，它允许我们在字符串中嵌入表达式，并通过函数对其进行格式化。
const name = 'Alice';
const age = 28;
console.log(`My name is ${name}, and I'm ${age} years old.`);
// Output: My name is Alice, and I'm 28 years old.在上面的例子中，我们使用了反引号来声明字符串，${}来插入变量值，并使用函数将其链接起来。
当我们使用标记模板字面量时，我们可以将其包装在一个函数中。这个函数将接收所有字符串和表达式的值，允许我们动态地操作和格式化这些字符串和变量值。这个函数就是我们称之为“标记”的函数。
// javascriptcn.com 代码示例
function tag(strings, ...values) {
console.log(strings); // ["My name is ", ", and I'm ", " years old." ]
console.log(values); // ["Alice", 28]
}
const name = 'Alice';
const age = 28;
tag`My name is ${name}, and I'm ${age} years old.`;在上面的例子中，我们创建了一个名为“tag”的函数，并将其包装在模板字面量中。当这段代码被运行时，模板字面量将被分解为两个数组：strings和values。strings数组包含所有字符串值的数组，而values数组包含所有表达式的值。我们可以使用这些数组来格式化和操作字符串，并最终返回想要的结果。
标记模板字面量和 i18n
使用标记模板字面量和标记函数，我们可以轻松地实现国际化功能。下面是一个使用标记模板字面量和标记函数来实现i18n的示例：
// javascriptcn.com 代码示例
const messages = {
'en-US': {
greeting: 'Hello, {name}!',
farewell: 'Goodbye, {name}!'
},
'zh-CN': {
greeting: '你好，{name}！',
farewell: '再见，{name}！'
}
};
function i18n(strings, ...values) {
const locale = navigator.language;
const pattern = strings.reduce((prev, curr, i) => prev + values[i - 1] + curr);
return messages[locale][pattern] || pattern;
}
const name = 'Alice';
console.log(i18n`greeting ${name}`); // Output: Hello, Alice!
console.log(i18n`farewell ${name}`); // Output: Goodbye, Alice!在上述代码中，我们创建了一个名为“i18n”的标记函数，它接收模板字面量中的所有字符串和表达式的值，并将其组合到一个字符串模板中。它然后使用浏览器中的navigator.language获取当前语言环境，并将此语言环境与消息对象进行比较。如果匹配，它将返回相应的翻译，否则它将返回原始字符串。这个函数可以轻松地扩展到支持更多的语言和消息。
ES9的新特性
除了标记模板字面量之外，ES9 还引入了一些新特性，这些特性可以帮助我们更容易地实现国际化功能。以下是两个主要的特性：
Object.entries()
Object.entries()方法可以将给定对象转化为键值对的数组。这对于遍历对象的属性并将其用于 i18n 非常有用。
// javascriptcn.com 代码示例
const messages = {
greeting: {
'en-US': 'Hello, {name}!',
'zh-CN': '你好，{name}！'
},
farewell: {
'en-US': 'Goodbye, {name}!',
'zh-CN': '再见，{name}！'
}
};
const locale = navigator.language;
for (const [key, value] of Object.entries(messages)) {
const translation = messages[key][locale];
console.log(`${key}: ${translation}`);
}在上面的代码中，我们使用Object.entries()方法和for..of循环来遍历messages对象中的所有属性。对于每个属性，我们检查locale是否有相关翻译。如果有，我们将翻译打印出来。这使得我们可以更轻松地扩展 i18n，因为我们可以使用对象的属性来存储和处理消息。
async/await
async/await是 ES9 中引入的另一个特性，它可以帮助我们更轻松地处理异步操作。当我们需要加载一些本地或远程资源时，async/await可以让我们等待这些资源加载完成，然后再继续进行翻译。
// javascriptcn.com 代码示例
const messages = {
greeting: {
'en-US': 'Hello, {name}!',
'zh-CN': '你好，{name}！'
},
farewell: {
'en-US': 'Goodbye, {name}!',
'zh-CN': '再见，{name}！'
}
};
async function loadMessages() {
const response = await fetch('/messages.json');
return await response.json();
}
async function i18n(strings, ...values) {
const locale = navigator.language;
const pattern = strings.reduce((prev, curr, i) => prev + values[i - 1] + curr);
if (!messages[locale]) {
messages[locale] = await loadMessages();
}
return messages[locale][pattern] || pattern;
}
const name = 'Alice';
console.log(await i18n`greeting ${name}`); // Output: Hello, Alice!
console.log(await i18n`farewell ${name}`); // Output: Goodbye, Alice!在这个例子中，我们模拟一个异步操作，即加载messages.json文件。我们使用async/await来等待加载完成，然后将远程消息对象添加到本地缓存中。这就允许我们更灵活地处理和加载消息，而不会阻塞主线程。
总结
使用标记模板字面量和 ES9，实现 i18n 已经变得更加容易和灵活了。通过使用标记函数和字符串的动态操作，我们可以使用一个统一的结构来创建 i18n 翻译。使用Object.entries()和async/await，我们可以更方便地处理和加载消息，而不会阻塞主线程。这种方法可以轻松地扩展到支持更多的语言和消息，并且可以使代码更干净、清晰和易于维护。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/651d517795b1f8cacd4e0186