Django使用{% trans %}标签时法语区域设置导致按钮功能失效如何修复

问题原因 #

你的判断完全正确，法语翻译结果中的d'autres包含单引号，和JS代码中包裹字符串的单引号发生了冲突，直接提前闭合了字符串声明，导致后续代码语法错误，功能无法正常运行。

修复方案 #

• 方案1（最推荐，通用所有语言场景）：给trans标签加上Django内置的escapejs过滤器，专门用于处理JS上下文中的转义需求，会自动转义所有JS特殊字符（单引号、双引号、换行符、反斜杠等），修改后代码如下：

let show_correction = '{% trans "Show native corrections"|escapejs %}';

• 方案2（临时应急，但存在兼容风险）：将JS字符串的包裹符号改为反引号（ES6模板字符串）或者双引号，规避当前单引号冲突。但该方案仅能解决当前场景的问题，如果后续其他语言的翻译结果出现反引号/双引号，仍然会触发同样的错误，不建议长期使用。
• 方案3（前后端解耦更合理）：把翻译内容挂载到DOM元素的自定义属性上，由JS读取属性值获取翻译文本，避免直接在JS中嵌入模板标签：
  首先在HTML对应按钮上添加属性：

<button id="correction-btn" data-show-text="{% trans 'Show native corrections' %}">...</button>

再修改JS代码读取属性：

const show_correction = document.querySelector('#correction-btn').dataset.showText;

这个方案利用了Django自动转义HTML属性特殊字符的特性，也不会出现JS语法冲突问题。

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