如何在UI弹窗中正确显示阿拉伯语与英语混合的后端返回文本？

云上老周

2026-8-5

解决混合阿拉伯语与英语文本在alert弹窗中显示错乱的问题

问题原因

阿拉伯语属于从右到左（RTL）书写语言，英语、数字属于从左到右（LTR），两种语言混合时，浏览器的双向文本排版算法可能错误调整文本顺序，而原生alert弹窗对双向文本的自动处理逻辑不完善，最终导致显示与原始文本不一致。

解决方案

方法1：添加Unicode双向控制字符强制文本顺序

通过在不同方向的文本片段前后插入Unicode控制字符，明确指定排版方向，避免自动错乱。

针对你的原始文本：

原始文本 = "+966897845123 أدخل كلمة المرور لمرة واحدة (OTP) التي تم إرسالها"

修改为添加控制字符后的版本：

const correctedMsg = "\u202A+966897845123\u202C أدخل كلمة المرور لمرة واحدة (\u202AOTP\u202C) التي تم إرسالها";
alert(correctedMsg);

\u202A：强制开启**从左到右（LTR）**文本嵌入
\u202C：结束当前文本方向嵌入，恢复默认排版

方法2：简化控制字符（快速修复）

若觉得嵌入标记繁琐，可使用更短的方向标记：

const correctedMsg = "\u200E+966897845123\u200F أدخل كلمة المرور لمرة واحدة (\u200EOTP\u200F) التي تم إرسالها";

\u200E：左到右标记（LTR）
\u200F：右到左标记（RTL）

方法3：检查后端返回文本的隐藏字符

先确认后端返回的原始文本是否包含多余的双向控制字符（如\u200B、\u200C等），这类隐藏字符会干扰排版。可先清理文本，再添加正确的控制字符：

// 清理隐藏控制字符
const cleanedMsg = originalMsg.replace(/[\u200B-\u200F\uFEFF]/g, '');
// 添加方向控制字符
const correctedMsg = "\u202A+966897845123\u202C أدخل كلمة المرور لمرة واحدة (\u202AOTP\u202C) التي تم إرسالها";
alert(correctedMsg);