是否有允许字符串在 JS 中发生变异的解决方法？或者将复数 CSS 声明为 NOT 字符串？

Question

关于如何重构给定的示例以允许数组元素因配置对象的更改而发生变化，有什么想法吗？（我想到的唯一救星是 CSS 变量，但它仍然是 2018 年......）正如我在代码中的评论中所述，这些是非常长且令人讨厌的 CSS 梯度声明，我真的不' 知道如何以其他方式声明为字符串。任何建议将不胜感激。谢谢！

const config = {
  foo: 42,
  bar: 123,
}

// Very simplified example. in reality, these are complex CSS gradient rules
// with multiple template strings in. Nasty stuff:

const arr = [`foo: ${config.foo}`, `bar: ${config.bar}`];

const doStuff = () => {
  config.foo += 1;
  config.bar += 1;
  console.log(arr[0]); // Does't increment
  console.log(arr[1]); // Does't increment either.
}

document.addEventListener('click', doStuff, false);

Answer 1

允许该值是一个函数，您可以在需要时调用它。

const config = {
  foo: 42,
  bar: 123,
}

const arr = [() => `foo: ${config.foo}`, `bar: ${config.bar}`];

const doStuff = () => {
  config.foo += 1;
  config.bar += 1;
  console.log(typeof arr[0] == "function" ? arr[0]() : arr[0]); // Increments
  console.log(typeof arr[1] == "function" ? arr[1]() : arr[1]); // Doesn't increment
}

document.addEventListener('click', doStuff, false);

Answer 2

你可以把arr变成一个函数，然后当你需要这个数组时，调用这个函数：

const config = {
  foo: 42,
  bar: 123,
}

const arr = () => [`foo: ${config.foo}`, `bar: ${config.bar}`];

const doStuff = () => {
  config.foo += 1;
  config.bar += 1;
  console.log(arr()[0]); // foo: 43
  console.log(arr()[1]); // bar: 123
};

document.addEventListener('click', doStuff, false);

¯\_(ツ)_/¯

是否有允许字符串在 JS 中发生变异的解决方法？或者将复数 CSS 声明为 NOT 字符串？

Is there a workaround to allow strings to mutate in JS? Or to declare complex CSS as NOT strings?

javascript

css

arrays

string

immutability