JavaScript拼接含波斯语(Farsi)的混合字符串时出现顺序错乱如何处理

核心原因 #

这不是JavaScript字符串拼接的逻辑错误：你在代码里通过+=追加的所有字符，在内存中的码点顺序完全和你的编写顺序一致，不存在拼接乱序的问题。
你看到的视觉顺序错位，本质是波斯语属于从右到左（RTL）书写的文本，当和从左到右（LTR）的数字、半角符号混合显示时，浏览器会按照Unicode双向文本（BiDi）排版规则自动调整视觉方向，遇到弱方向字符（比如半角括号、数字）时会出现方向串块，最终让视觉显示的顺序和你预期的字符边界错位。

可落地的解决方法 #

• 给不同方向的文本块加明确的方向隔离，阻断自动BiDi判断带来的串块问题
  最通用的做法是用Unicode方向隔离符把独立方向的文本块完全包裹，不让相邻文本的方向影响块内的渲染规则，修正后的代码示例：

  function myFunction() {
    var str1 = "1234#15701,";
    // RLI(\u2067)标记RTL文本块起始，PDI(\u2069)标记隔离块结束
    str1 += "\u2067(سلام)\u2069,";
    str1 += '1570101/';
    str1 += "1234#15705,";
    // 给渲染容器指定固定的LTR方向，避免继承父元素的方向属性干扰
    const demoEl = document.getElementById("demo");
    demoEl.dir = "ltr";
    demoEl.innerHTML = str1;
  }
  

• 降低BiDi排版的出错概率
  半角括号、逗号、斜杠这类字符属于BiDi规则里的弱方向字符，直接裸接在RTL文本旁边时，会跟随相邻文本的方向调整显示位置，很难和你预期的视觉位置对齐。如果不想手动写Unicode转义符，也可以直接用HTML原生的<bdi>标签把RTL波斯语片段包裹起来，浏览器会自动给这个块做独立的方向隔离：

  // 用bdi标签隔离RTL片段的写法
  str1 += "<bdi>(سلام)</bdi>,";
  

• 正确验证拼接逻辑
  遇到这类问题不要只靠页面的视觉显示判断拼接是否出错，可以直接在控制台打印字符串的码点序列，只要码点顺序和你追加的顺序完全匹配，就说明拼接逻辑没有问题，所有的显示异常都可以通过方向隔离的方式解决。

注意：不要试图通过修改字符串的字符顺序来“对齐”渲染结果，那样会导致内存中的字符串顺序和需求完全错位，后续做字符串匹配、截取时会出现很难排查的bug。

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