CodePark/ questions / i18n & accessibility at scale
START PRACTICINGPRACTICE
Frontend question · Frontend system design › i18n & accessibility at scale

Why should you avoid building translated strings by concatenation, and what should you do instead?

// bad
t("you_have") + " " + count + " " + t("messages")
// good
t("inbox.count", { count })
// "inbox.count": "{count, plural, one {You have # message} other {You have # messages}}"

Concatenation fixes English word order and plural rules into the code. Other languages break these rules:

  • They put the number or name in a different position.
  • They have several plural forms. Polish, Arabic and Russian have more than two.
  • They change words based on gender or grammatical case.

Translators also see only fragments with no context. So they cannot translate them correctly.

Instead, use one complete message per sentence, with named placeholders. Use ICU plural and select syntax, so each language defines its own forms. ICU MessageFormat is a standard syntax for messages with variables. Format the number inside with Intl.NumberFormat, through the i18n (internationalisation) library. Give translators a description for each key.

  • Word order and plural rules differ between languages.
  • Fragments give translators no context.
  • Use full messages with named placeholders.
  • Use ICU plural and select syntax, so each language defines its own forms.