Skip to main content

Interpolation

When localizing text, part of a sentence may be known only at runtime. For example, it may be randomized how many items the user is asked to remember. The following is very inefficient:

translation: {
  "configuration": {
    "baseLocale": "en-US"
  },
  "en-US": {
    localeName: "English",
    REMEMBER_3_BALLS: "Remember the position of 3 balls",
    REMEMBER_4_BALLS: "Remember the position of 4 balls",
    REMEMBER_5_BALLS: "Remember the position of 5 balls",
  },
  "es-MX": {
    localeName: "Español",
    REMEMBER_3_BALLS: "Recuerda la posición de 3 bolas.",
    REMEMBER_4_BALLS: "Recuerda la posición de 4 bolas.",
    REMEMBER_5_BALLS: "Recuerda la posición de 5 bolas.",
  },
}

Inserting a variable into a placeholder within a string is called string interpolation. In the m2c2kit i18n engine, the placeholders are variable names surrounded by double curly braces. These placeholders are used in the Translation object and the node that will display the translated text.

Defining placeholders within the Translation object​

translation: {
  "configuration": {
    "baseLocale": "en-US"
  },
  "en-US": {
    localeName: "English",
    REMEMBER_BALLS: "Remember the position of {{ballCount}} balls",
  },
  "es-MX": {
    localeName: "Español",
    REMEMBER_BALLS: "Recuerda la posición de {{ballCount}} bolas.",
  },
}

Specifying the placeholder values​

In the node with translated text, provide the interpolation property. It is key-value pairs where the key is the placeholder, and the value is the string to be inserted.

const balls = (Math.floor(Math.random() * (10 - 3 + 1)) + 3).toString();
const directionsLabel = new Label({
  text: "REMEMBER_BALLS",
  interpolation: {
    ballCount: balls
  }
});

In the below example, the user is asked to remember a randomly chosen number of balls (3-10). These directions are localized into English and Spanish. Click the "Run" button repeatedly to see that this number changes.

Loading...