在Django中使用JavaScript处理变量输出时模板变量无法渲染为实际内容的问题

这个问题的核心在于模板语法的渲染时机：当页面完成初始加载后，你的模板引擎（不管是Vue、EJS还是其他工具）已经把{{video.description | slice:":20"}}替换成了实际的截断文本，但运行时执行JS函数时，直接把{{video.description}}写在字符串里，浏览器只会把它当成普通文本输出，不会再触发模板解析了。

下面给你两种常见场景的解决方案：

方案1：如果你用的是Vue这类前端框架（推荐） #

别手动操作innerHTML，利用框架的数据绑定来控制显示状态更安全也更符合框架规范：

<div id="description">
  <!-- 根据showFullDesc状态切换显示内容 -->
  <p style="overflow-wrap: break-word; width: 100%;">
    {{ showFullDesc ? video.description : (video.description | slice:":20") }}
  </p>
  <button @click="showFullDesc = !showFullDesc">
    {{ showFullDesc ? 'Hide Description' : 'Show Description' }}
  </button>
</div>

然后在你的Vue组件里添加一个状态变量：

export default {
  data() {
    return {
      showFullDesc: false,
      // 你的video对象在这里
      video: { /* ... */ }
    }
  }
}

这样框架会自动帮你处理模板渲染，不需要手动操作DOM，还能避免XSS风险（如果描述里有HTML的话）。

方案2：原生JS/静态模板场景 #

如果是原生JS或者模板引擎只做初始渲染，那你需要在页面加载时把完整描述预先存在DOM的某个地方，比如data-*属性：

<!-- 把完整描述存在data-full-desc属性里 -->
<div id="description" data-full-desc="{{video.description}}">
  <p>{{video.description | slice:":20" }}</p>
  <button onclick="showDescription()">Show description</button>
</div>

然后修改你的JS函数，从data属性里读取实际值：

function showDescription() {
  const descElement = document.getElementById('description');
  // 从dataset里拿到预先存储的完整描述
  const fullDescription = descElement.dataset.fullDesc;
  // 渲染到页面上
  descElement.innerHTML = `<p style='overflow-wrap: break-word; width: 100%;'>${fullDescription}</p>`;
}

额外注意 #

如果你的视频描述里包含特殊字符（比如引号、HTML标签），直接存在data属性里可能会导致语法错误，这时候可以用模板引擎的转义方法，比如Vue里的{{ video.description | json }}，或者原生模板里的转义函数，把内容转义后再存在data属性中。

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