主页 / 问题 / 1559980
Accepted
drako black
Asked:2024-01-03 13:52:23 +0000 UTC2024-01-03 13:52:23 +0000 UTC

更新模板字符串中的变量

  • 772

所以我有一个字符串数组：

const VEGETABLE_MESSAGE = [
  `Clean vegetable garden: ${VEGETABLE_GARDEN.building}%`,
  `Seeds planted: ${VEGETABLE_GARDEN.seedPlant} seeds`,
  `Collect the harvest: ${VEGETABLE_GARDEN.harvesting} %`,
  '<span style="color:red">You forgot to water the seeds, the entire harvest was lost!</span>',
  '<span style="color:red">Water seeds: no</span>',
  '<span style="color:green">Water seeds: yes</span>',
];

有所需行的输出：

let VEGETABLE_GARDEN = {
building: 0,}
const VG = VEGETABLE_GARDEN

function mes() {
if (VG.building < 100) {
    mesID = 0
  } else if (VG.seedPlant < 100) {
    mesID = 1
  } else if (VG.harvestDay == 0) {
    mesID = 2
  } else if (VG.seedDie == 1) {
    mesID = 3
  } else {
    mesID = waterMesVG();
  }

document.getElementById('massageVG').innerHTML = VEGETABLE_MESSAGE[mesID];
}
mes() // итог будет: `Clean vegetable garden: 0 %`
// далее я выполняю некоторые действия и значение VEGETABLE_GARDEN.building меняется, например:
VEGETABLE_GARDEN.building = 15
// но при повтором вызове mes()
mes() // итог будет все равно `Clean vegetable garden: 0 %` вместо `Clean vegetable garden: 15 %`. Это и есть моя проблема. 
// если же поместить VEGETABLE_MESSAGE в mes() то все будет прекрасно работать, однако это неудобно в силу ниже описанных проблем. Поэтому мне нужно, чтобы VEGETABLE_MESSAGE оставался за пределами исполняемой функции.

这就是问题所在：如果我VEGETABLE_MESSAGE在字符串发布函数内声明一个数组，那么该变量${VEGETABLE_GARDEN.building}和其他类似变量将根据需要更新和发布，不会出现任何问题，但一旦我将该数组移到函数外，更新就会停止。

据我了解，问题在于这些函数仅在首次启动时才读取变量的值，仅此而已。所以问题是，如何在被调用函数之外更新这些行中的变量，例如当变量本身的值发生变化时？我只是有很多这样的文本，我想将它们收集在一个地方，这样就不必遍历所有代码，例如，需要将其翻译成另一种语言。我将感谢您对如何处理这个问题的帮助和澄清。

javascript

2 个回答

  1. 模板字符串是一个未命名的函数，在声明时调用，进行计算，并用计算结果替换字符串本身。在您的情况下，所有行都将在声明时计算const VEGETABLE_MESSAGE，并且不会再更改。这样做是为了让程序员可以控制计算的具体内容和时间。如果要多次评估一个模板字符串，则必须多次评估它。比方说，将其放入数据准备好时调用的函数中：

    const vegetableMessage = (vegetableGarden, messageId) => {
    switch (messageId) {
    case 0: return `Clean vegetable garden: ${vegetableGarden.building}%`;
    case 1: return `Seeds planted: ${vegetableGarden.seedPlant} seeds`;
    case 2: return `Collect the harvest: ${vegetableGarden.harvesting} %`;
    case 3: return '<span style="color:red">You forgot to water the seeds, the entire harvest was lost!</span>';
    case 4: return '<span style="color:red">Water seeds: no</span>';
    case 5: return '<span style="color:green">Water seeds: yes</span>';
    }
};

...

document.getElementById('massageVG').innerHTML = vegetableMessage(VEGETABLE_GARDEN, mesID);

    PS我放弃了数组，以免在只需要一行时计算很多行。

    • 1
  2. Best Answer

    我再次相信，正确提出的问题意义重大。我坚持这样一个事实：我正在使用模板字符串，但实际上，如果在发布指定字符串时变量的值发生了变化，我只需要配置变量的更新。

    因此，我找到了解决这个问题的方法：我简单地将所有变量移到行外并将它们返回到函数，并<span>在行中添加具有唯一 id 的 HTML 元素。此外，当发布所需的行时，在函数内部我只是将当前值写入指定的行<span>：

    /*
------------- Вот так было -----------------------
const VEGETABLE_MESSAGE = [
  `Clean vegetable garden: ${VEGETABLE_GARDEN.building}%`,
  `Seeds planted: ${VEGETABLE_GARDEN.seedPlant} seeds`,
  `Collect the harvest: ${VEGETABLE_GARDEN.harvesting} %`,
  '<span style="color:red">You forgot to water the seeds, the entire harvest was lost!</span>',
  '<span style="color:red">Water seeds: no</span>',
  '<span style="color:green">Water seeds: yes</span>',
];
-------------- Вот так стало -----------------------------
*/
const VEGETABLE_MESSAGE = [
  'Clean vegetable garden: <span id="span_VG" style="color:red"></span>%',
  'Seeds planted: <span id="span_VG" style="color:red"></span> seeds',
  'Collect the harvest: <span id="span_VG" style="color:red"></span> %',
  '<span style="color:red">You forgot to water the seeds, the entire harvest was lost!</span>',
  '<span style="color:red">Water seeds: no</span>',
  '<span style="color:green">Water seeds: yes</span>',
];
let VEGETABLE_GARDEN = {
building: 0,}
let x; 
const VG = VEGETABLE_GARDEN

function mes() {
if (VG.building < 100) {
    mesID = 0
    x = VG.building // здесь присваиваем обновленное значение
  } else if (VG.seedPlant < 100) {
    mesID = 1
  } else if (VG.harvestDay == 0) {
    mesID = 2
  } else if (VG.seedDie == 1) {
    mesID = 3
  } else {
    mesID = waterMesVG();
  }

document.getElementById('massageVG').innerHTML = VEGETABLE_MESSAGE[mesID];
if (x != null) { // если переменная не пустая, публикуем ее.
    document.getElementById('span_VG').innerHTML = x;
  }
}
VEGETABLE_GARDEN.building = 0
mes() // Clean vegetable garden: 0%
VEGETABLE_GARDEN.building = 15
mes() // Clean vegetable garden: 15%
    • 0

相关问题