如何在JavaScript中更新字符串插值内的全局变量data_year并生效？

在energy-maps.globals.v0.js中定义了全局变量data_year：

/**
 * @type {number}
 * @description The year value to determine data loaded by the application.
 */
var data_year = 2012;

data_year用于拼接API URL以切换应用加载数据的接口，示例代码来自energy-maps.funcs.plants.v0.js：

let coal_plants = new PowerPlant('coal-plants', 'Coal plants', 1_092_000_000_000, 'electricity-generation', [{
  draw_layer: draw_coal_plants,
  src: [`${API_URL_PREFIX}/${data_year}/power_plants/coal`],
  d3_fetch: d3.json,
}], 'COAL', 'rgba(0, 0, 0, .5)', plant_stroke);

API_URL_PREFIX同样定义在energy-maps.globals.v0.js中：

const API_URL_PREFIX = 'http://127.0.0.1:5000/api/v0.1.0/infrastructure'

coal_plants的src属性会在energy-maps.init.builder.v1.js的load_layer_data函数中作为d3.json()的参数被调用。

目前在energy-maps.init.builder.v1.js中给按钮绑定点击事件修改data_year，点击按钮时控制台能正确输出新值，但API URL仍保持旧值。尝试将URL改为函数生成后，出现GET http://127.0.0.1:3000/undefined 404 (NOT FOUND)错误。

请问如何正确更新data_year并让字符串插值生成的URL同步更新？

核心问题 #

初始代码里的src是字符串插值生成的静态值，只会在coal_plants实例化时计算一次，后续修改data_year不会自动更新这个URL。改成函数后出现404，大概率是函数没有正确返回值，或者调用时没执行函数。

具体修复步骤 #

1. 将src改为动态函数
   修改PowerPlant实例的src配置，把静态数组换成返回数组的函数，确保每次获取URL时都会重新计算：

   let coal_plants = new PowerPlant('coal-plants', 'Coal plants', 1_092_000_000_000, 'electricity-generation', [{
     draw_layer: draw_coal_plants,
     // 改成函数返回URL数组
     src: () => [`${API_URL_PREFIX}/${data_year}/power_plants/coal`],
     d3_fetch: d3.json,
   }], 'COAL', 'rgba(0, 0, 0, .5)', plant_stroke);
   

2. 修改load_layer_data函数调用逻辑
   在energy-maps.init.builder.v1.js的load_layer_data中，需要判断src是函数还是静态值，若是函数则执行它获取最新URL：

   function load_layer_data(layer_config) {
     // 先获取最新的src值：如果是函数就执行，否则直接用
     const src = typeof layer_config.src === 'function' ? layer_config.src() : layer_config.src;
     // 后续正常调用d3.json
     layer_config.d3_fetch(src[0])
       .then(data => {
         layer_config.draw_layer(data);
       })
       .catch(err => console.error('加载数据失败:', err));
   }
   

3. 确保data_year的全局作用域可访问并主动触发刷新
   确认修改data_year的按钮事件中，直接修改全局变量而非局部变量，并且主动调用数据加载函数刷新：

   // 按钮点击事件示例
   document.getElementById('year-switch-btn').addEventListener('click', () => {
     // 直接修改全局的data_year
     data_year = 2020;
     console.log('更新后的年份:', data_year);
     // 触发数据重新加载（根据实际结构调整获取配置的方式）
     load_layer_data(coal_plants.config);
   });
   

关键注意点 #

• 函数必须返回正确的URL数组，否则会出现undefined导致404错误。
• 修改年份后必须主动调用数据加载函数，仅修改data_year不会自动触发数据刷新。

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