JS数字格式化函数控制台运行正常，嵌入HTML后无输出是什么原因？

问题原因 #

你遇到的问题有两个核心原因：

• 你在<script>标签里执行format_number_euro( {{ total }} )只是调用了函数拿到返回值，没有主动将返回值写入到页面DOM中，浏览器不会自动把JS函数的返回值插入到script标签所在的位置。
• 要注意函数定义的顺序，你放在body里的函数定义必须出现在调用代码的前面，否则会触发format_number_euro is not defined的报错。

解决方法 #

方案1：直接在当前位置写入内容 #

修改你的调用代码，用document.write把函数返回值直接输出到当前位置，适合你现在的插入场景：

<div class="card-body">
  <span class="font-weight-bolder display-4 text-dark-75 py-4 pl-5 pr-5">
    <script> document.write(format_number_euro( {{ total }} )) </script>
  </span>
</div>

方案2：通过DOM操作赋值（更规范） #

给展示的span加唯一id，页面加载完成后主动赋值，避免document.write的潜在问题：

1. 给span加id：

<div class="card-body">
  <span id="total-euro" class="font-weight-bolder display-4 text-dark-75 py-4 pl-5 pr-5"></span>
</div>

2. 在函数定义的script后面添加调用代码：

<script type="text/javascript">
  function format_number_euro(number) {
    let formatter = new Intl.NumberFormat('nl-NL', {style: 'currency', currency: 'EUR'})
    return formatter.format(number)
  }
  // 页面DOM加载完成后赋值
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('total-euro').textContent = format_number_euro({{ total }})
  })
</script>

额外注意 #

你可以先打开浏览器控制台看是否有报错，如果有total is not defined的错误，检查Jinja渲染时是否正确把{{ total }}替换成了数字值，确保渲染后的页面里调用位置的参数是合法数字。

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