如何在外部JavaScript文件中实现Pug字符串插值替换？

我明白你的困扰——Pug的插值语法只在它自己的模板文件里生效，外部的script.js是直接被浏览器请求的静态资源，Express不会自动处理里面的#{}占位符。下面给你几种可行的解决方案，按需选择：

方法一：通过全局对象传递变量（最简单直接） #

在Pug模板里插入一段内部脚本，把后端传来的变量挂载到window全局对象上，外部JS文件直接读取这个全局变量就行。

修改你的index.pug：

html
  head
    title Hello
  body
    h1 Hello World!
    // 先在内部脚本把变量注入全局
    script.
      window.personInfo = { 
        age: #{age}, 
        name: '#{name}' 
      };
    // 再引入外部JS
    script(src='script.js')

然后修改script.js：

var person = window.personInfo;
console.log(person); // 就能拿到{age:91, name:'George P. Burdell'}了

方法二：把外部JS当作Pug模板渲染 #

如果你的外部JS里有大量需要插值的内容，可以把它改成Pug模板文件，让Express在请求它的时候进行渲染。

1. 把script.js重命名为script.pug，内容保持不变：

var person = { age: #{age}, name: '#{name}' };

2. 修改app.js，添加一个路由来处理script.js的请求：

const express = require('express');
var app = express();
app.set('view engine', 'pug');

app.get("/", (req, res) => {
  res.render("index", { age: 91, name: 'George P. Burdell' });
});

// 新增路由：当请求script.js时，渲染script.pug模板
app.get("/script.js", (req, res) => {
  // 必须设置正确的Content-Type，否则浏览器会把它当文本处理
  res.setHeader('Content-Type', 'application/javascript');
  res.render("script", { age: 91, name: 'George P. Burdell' });
});

app.listen(8080);

这样浏览器请求script.js时，收到的就是已经替换好变量的JavaScript代码了。

方法三：通过AJAX请求获取数据（前后端分离风格） #

如果你的项目更偏向前后端分离，或者变量需要动态获取，可以后端提供一个API接口，外部JS通过AJAX请求拿数据。

1. 在app.js里添加API路由：

app.get("/api/person", (req, res) => {
  res.json({ age: 91, name: 'George P. Burdell' });
});

2. 修改script.js用fetch请求数据：

fetch('/api/person')
  .then(res => res.json())
  .then(data => {
    var person = data;
    console.log(person);
    // 这里可以继续处理数据
  })
  .catch(err => console.error('请求失败:', err));

这种方式不需要依赖模板引擎的插值，更灵活，适合复杂的数据场景。

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