JavaScript拼接数字与波斯语单词时显示顺序异常原因及解决方法

复现代码 #

const number = 200000;
const persianMoney = "تومان";

// 测试不同拼接方式
console.log("way 1:");
console.log(number + persianMoney);
console.log(persianMoney + number);

console.log("way 2:");
console.log(`${number}${persianMoney}`);
console.log(`${persianMoney}${number}`);

console.log("way 3:");
console.log(String(number) + persianMoney);
console.log(persianMoney + String(number));

console.log("way 4:");
console.log(`${String(number)}${persianMoney}`);
console.log(`${persianMoney}${String(number)}`);

console.log("way 5:");
console.log(String(number + persianMoney));
console.log(String(persianMoney + number));

问题表现 #

共测试5种常见字符串拼接方式：直接用+运算符拼接、模板字符串拼接、显式将数字转为字符串后拼接，无论代码中编写的拼接顺序是数字在前还是波斯语货币单位「تومان」在前，所有输出视觉结果完全一致，均显示为200000تومان，波斯语单词始终无法按代码书写顺序显示在数字后方，调整拼接写法也无法得到预期顺序的结果。

根本原因 #

这个问题和JavaScript的字符串拼接逻辑无关，是Unicode双向文本（BiDi）渲染规则导致的显示偏差：

• 波斯语属于从右到左（RTL）书写的语言，数字属于方向中性字符，控制台、浏览器等文本渲染环境会默认按照Unicode双向算法，自动调整混合方向文本的显示块顺序，适配对应语言的阅读习惯。
• 实际JS内存中存储的字符串字符顺序完全符合代码书写逻辑，可以通过索引取值验证：

  const strNumFirst = number + persianMoney;
  const strPersianFirst = persianMoney + number;
  console.log(strNumFirst[0]); // 输出'2'，首位确实是数字
  console.log(strPersianFirst[0]); // 输出'ت'，首位确实是波斯语字符
  

  只是渲染阶段文本顺序被自动重排，才会出现视觉上顺序和代码书写顺序不一致的现象。

解决方法 #

通过加入不可见的Unicode方向控制字符，强制指定文本渲染顺序即可，该方式不会影响波斯语单词本身的字母正确显示：

• 左到右强制标记（LRM）字符为\u200E，在字符串开头加入该标记，即可让后续文本严格按照代码书写的字符顺序从左到右排列：

  // 视觉显示为 تومان200000，波斯语在数字左侧
  console.log(`\u200E${persianMoney}${number}`);
  // 视觉显示为 200000تومان，数字在波斯语左侧
  console.log(`\u200E${number}${persianMoney}`);
  

• 如果是网页DOM场景，不推荐直接用CSSdirection: ltr; unicode-bidi: bidi-override;强制全局方向，该属性会强制反转所有RTL字符的书写顺序，导致波斯语单词本身的字母显示错乱。

内容的提问来源于stack exchange，提问作者saman