我正在做一项作业,我需要构建一个基于函数的控制台日志生成器。我需要声明两个变量,由于某种原因,我的做法是错误的:
var message;
var style;
function consoleStyler(color, background, fontSize, txt) {
message = "%c" + txt;
style = `color: ${color};`;
style += `background: ${background}`;
style += `font-size: ${fontSize};`;
console.log(consoleStyler(message, style));
}
(我在函数外部声明它们,因为分配稍后在其他函数中需要它们) 输出表明存在范围错误,并且还特别指出消息变量是错误的。
我明白你的目的,这里有一些细节需要修复。
事实上,目前你的函数只是定义了,并没有被调用。我们需要在函数外部调用
consoleStyler
。
函数需要传递4个参数,这个参数在定义时就确定了,所以调用consoleStyler时,括号内需要4个参数。
就像
consoleStyler('red', 'blue', '100px', 'test-txt');
style
,你的目标是实现类似于{color: red;background: blue;font-size: 100px;}
的目标。您可以使用多条线或一根线。
style = `color: ${color};`;
style += `background: ${background};`; //You are missing a semicolon here.
style += `font-size: ${fontSize};`;
或
style = `color: ${color};`+`background: ${background};`+`font-size: ${fontSize};`;
定义时,反引号是很好的。
外面的分号
;
是JS代码,里面的分号是{color: red;background: blue;font-size: 100px;}
对象的分号。
通过使用反引号,JS 在编译过程中会明白你的分号是用于定义目的,而不是 JS 语句的常规结尾。
这是正确的代码和结果,大家思考后可以比较一下。
var message;
var style;
function consoleStyler(color, background, fontSize, txt) {
message = "%c" + txt;
style = `color: ${color};`;
style += `background: ${background};`;
style += `font-size: ${fontSize};`;
console.log(message, style);
}
consoleStyler('red', 'blue', '100px', 'test-txt');