在全球化的现代互联网时代，将网站或应用转化为多语言版本已经成为一项必备的功能。在前端开发中，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.在上面的例子中，我们使用了反引号来声明字符串，${}来插入变量值，并使用函数将其链接起来。
当我们使用标记模板字面量时，我们可以将其包装在一个函数中。这个函数将接收所有字符串和表达式的值，允许我们动态地操作和格式化这些字符串和变量值。这个函数就是我们称之为“标记”的函数。
-- -------------------- ---- ------- -------- ------------ ---------- - --------------------- -- ---- ---- -- -- -- --- --- -- - ----- ----- - -------------------- -- --------- --- - ----- ---- - -------- ----- --- - --- ------ ---- -- -------- --- --- ------ ----- ------
在上面的例子中，我们创建了一个名为“tag”的函数，并将其包装在模板字面量中。当这段代码被运行时，模板字面量将被分解为两个数组：strings和values。strings数组包含所有字符串值的数组，而values数组包含所有表达式的值。我们可以使用这些数组来格式化和操作字符串，并最终返回想要的结果。
标记模板字面量和 i18n
使用标记模板字面量和标记函数，我们可以轻松地实现国际化功能。下面是一个使用标记模板字面量和标记函数来实现i18n的示例：
-- -------------------- ---- -------
----- -------- - -
-------- -
--------- ------- ---------
--------- --------- --------
--
-------- -
--------- -------------
--------- ------------
-
--
-------- ------------- ---------- -
----- ------ - -------------------
----- ------- - --------------------- ----- -- -- ---- - -------- - -- - ------
------ ------------------------- -- --------
-
----- ---- - --------
------------------------- ---------- -- ------- ------ ------
------------------------- ---------- -- ------- -------- ------在上述代码中，我们创建了一个名为“i18n”的标记函数，它接收模板字面量中的所有字符串和表达式的值，并将其组合到一个字符串模板中。它然后使用浏览器中的navigator.language获取当前语言环境，并将此语言环境与消息对象进行比较。如果匹配，它将返回相应的翻译，否则它将返回原始字符串。这个函数可以轻松地扩展到支持更多的语言和消息。
ES9的新特性
除了标记模板字面量之外，ES9 还引入了一些新特性，这些特性可以帮助我们更容易地实现国际化功能。以下是两个主要的特性：
Object.entries()
Object.entries()方法可以将给定对象转化为键值对的数组。这对于遍历对象的属性并将其用于 i18n 非常有用。
-- -------------------- ---- -------
----- -------- - -
--------- -
-------- ------- ---------
-------- ------------
--
--------- -
-------- --------- ---------
-------- ------------
-
--
----- ------ - -------------------
--- ------ ----- ------ -- ------------------------- -
----- ----------- - ----------------------
-------------------- -----------------
-在上面的代码中，我们使用Object.entries()方法和for..of循环来遍历messages对象中的所有属性。对于每个属性，我们检查locale是否有相关翻译。如果有，我们将翻译打印出来。这使得我们可以更轻松地扩展 i18n，因为我们可以使用对象的属性来存储和处理消息。
async/await
async/await是 ES9 中引入的另一个特性，它可以帮助我们更轻松地处理异步操作。当我们需要加载一些本地或远程资源时，async/await可以让我们等待这些资源加载完成，然后再继续进行翻译。
-- -------------------- ---- -------
----- -------- - -
--------- -
-------- ------- ---------
-------- ------------
--
--------- -
-------- --------- ---------
-------- ------------
-
--
----- -------- -------------- -
----- -------- - ----- ------------------------
------ ----- ----------------
-
----- -------- ------------- ---------- -
----- ------ - -------------------
----- ------- - --------------------- ----- -- -- ---- - -------- - -- - ------
-- ------------------- -
---------------- - ----- ---------------
-
------ ------------------------- -- --------
-
----- ---- - --------
----------------- ------------- ---------- -- ------- ------ ------
----------------- ------------- ---------- -- ------- -------- ------在这个例子中，我们模拟一个异步操作，即加载messages.json文件。我们使用async/await来等待加载完成，然后将远程消息对象添加到本地缓存中。这就允许我们更灵活地处理和加载消息，而不会阻塞主线程。
总结
使用标记模板字面量和 ES9，实现 i18n 已经变得更加容易和灵活了。通过使用标记函数和字符串的动态操作，我们可以使用一个统一的结构来创建 i18n 翻译。使用Object.entries()和async/await，我们可以更方便地处理和加载消息，而不会阻塞主线程。这种方法可以轻松地扩展到支持更多的语言和消息，并且可以使代码更干净、清晰和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651d517795b1f8cacd4e0186