JavaScript拼接货币符号时符号出现在数值后方的问题如何解决

你遇到的货币符号和数值顺序反转问题，核心原因是د.إ属于阿拉伯语系字符，默认遵循**右向左（RTL）**的排版规则，浏览器会按照Unicode双向算法自动调整渲染顺序，导致你代码中拼接的「符号+数值」逻辑，最终展示为数值在前、符号在后的效果。

方案1：添加HTML排版属性（推荐） #

给价格的外层展示元素新增dir="ltr"属性，强制整个价格区域按照左到右规则渲染，兼容性最好：

let price = 111;
let currency = "د.إ";
// 拼接后插入DOM
document.querySelector('.price-container').innerHTML = `<span dir="ltr">${currency}${price}</span>`;

渲染后页面实际展示效果为：د.إ111，完全符合预期。

方案2：插入左向控制字符 #

如果不想新增额外HTML标签，可以在拼接内容的最开头加入左到右不可见控制符‎，强制排版顺序：

let price = 111;
let currency = "د.إ";
let str3 =  `‎${currency}${price}`;
// 直接插入DOM即可得到预期效果

注意：如果是直接在控制台打印拼接结果，会受控制台本身的排版规则影响，最终效果请以页面实际渲染为准。

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