Q&A

August 16, 2025 · View on GitHub

Table of Contents

  1. Principles and Process of automatic-translation
  2. What is the difference between Variable Interpolation and Interpolation Variable ?
  3. Why doesn't Variable Interpolation support object property resolution?
  4. Is it necessary to separate Date and Time types for Interpolation Variable ?
  5. Will rich text be supported?

1. Principles and Process of automatic-translation

Process:

  1. Text extraction
  2. Call translation API
  3. Generate language pack

In the whole process, Text extraction is the most crucial step. Using the text-as-key approach is intuitive, easy to write, and also enables scripts to automatically identify and process content

The following is an example of text-as-key

const text = t('hello world')

Effect of language pack generated by automatic-translation

// zh.json
{
  "hello world": "你好世界"
}

// jp.json
{
  "hello world": "こんにちは世界"
}

However, using only the text-as-key approach also has certain limitations:

  • Not applicable to polysemy scenarios

You can use the key property of t.t to implement custom-key , optimizing Not applicable to polysemy scenarios

The following is an example of custom-key

const text = t.t('custom-key', 'hello world')

Effect of language pack generated by automatic-translation

// zh.json
{
  "custom-key": "你好世界"
}

// jp.json
{
  "custom-key": "こんにちは世界"
}

Using custom-key generated language pack, even if text changes, the generated language pack are not affected.

The order in which language pack texts are generated by automatic-translation each time

  1. custom-key Translated
  2. custom-key translated, generated based on text-as-key
  3. custom-key Newly translated
  4. text-as-key Translated
  5. text-as-key Newly translated

2. What is the difference between Variable Interpolation and Interpolation Variable ?

t('i18n-pro has reached {n0} users', 100000000) // Number
t('The selling price is {c0}', 14999) // Currency
t(`Today's date is {d0}`, new Date()) // Date
t('Current time: {t0}', new Date()) // Time
t('I have {p0 apple}, {p1 banana} and {p2 pear}', 5, 4, 3) // Plural

Variable Interpolation：Refers to the realization of t('hello {0}', 'world') → 'hello world' this feature
Interpolation Variable：Means the variable inserted into the text
For example, 100000000 , 14999 , and newDate() in the sample code above

  • Insertion position of Interpolation Variable
    • Similar to {0}、{1}、{2}, etc
  • Interpolation Variable type tag
    • Similar to {n0}、{c1}、{t2}、{d3}、{p4{0} apples}, etc

3. Why doesn't Variable Interpolation support object property resolution?

Sample code

// Object attribute resolution
t('我叫{name}，今年{age}岁，来自{base}，是一名{job}', {
  name: '王尼玛',
  age: 22,
  base: '火星',
  job: '码农',
})

// Resolution of subscripts in the current library
t('我叫{0}，今年{1}岁，来自{2}，是一名{3}',
  '王尼玛',
  '22',
  '火星',
  '码农',
)

The main reason is that the text contains attribute names, which is not conducive to translation through third-party platforms. The example above is still okay when translating from Chinese to English. However, if translating from English to Chinese or other languages, the attribute names in Interpolation Variable will also be translated, which is the problem

Example of object attribute resolution

// text as Chinese
const zh = '我叫{name}，今年{age}岁，来自{base}，是一名{job}'

// Translated into English through Baidu-Translation, it seems OK
const zhToEn = `My name is {name}. I'm {age} years old. I'm from {base}. I'm a {job} `

// Then translate the above English into Chinese through Baidu-Translation, we can find that the translation of {job} has problems, and different translation platforms may have different problems
const enToZh = '我的名字是｛name｝。我{age}岁。我来自{base}。我是{工作}'

Let's take a look at the example of subscript parsing

// text as Chinese
const zh = '我叫{0}，今年{1}岁，来自{2}，是一名{3}'

// Translated into English through Baidu-Translation
const zhToEn = `My name is {0}. I'm {1} years old. I'm from {2}. I'm a {3}`

// Translate the above English into Chinese through Baidu-Translation, and the above parameters will not be mismatched
const enToZh = '我的名字是｛0｝。我是｛1｝岁。我来自｛2｝。我是｛3｝'

Although machine translation cannot achieve 100% accuracy, this method can avoid unnecessary errors as much as possible

4. Is it necessary to separate Date and Time types for Interpolation Variable ?

Personally, I don't think it is necessary, but it has been implemented in the design. You can choose to use it flexibly at your discretion. Of course, it is not ruled out that some business scenarios will be more convenient to deal with separately

5. Will rich text be supported?

Rich text is not supported. Automatic translation requires text to be plain text; it conflicts with current implementation logic

**If you need rich text effects, you can achieve it through Variable Interpolation **
For example, the text here is hello world , and world needs to be displayed as red and bold on the page
Option 1

t('hello {0}world{1}', '<b style="color:red;">', '</b>')

// The result of executing the t  function is: hello <b style="color:red;">world</b>

Option 2

t('Hello {0}', `<b style="color:red;">${t('world')}</b>`)

// The result of executing the t  function is: hello <b style="color:red;">world</b>

The above solution can be selected according to actual needs