来自变量的函数参数作为字符串 JavaScript 失败

Question

这有效：

setTheme('#222','#000','wheat','red','wheat','none','none');

这不起作用：=

var theme01 = "'#222','#000','wheat','red','wheat','none','none'"; <br>
setTheme(theme01);
console.log(theme01) = '#222','#000','wheat','red','wheat','none','none'

所以转换为字符串会以某种方式搞砸它？

在捕获画布之前，我将切换各种主题？我用 CSS 完成了所有工作，但 canvas 没有捕获 css 更改或 css 注入。所以我现在已经准备好使用Vanilla Javascript了，但是在经过数小时的测试搜索后需要帮助才能将变量传递给我的函数。救命！

我只在这里工作了几个星期，所以在只在Wordpress工作后，这是一个学习曲线。

function setTheme(topp,bott,txt,hlin,vlin,fOrb,sOrb) {  
var xx = document.querySelectorAll(".hlin");
for (var i = 0; i < xx.length; i++) {
xx[i].style.stroke = hlin;
}
var xx = document.querySelectorAll(".vlin");
for (var i = 0; i < xx.length; i++) {
xx[i].style.stroke = vlin;
}
var xx = document.querySelectorAll(".txt");
for (var i = 0; i < xx.length; i++) {
xx[i].style.fill = txt;
} 
document.getElementById("svg_20").style.fill = topp; 
document.getElementById("svg_1").style.fill = bott;
document.getElementById("svg_2").style.fill = bott;
document.getElementById("svg_3").style.stroke = txt;
document.getElementById("svg_5").style.stroke = txt;
document.getElementById("svg_21").style.fill = fOrb;
document.getElementById("svg_21").style.stroke = sOrb;

};

Answer 1

是的，您不能将参数列表交换为逗号分隔的字符串。您应该使用数据结构来存储它们，例如数组或对象。下面是它如何处理对象的示例。

var theme01 = { topp: '#222', bott: '#000', txt: 'wheat' };
function setTheme ( options ) {
document.getElementById("svg_20").style.fill = options.topp;
document.getElementById("svg_1").style.fill = options.bott;
document.getElementById("svg_3").style.fill = options.txt;
}
setTheme( theme01 )

Answer 2

该字符串将是函数的一个参数。您可以使用带有拆分字符串的Function.apply(1 作为第二个参数，或者更简单地说，使用spread运算符 2(。演示：

1( 功能应用.

2( 点差运算符

( () => {
const log = str => document.querySelector("#result").textContent += `${str} n`;
const parameterString = "#222,#000,wheat";
// no dice
log("someFn(parameterString) => no dice"); 
someFn(parameterString);

// use apply
log("nsomeFn.apply(null, parameterString.split(",")) => ah yes, that works");
someFn.apply(null, parameterString.split(","));

// or use spread operator
log("nsomeFn(...parameterString.split(",")) => ah yes, that works too");
someFn(...parameterString.split(","));

function someFn(p1, p2, p3) {
log(p1);
log(p2);
log(p3);
}

})();

<pre id="result"></pre>

Answer 3

您可以使用扩展语法将其作为数组传递，但是不能传递一串项目并让它们成为多个参数。

function setTheme(topp, bott, txt, hlin, vlin, fOrb, sOrb) {
console.log(topp)
console.log(bott)
console.log(txt)
console.log(hlin)
console.log(vlin)
console.log(fOrb)
console.log(sOrb)
}
let items = ['#222', '#000', 'wheat', 'red', 'wheat', 'none', 'none']
setTheme(...items)