如何在Pug/Jade模板（Node.js/Express）中读取window.navigator.language？

你遇到的问题核心是Pug模板是在服务器端（Node.js/Express）执行渲染的，而window.navigator.language是浏览器端的API，服务器根本没有window这个对象，所以直接在Pug的服务器端代码里引用它肯定会失效。

下面给你两种可行的解决方案，根据你的需求选择：

方案一：服务器端通过请求头获取浏览器语言偏好 #

浏览器在发送请求时，会把用户的语言偏好通过Accept-Language请求头发送给服务器。Express提供了便捷的方法来读取这个信息：

步骤1：在Express路由中获取语言并传递给Pug #

app.get('/', (req, res) => {
  // 获取浏览器首选的语言（如果没有则默认用'en'）
  const preferredLang = req.acceptsLanguages()[0] || 'en';
  // 将语言变量传递给Pug模板
  res.render('your-template-name', { lang: preferredLang });
});

步骤2：在Pug模板中使用这个变量 #

h1 欢迎来到我的网站
p 你的浏览器偏好语言是：#{lang}

这种方法适合需要在服务器端就根据语言渲染不同内容的场景（比如多语言页面的初始渲染）。

方案二：客户端JavaScript获取真实的浏览器界面语言 #

如果需要获取的是浏览器当前实际使用的界面语言（和window.navigator.language完全一致），只能在客户端执行代码。你可以在Pug中嵌入客户端脚本：

//- 先在模板中预留显示位置
div id="browser-lang" 正在检测语言...

//- 嵌入客户端脚本
script.
  // 这里的代码会在浏览器中执行，能访问window对象
  const browserLang = window.navigator.language;
  // 将结果插入到页面中
  document.getElementById('browser-lang').textContent = `你的浏览器界面语言是：${browserLang}`;

这种方法适合不需要服务器端提前渲染语言相关内容，只需要在页面加载后显示或处理语言信息的场景。

两种方案的区别 #

• 服务器端获取的是用户设置的语言偏好列表（可能包含多个选项），不一定完全等于浏览器当前的界面语言；
• 客户端获取的是浏览器实际运行的界面语言，更准确，但只能在页面加载后才能拿到。

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