i18n/no-string-concat

Why

Word order, grammatical case and agreement differ between languages, so "You have" + 3 + "items" cannot be translated: a Polish translator needs the number in the middle and a different noun form for 3 and for 5. Fragments also lose context for the translator.

Fix

Write the whole sentence as one message with named placeholders and let the library insert the values: t('cart.items', { count }) with "You have {count, plural, one {# item} other {# items}}". Pass components for links and emphasis through the library's rich text API instead of splitting the string.

Examples

// bad
t('cart.has') + ' ' + count + ' ' + t('cart.items')
// good
t('cart.items', { count }) // "You have {count, plural, one {# item} other {# items}}"

Sources

• W3C Internationalization, Working with composite messages
• MDN, Intl.PluralRules

Read it in the terminal

npx github:dawidolko/frontend-skills explain i18n/no-string-concat